第05课 实现简单的拖放功能
来源:互联网 发布:青云志网络播放量第几 编辑:程序博客网 时间:2024/05/22 00:11
本文为系列文章第五篇,利用前面讲过的鼠标事件处理实现简单的拖放功能。
准备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),点击下载文本示例代码。
- 第05课 实现简单的拖放功能
- HTML5实现简单的拖放功能
- 拖放功能的实现
- 拖放功能的实现
- (5):Silverlight 2 实现简单的拖放功能
- ListView之间的拖放功能的实现
- 控件“树”中多选拖放功能的实现
- 实现应用程序的文件拖放功能
- 实现拖放功能的javascirpt代码
- 控件“树”中多选拖放功能的实现
- 实现文件的拖放功能(Delphi)
- 控件“树”中多选拖放功能的实现
- 实现页面元素拖放功能的JS
- 控件"树"中多选拖放功能的实现
- 五步实现文件的拖放功能
- 实现窗口的文件拖放功能
- Delphi实现文件的拖放功能
- [HTML5&CSS3]拖放功能的实现
- 第02课 基本控件
- 第03章 界面布局
- 【转】VC中用函数读写ini文件的方法
- Unix信号处理学习笔记
- 第04课 鼠标事件处理
- 第05课 实现简单的拖放功能
- Struts的配置详解(2)
- 忆龙2009:802.1x加上IP地址绑定是鸡肋吗?
- 第06课 键盘事件处理
- 试试
- 第07课 全屏模式支持
- Python数据结构之——list
- java优势及跨平台原理
- [双语阅读]2009年十大电视热词 “奥巴马远见”居首