Simple Way To Drag and Drop the Control Within Parent Layout in Windows Phone

Introduction

Sometimes we may need to drag a specific control around the screen and drop it somewhere. So it may happen that the control will be not visible if the drag and drop leaves the screen boundaries. However we can easily resolve this issue using "built-in Windows Phone behaviors". (In our sample we are using "Motion behaviors", in other words MouseDragElementBehavior.)

Requirements

This sample is targeted to the Windows Phone 7.1 OS.

Description

It would be better to read about behaviors before beginning the development then use the following simple procedure.

Step 1

• Open Visual Studio

• Create a new project named for example "ImageDragDrop"

• Add two DLLs to your project (System.Windows.Interactivity.dll and Microsoft.Expression.Interactions.dll) And make sure the DLLs are added to references like this.

Step 2

• Open MainPage.xaml and add two name spaces in XAML.
  
  XAML
  

  xmlns:ExpInteractivity="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
  xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">

Step 3

• Add your UI XAML code like the following.
  
  XAML
  

  <Grid Background="White">
       <Canvas x:Name="LayoutRoot" Background="#FFFFA3F2" Height="500">
              <Image  x:Name="Image1" Height="100" Source="/Assets/Bal1.jpg" Width="100" Stretch="UniformToFill" >
                  <i:Interaction.Behaviors>
                      <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                  </i:Interaction.Behaviors>
              </Image>
          </Canvas>
      </Grid>

Note

In the code above, I highlight the property ConstrainToParentBounds="True". If you set it to "True" then we are restricted to drag the control within the parent's layout boundaries. And on other hand if you set it to "False" then we can drag the image control to even outside of the parent boundaries. So it will disappear if dragged to outside of the screen boundaries.
So add two more image controls to play with the drag and drop functionality.

XAML Code

<Grid Background="White">
     <Canvas x:Name="LayoutRoot" Background="#FFFFA3F2" Height="500">
            <Image  x:Name="Image1" Height="100" Source="/Assets/Bal1.jpg" Width="100" Stretch="UniformToFill" >
                <i:Interaction.Behaviors>
                    <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="False"/>
                </i:Interaction.Behaviors>
            </Image>
            <Image x:Name="Image2" Height="100" Source="/Assets/Bal2.jpg" Width="100" Stretch="UniformToFill" >
                <i:Interaction.Behaviors>
                    <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                </i:Interaction.Behaviors>
            </Image>
            <Image x:Name="Image3" Height="100" Source="/Assets/Bal3.jpg" Width="100" Stretch="UniformToFill" >
                <i:Interaction.Behaviors>
                    <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                </i:Interaction.Behaviors>
            </Image>
        </Canvas>
    </Grid>

Outputs







Note: If you want to manually implement "Drag and Drop" functionality for a image control then you can write the following code in the "ManipulationDelta" event of the Image control.

C# Code

 private void Image_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs args)
 {
        FrameworkElement Elem = sender as FrameworkElement;
        double Left = Canvas.GetLeft(Elem);
        double Top = Canvas.GetTop(Elem);
        Left += args.DeltaManipulation.Translation.X;//Get x cordinate
        Top += args.DeltaManipulation.Translation.Y;//Get y cordinate

        //check for bounds

        if (Left < 0)
        {
            Left = 0;
        }
        else if (Left > (LayoutRoot.ActualWidth - Elem.ActualWidth))
        {
            Left = LayoutRoot.ActualWidth - Elem.ActualWidth;
        }

        if (Top < 0)
        {
            Top = 0;
        }
        else if (Top > (LayoutRoot.ActualHeight - Elem.ActualHeight))
        {
            Top = LayoutRoot.ActualHeight - Elem.ActualHeight;
        }

        Canvas.SetLeft(Elem, Left);
        Canvas.SetTop(Elem, Top);
 }

Summary

From this article we have learned how to drag and drop controls inside of the parent layout in Windows Phone.

This article is also available at my original blog: link.