Creating Movable Controls in a WPF Application.

Create Canvas control in WPF window

  <Canvas x:Name="MyCanvas" Background="LightBlue" >          

           

  </Canvas> 

Add controls whatever you wish

I am taking ellipse control the XAML syntax is as follows

<Ellipse Fill="Red" Height="50" Width="100" Canvas.Top="100" Canvas.Left="50" >

            <Ellipse.RenderTransform>

                <TranslateTransform/>

            </Ellipse.RenderTransform>

</Ellipse>

Create MouseLeftButtonDown event for ellipse control

The XAML syntax looks like as below.

<Ellipse Fill="Red" Height="50" Width="100" Canvas.Top="100" Canvas.Left="50" MouseLeftButtonDown="Ellipse_MouseLeftButtonDown">

            <Ellipse.RenderTransform>

                <TranslateTransform/>

            </Ellipse.RenderTransform>

</Ellipse>

Same way you can add another controls. I am adding Rectangle control

<Rectangle Height="100" Width="100" Canvas.Left="243" Canvas.Top="62" Fill="Gray" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown">

            <Rectangle.RenderTransform>

                <TranslateTransform/>

            </Rectangle.RenderTransform>

</Rectangle>

Now create MouseDown, MouseMove, MouseUp events to Canvas Control.

The line looks like

<Canvas x:Name="MyCanvas" Background="LightBlue" MouseDown="Canvas_MouseDown" MouseMove="Canvas_MouseMove" MouseUp="Canvas_MouseUp" >

The design look like

Now going towards to add the code.

Create global variable

double positionX = 0;

double positionY = 0;       

UIElement UIElementHolder = null;

Write the following codes in Code file.

private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)

{

               positionX = Mouse.GetPosition((UIElement)sender).X;

               positionY = Mouse.GetPosition((UIElement)sender).Y;          

}

private void Canvas_MouseMove(object sender, MouseEventArgs e)

       {

            // checking draging is holding

            if (e.LeftButton == MouseButtonState.Pressed && UIElementHolder != null)

            {

           

                //Capturing the mouse position

                double newX = Mouse.GetPosition(MyCanvas).X;

                double newY = Mouse.GetPosition(MyCanvas).Y;

                //resetting the holded element position

                //control rendertransfer object created for moving in runtime using translateTransfrom element

                Transform objUIElement = UIElementHolder.RenderTransform;

                //getting offset values of control

                double offsetX = objUIElement.Value.OffsetX;

                double offsetY = objUIElement.Value.OffsetY;

                //changing translateTransfrom

                objUIElement.SetValue(TranslateTransform.XProperty, newX+offsetX-positionX);

                objUIElement.SetValue(TranslateTransform.YProperty, newY+offsetY-positionY);             

                // Update position to global variables

                positionX= newX;

                positionY = newY;

             

            }

        }

        private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)

        {

            if (UIElementHolder != null)

            {

                //Clearing holding UIElement              

                UIElementHolder = null;

            }

        }

        private void Ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            //Assigning related UIElement to UIElementHolder Object

            UIElementHolder = (UIElement)sender;

        }

        private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            //Assigning related UIElement to UIElementHolder Object

            UIElementHolder = (UIElement)sender;

        }

Now run the application move the controls..