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

简介:

概述

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),点击 下载文本示例代码。














本文转自lihuijun51CTO博客,原文链接: http://blog.51cto.com/terrylee/67221 ,如需转载请自行联系原作者

相关文章
Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)
原文:Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)   在Silverlight中自身并没有提供拖放功能的相关实现,要实现拖放功能得借助其事件支持(MouseLeftButtonDown、MouseLeftButtonUp和MouseMove)来完成,实际应用中我们可以通过行为(Behavior)特性将拖放操作封装为行为,这样可达到代码复用的效果。
1076 0
|
API 定位技术
ArcGIS API for Silverlight实现地图测距功能
问题:如何实现地图测距功能? 地图工具栏 ...
776 0
|
API
ArcGIS API for Silverlight 使用GP服务实现要素裁剪功能
原文:ArcGIS API for Silverlight 使用GP服务实现要素裁剪功能      昨天一QQ好友问了一个关于裁剪的问题,感觉自己也没有帮上什么忙,之后自己做了一个裁剪的例子,不过在做这个例子的时候还遇到了不少的问题,在此和大家分享一下. 1.裁剪功能的实现过程 这里的裁剪功能很简单,只需要一个Clip(裁剪)工具即可。
1489 0

热门文章

最新文章

下一篇
无影云桌面