×
Namespaces

Variants
Actions

Windows Phone的拖拽

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata

兼容于
文章
翻译:
WS - OtomiiLu
最后由 hamishwillee 在 03 Jul 2013 编辑

简介

以下是三个实现拖拽效果的关键点:

  1. 监控Tap和Hold– MouseDown Event.
  2. 拖动物体至坐标点– MouseMove Event.
  3. 释放物体在坐标点上- MouseUp Event.


在这个实例中我们将实现物体的拖拽,我们将采用Interaction Behaviors API. 我的拖拽目标即是画出的UI组件(Rectangle, Ellipse and Path etc) 也是UI组件(TextBlock, Image).

以下的图片显示了是怎么运行程序的。

Output Screen

实现

首先我们需要创建一个Windows Phone程序. 同时,我们命名为 “WmDev_DragAndDrop”.

Step-1: 添加以下两个引用到你的程序中:Microsoft.Expression.InteractionsSystem.Windows.Interactivity

  1. 点击你的程序,右键-> 选择References -> 点击Add References…
  2. Add Reference 的选择框中, 选择.Net的标签页,里面有我们需要加入我们程序的dll文件。
  3. 选择Microsoft.Expression.InteractionsSystem.Windows.Interactivity,然后点击OK进行加入。


Step-2: 在XAML文件中添加以下的NameSpace:

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: 定义以下的内容.

  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: 附加一个MouseDragElementBehavior 到object上,然后设置它的ConstrainToParentBounds 属性为 true/false, 那么它就可以代表他的父控件,如 Grid 或者Border etc. 在这个实例中,我们将会设置ConstrainToParentBounds 属性为false; 现在,这将会允许我们在其父容器范围内尽情的拖动我们的控件.

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

以下是完整的XAML代码:

<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: 另外,我为每一个object都添加了(MouseMoving) 事件. 用来设置所有object的ZIndex 属性,以至所拖动的object都在最上方

Note.pngNote: 当我们拖动我们的物体的时候,他可能会在其他的物体的下方,所以我们需要设置ZIndex 属性来调整物体以保证其在所有物体的上方. ZIndex 是一个 attached 属性,用来精确的设置容器控件 Grid, CanvasStackPanel 的子控件的Z轴属性.

MouseMoving 的代码:

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: 现在,点击F5,允许你的程序吧.


引用

  1. MouseDragElementBehavior
  2. MouseDragElementBehavior.ConstrainToParentBounds Property
  3. ZIndex
This page was last modified on 3 July 2013, at 03:50.
111 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×