Drag & Drop in Windows Phone

Comments

Hamishwillee - Minor subedit

Hi

I've given this a minor update for wiki style. I removed the introduction because IMO it says nothing more than was covered by the Abstract.

One technical question. You say

In this example I have set the property ConstrainToParentBounds to false; now it only allows user to drag and drop within a parent’s restricted area.

Are you sure? I would expect that if you set a variable named ConstrainToParentBounds to false you would be saying it is "unconstrained", rather than constrained as indicated.

Second question,

In terms of improvement:

• I find the first animated gif very distracting (showing the finger). I'd be tempted to delete it, but minimally a much longer update time between frames - 2 seconds or maybe even 2.5. Also note that the spelling is "dragging" (two g's)
• Moving is spelled Moving, not Moveing
• I think you should rename the Implementation section "Introduction", and then make the next section the same level.

Otherwise looks very useful. Thanks.

Regards

Hamish

hamishwillee 09:23, 17 September 2012 (EEST)

Pavan.pareta - Thanks Hamish!!

Thank you Hamish for your's suggestions.

Question - Are you sure? I would expect that if you set a variable named ConstrainToParentBounds to false you would be saying it is "unconstrained", rather than constrained as indicated. Answer - Yes! you are right. In this example, I allowed rectangle1 can drag and drop outside to its parent restricted area; and all objects are restricted.

My apologies for typo, I have updated according to your suggestion.

Thank you once again.

Regards,

Pavan

Pavan Pareta 18:01, 17 September 2012 (EEST)

Hamishwillee - Thanks very much - looks a lot better

Hi Pavan

Thanks for making the fixes. I have further edited this to bring the introductory material back into an introduction - please check you're happy with the changes. I think it helps to have the animated gif showing the final example at the top - although a good youtube video here would be even better!

No need to apologise for making mistakes. Everyone does.

Regards

Hamish

hamishwillee 05:54, 18 September 2012 (EEST)

Hamishwillee - This has been translated

Hi Pavan

Your article got translated - check it out!

hamishwillee 07:47, 20 September 2012 (EEST)

Log in or Join to leave comments.

25 Nov
2012

This article explains how to use Interaction Behaviors API to Drag & Drop objects in Windows Phone

Article Metadata

---

Code Example

Source file: Media:WmDev DragAndDrop.zip

---

Tested with

SDK: Windows Phone 7.1

Devices(s): Nokia Lumia 710, 800

---

Compatibility

Platform(s): Windows Phone 7.5 (mango)

---

Article

Keywords: Interaction Behaviors API

Created: pavan.pareta (16 Sep 2012)

Last edited: hamishwillee (10 Apr 2013)

Introduction

There are three core sequences to be implemented in drag & drop using traditional process:

1. Tap (Press) & hold down – MouseDown Event.
2. Drag the mouse to place the object to the desired location – MouseMove Event.
3. Drop the object by releasing the mouse button - MouseUp Event.

In this example I have implemented the above drag'n'drop sequences using the Interaction Behaviors API. I have targeted both UI elements (drawing objects like Rectangle, Ellipse and Path etc) and UI components (TextBlock, Image). Note that you can also use other components.

The animated gif below shows the running example.

Output Screen

Implementation

Follow the steps mentioned to test the example, first create a new Windows Phone application. To do this start Microsoft Visual Studio then create a new Project and select Windows Phone Application Template. I have named the application “WmDev_DragAndDrop”.

Step-1: Add two references to Microsoft.Expression.Interactions and System.Windows.Interactivity in your solution.

1. Go to solution explorer and right click on Project -> References -> click on Add References…
2. In the Add Reference dialog box, select the .NET tab indicating the type of component you want to reference.
3. Select the Microsoft.Expression.Interactions and System.Windows.Interactivity component to reference, and then click OK.

Step-2: Add the following namespace at the top of your XAML file:

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

Step-3: Define the following objects in XAML.

1. Rectangle
2. Ellipse
3. Path
4. TextBlock
5. Image

<Rectangle x:Name="rectangle1" Fill="#FFF35206" HorizontalAlignment="Left" Height="74" Margin="172,478,0,0" Stroke="Black" VerticalAlignment="Top" Width="76" />
 
<Rectangle x:Name="rectangle2" Fill="#FFF3DF06" HorizontalAlignment="Right" Height="64" Margin="0,333,279,0" Stroke="Black" VerticalAlignment="Top" Width="123" />
 
<Ellipse Margin="54,450,288,72" Fill="Blue"/>
 
<Path Data="M78,318 L41,383 L111,380 z" Fill="#FFF306DF" HorizontalAlignment="Left" Height="71.5" Margin="70,0,0,405.5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="123" />
 
<Path Data="M275,309 L322,305 L357,327 L362,360 L342,391 L295,398 L259,376 L252,338 z" Fill="#FF06F30A" HorizontalAlignment="Right" Height="94" Margin="0,0,90.5,223" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="111" />
 
<TextBlock Height="30" Margin="70,50,250,133" Name="textBlock1" Text="Pavan Pareta" />
 
