一步一步学Silverlight 2系列（5）：实现简单的拖放功能

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://terrylee.blog.51cto.com/342737/67221

概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。

本文为系列文章第五篇，利用前面讲过的鼠标事件处理实现简单的拖放功能。

准备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），点击下载文本示例代码。

本文出自 “TerryLee技术专栏” 博客，请务必保留此出处http://terrylee.blog.51cto.com/342737/67221

本文出自 51CTO.COM技术博客