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


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.)


This sample is targeted to the Windows Phone 7.1 OS.


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.


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

Step 3

  • Add your UI XAML code like the following.

    1. <Grid Background="White">              
    2.      <Canvas x:Name="LayoutRoot" Background="#FFFFA3F2" Height="500">   
    3.             <Image  x:Name="Image1" Height="100" Source="/Assets/Bal1.jpg" Width="100" Stretch="UniformToFill" >   
    4.                 <i:Interaction.Behaviors>   
    5.                     <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="True"/>   
    6.                 </i:Interaction.Behaviors>   
    7.             </Image>   
    8.         </Canvas>   
    9.     </Grid>  


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.


  1. <Grid Background="White">              
  2.      <Canvas x:Name="LayoutRoot" Background="#FFFFA3F2" Height="500">   
  3.             <Image  x:Name="Image1" Height="100" Source="/Assets/Bal1.jpg" Width="100" Stretch="UniformToFill" >   
  4.                 <i:Interaction.Behaviors>   
  5.                     <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="False"/>   
  6.                 </i:Interaction.Behaviors>   
  7.             </Image>   
  8.             <Image x:Name="Image2" Height="100" Source="/Assets/Bal2.jpg" Width="100" Stretch="UniformToFill" >   
  9.                 <i:Interaction.Behaviors>   
  10.                     <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="True"/>   
  11.                 </i:Interaction.Behaviors>   
  12.             </Image>   
  13.             <Image x:Name="Image3" Height="100" Source="/Assets/Bal3.jpg" Width="100" Stretch="UniformToFill" >   
  14.                 <i:Interaction.Behaviors>   
  15.                     <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="True"/>   
  16.                 </i:Interaction.Behaviors>   
  17.             </Image>   
  18.         </Canvas>   
  19.     </Grid>  


drag and drop

drag and drop image

drag and drop tutorial

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

  1.  private void Image_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs args)  
  2.  {  
  3.         FrameworkElement Elem = sender as FrameworkElement;  
  4.         double Left = Canvas.GetLeft(Elem);  
  5.         double Top = Canvas.GetTop(Elem);  
  6.         Left += args.DeltaManipulation.Translation.X;//Get x cordinate   
  7.         Top += args.DeltaManipulation.Translation.Y;//Get y cordinate   
  9.         //check for bounds   
  11.         if (Left < 0)  
  12.         {  
  13.             Left = 0;  
  14.         }  
  15.         else if (Left > (LayoutRoot.ActualWidth - Elem.ActualWidth))  
  16.         {  
  17.             Left = LayoutRoot.ActualWidth - Elem.ActualWidth;  
  18.         }  
  20.         if (Top < 0)  
  21.         {  
  22.             Top = 0;  
  23.         }  
  24.         else if (Top > (LayoutRoot.ActualHeight - Elem.ActualHeight))  
  25.         {  
  26.             Top = LayoutRoot.ActualHeight - Elem.ActualHeight;  
  27.         }  
  29.         Canvas.SetLeft(Elem, Left);  
  30.         Canvas.SetTop(Elem, Top);  
  31.  }  


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.

Up Next
    Ebook Download
    View all
    View all