<Image Height="110" Name="image1" Stretch="Fill" Source="/WmDev_DragAndDrop;component/Images/house.png" Margin="254,90,95,407"/>

Step-4: Attaching a MouseDragElementBehavior to the object and setting its ConstrainToParentBounds property to true/false, so it will respect the bounds of its parent object like a Grid or Border etc. In this example I have set the property ConstrainToParentBounds to false; now it only allows user to drag and drop within a parent’s restricted area.

<Rectangle x:Name="rectangle1" Fill="#FFF35206" HorizontalAlignment="Left" Height="74" Margin="172,478,0,0" Stroke="Black" VerticalAlignment="Top" Width="76" MouseMove="MouseMoving">
    <i:Interaction.Behaviors>
           <el:MouseDragElementBehavior ConstrainToParentBounds="False"/>
    </i:Interaction.Behaviors>
</Rectangle>

Here is the complete XAML code:

<Grid x:Name="gd" Grid.Row="1" Margin="12,0,12,0">
 
    <Rectangle x:Name="rectangle1" Fill="#FFF35206" HorizontalAlignment="Left" Height="80" Margin="254,481,0,0" Stroke="Black" VerticalAlignment="Top" Width="102" MouseMove="MouseMoving">
        <i:Interaction.Behaviors>
            <el:MouseDragElementBehavior ConstrainToParentBounds="False"/>
        </i:Interaction.Behaviors>
    </Rectangle>
 
    <Rectangle x:Name="rectangle2" Fill="#FFF3DF06" HorizontalAlignment="Right" Height="64" Margin="0,333,279,0" Stroke="Black" VerticalAlignment="Top" Width="123" MouseMove="MouseMoving">
        <i:Interaction.Behaviors>
            <el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
        </i:Interaction.Behaviors>
    </Rectangle>
 
    <Ellipse Margin="54,450,288,72" MouseMove="MouseMoving" Fill="Blue">
        <i:Interaction.Behaviors>
            <el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
        </i:Interaction.Behaviors>
    </Ellipse>
 
    <Path Data="M78,318 L41,383 L111,380 z" Fill="#FFF306DF" HorizontalAlignment="Left" Height="71.5" Margin="70,0,0,438" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="123" MouseMove="MouseMoving" >
        <i:Interaction.Behaviors>
            <el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
        </i:Interaction.Behaviors>
    </Path>
 
    <Path Data="M275,309 L322,305 L357,327 L362,360 L342,391 L295,398 L259,376 L252,338 z" Fill="#FF06F30A" HorizontalAlignment="Right" Height="94" Margin="0,0,90.5,223" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="111" MouseMove="MouseMoving">
        <i:Interaction.Behaviors>
            <el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
        </i:Interaction.Behaviors>
    </Path>
 
    <TextBlock Height="30" Margin="70,50,250,133"
        Name="textBlock1" Text="Pavan Pareta" MouseMove="MouseMoving">
        <i:Interaction.Behaviors>
            <el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                </i:Interaction.Behaviors>
    </TextBlock>
 
    <Image Height="110" Name="image1" Stretch="Fill" Source="/WmDev_DragAndDrop;component/Images/house.png" Margin="254,90,95,407" MouseMove="MouseMoving">
        <i:Interaction.Behaviors>
            <el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
        </i:Interaction.Behaviors>
    </Image>
 
</Grid>

UI: Design view output

Step-5: In addition i've attached an event (MouseMoving) to all objects. Handled and set ZIndex value to keep dragging object always on front of all objects.

Note: While dragging and placing an object over another; the dragged object get sets behind the other one. To resolve this issue, a property ZIndex may be to the object being dragged. ZIndex is an attached property, which allows you to explicitly set the z-order of objects in the child collection of Grid, Canvas and StackPanel objects.

Code Snippet for the MouseMoving method.

private void MouseMoving(object sender, MouseEventArgs e)
{
            if (sender.GetType() == typeof(Rectangle))
            {
                Rectangle cx = (Rectangle)sender;
                Canvas.SetZIndex(cx, idx++);
            }
            if (sender.GetType() == typeof(Ellipse))
            {
                Ellipse cx = (Ellipse)sender;
                Canvas.SetZIndex(cx, idx++);
            }
            if (sender.GetType() == typeof(Path))
            {
                Path cx = (Path)sender;
                Canvas.SetZIndex(cx, idx++);
            }
            else if (sender.GetType() == typeof(TextBlock))
            {
                TextBlock realSender = (TextBlock)sender;
                Canvas.SetZIndex(realSender, idx++);
            }
            else if (sender.GetType() == typeof(Image))
            {
                Image realSender = (Image)sender;
                Canvas.SetZIndex(realSender, idx++);
            }
}

Step-6: Now run the application by pressing F5 Key.

References

1. MouseDragElementBehavior
2. MouseDragElementBehavior.ConstrainToParentBounds Property
3. ZIndex

Sample Code

You can download sample code from Media:WmDev DragAndDrop.zip.