×
Namespaces

Variants
Actions
(Difference between revisions)

Drag & Drop in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
pavan.pareta (Talk | contribs)
(Pavan.pareta - - Drag & Drop using managed API - Interaction Behaviors API)
pavan.pareta (Talk | contribs)
(Pavan.pareta - - Drag & Drop using managed API - Interaction Behaviors API)
Line 164: Line 164:
 
'''Step-5:''' In additional I have attached an event '''(MouseMoveing)''' to all objects. Handled and set [http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas.zindex(v=vs.95).aspx ZIndex] value to keep dragging object always on front of all objects.
 
'''Step-5:''' In additional I have attached an event '''(MouseMoveing)''' to all objects. Handled and set [http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas.zindex(v=vs.95).aspx ZIndex] value to keep dragging object always on front of all objects.
  
{{Note|<br />While dragging an object to another one; one dragging object get sets behind the another object. To solve this issue, I have attached the ZIndex property to the current dragging object. <br /><br />ZIndex Property 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.}}
+
{{Note|<br />While dragging an object to another one; dragging object get sets behind the another object. To solve this issue, I have attached the ZIndex property to the current dragging object. <br /><br />'''ZIndex Property''' 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.}}
  
  

Revision as of 07:10, 17 September 2012

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


WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 7.1
Devices(s): Nokia Lumia 710, 800
Compatibility
Platform(s): Windows Phone 7.5 (mango)
Windows Phone 7.5
Article
Created: ()
Last edited: pavan.pareta (17 Sep 2012)

Contents

Introduction

Drag & Drop is a feature, which allows you to move objects from one place to another place in your application. Drag and drop functionality also allows you to a smart user experience to access the application. This article shows how simple drag and drop can be implemented in Windows Phone.

Implementation

To create a new Windows Phone application, start Microsoft Visual Studio then create a new Project and select Windows Phone Application Template. I have named the application “WmDev_DragAndDrop”.

In this example I have targeted both UI elements such as drawing objects i.e. (Rectangle, Ellipse and Path) and UI components (TextBlock, Image) to do Drag & Drop; however you can also use others components.

Here is an approach to achieve drag & drop functionality in your windows phone application.

Drag & Drop using managed API - Interaction Behaviors API


WmDev DandD concept.gif

Here are the 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.


Using Interaction Behaviors API which is straightforward to implement and easy to use in your application.

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.


WmDevDnD0001.png


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 or something. In this example I have set the property ConstrainToParentBounds to false; now it’s 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="MouseMoveing">
<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="MouseMoveing">
<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="MouseMoveing">
<i:Interaction.Behaviors>
<el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
</i:Interaction.Behaviors>
</Rectangle>
 
<Ellipse Margin="54,450,288,72" MouseMove="MouseMoveing" 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="MouseMoveing" >
<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="MouseMoveing">
<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="MouseMoveing">
<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="MouseMoveing">
<i:Interaction.Behaviors>
<el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
</i:Interaction.Behaviors>
</Image>
 
</Grid>

UI: Design view output

WmDevDnD0003.png

Step-5: In additional I have attached an event (MouseMoveing) to all objects. Handled and set ZIndex value to keep dragging object always on front of all objects.

Note.pngNote: 
While dragging an object to another one; dragging object get sets behind the another object. To solve this issue, I have attached the ZIndex property to the current dragging object.

ZIndex Property 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 MouseMoveing(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.

Output Screen

WmDev DandD output.gif

Summary

References:

1. MouseDragElementBehavior

2. MouseDragElementBehavior.ConstrainToParentBounds Property

3. ZIndex


~ Happy Coding ~

360 page views in the last 30 days.
×