WindowsPhone: Drag and Drop the control within parent layout, beginners tutorials (C#-Xaml)

Introduction:

Some times we may need to drag and drop the specific control around the screen.So it may chance to control will be not visible if drag & drop meets out of screen boundaries.However we can easily resolve this issue using "built-in Windows Phone behaviors" (In our sample we are using 'Motion behaviors' ,i.e MouseDragElementBehavior).

Requirements:

• This sample is targeted on windowsphone 7.1 OS

Description:

It would be better to read about behaviours before start to development.And follow the below simple steps
Step 1:

• Open Visual Studio
• Create new project name(Ex: "ImageDragDrop")
• Add two dll's to your project(System.Windows.Interactivity.dll & Microsoft.Expression.Interactions.dll) And make sure dll's 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 below.

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 above code, i highlight the property ConstrainToParentBounds="True" .if you set it as 'True' means we are restricted to drag the control within parent layout boundaries.And in other hand if you set it as 'False' means we can drag the image control even out side of parent boundaries.so it will be disappear if drag and drop meets out side of screen boundaries.
So add two more image controls to play with drag & drop functionality.

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="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 & Drop' functionality for a image control. You can write following code in 'ManipulationDelta' event of Image control.

C#

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); 
        } 

I thought you don't need sample source code, because i already provided necessary code in this post.So read step by step to copy above code and play with drag & drop functionality.

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)