×
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 06:50.
104 page views in the last 30 days.
×