一步一步学Silverlight 2系列(5):实现简单的拖放功能

准备XAML在实现拖放功能中,分为三个步骤:
1.按下鼠标,触发MouseLeftButtonDown事件,选择要拖动的对象。
2.移动鼠标,触发MouseMove事件,移动选择的对象。
3.放开鼠标,触发MouseLeftButtonUp事件,停止捕捉事件。
做一个简单的界面,用一个按钮来显示拖放,如下XAML声明:
<Canvas Background="#46461F">    <Button        MouseLeftButtonDown="OnMouseDown"        MouseMove="OnMouseMove"      MouseLeftButtonUp="OnMouseUp"        Canvas.Left="50" Canvas.Top="50" Background="Red"      FontSize="18"      Width="160" Height="80">        <Button.Content>            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"                        VerticalAlignment="Center">                <Image Source="smile_6.png"></Image>                <TextBlock Text="拖动我" VerticalAlignment="Center" Margin="10"></TextBlock>            </StackPanel>        </Button.Content>    </Button></Canvas>这里为了界面显示效果,使用了控件模板,后续会专门讲到。
开始拖放操作开始拖放操作,实现MouseLeftButtonDown事件处理程序,用两个全局变量来记录当前鼠标的位置和鼠标是否保持移动。
bool trackingMouseMove = false;Point mousePosition;void OnMouseDown(object sender, MouseButtonEventArgs e){    FrameworkElement element = sender as FrameworkElement;    mousePosition = e.GetPosition(null);    trackingMouseMove = true;    if (null != element)    {        element.CaptureMouse();        element.Cursor = Cursors.Hand;    }}
移动对象移动对象,实现MouseMove事件处理程序,计算元素的位置并更新,同时更新鼠标的位置。
void OnMouseMove(object sender, MouseEventArgs e){    FrameworkElement element = sender as FrameworkElement;    if (trackingMouseMove)    {        double deltaV = e.GetPosition(null).Y - mousePosition.Y;        double deltaH = e.GetPosition(null).X - mousePosition.X;        double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);        double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);        element.SetValue(Canvas.TopProperty, newTop);        element.SetValue(Canvas.LeftProperty, newLeft);        mousePosition = e.GetPosition(null);    }}
完成拖放操作完成拖放操作,实现MouseLeftButtonUp事件处理程序。
void OnMouseUp(object sender, MouseButtonEventArgs e){    FrameworkElement element = sender as FrameworkElement;    trackingMouseMove = false;    element.ReleaseMouseCapture();    mousePosition.X = mousePosition.Y = 0;    element.Cursor = null;}
效果显示最终,完成后的效果如下

拖动按钮

结束语本文实现了一个简单的拖放功能(示例来自于Silverlight 2 SDK),点击下载文本示例代码。
身处当今繁芜浮燥的时代,人如飘萍,实在无法把握自己的明天。只好自己经营自己的心境,抚摸自己的孤独。有如临风奔命的鸟,停下来的时候,认真地对着一汪清水仔细地梳理着自己的羽毛。我常常是在寂寞中孤独地梳理着自己的思绪。用书来喂养自己的孤独;用音乐来平息内心汹