• 一步一步学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

  • 相关阅读:
    Js实现页面处理器
    自定类型转换
    为什么PHP5中保存cookie以后,要刷新一次才能读取cookie的内容?
    PHP不不支持函数重载
    JS 省市区三级联动
    我喜欢的酷站
    网站宽度设置多少
    Windows环境下Node.js 以及NPM和CoffeeScript的安装配置
    HTML中Meta详解
    搭建SVN
  • 原文地址:https://www.cnblogs.com/hdjjun/p/1361509.html
Copyright © 2020-2023  润新知