Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)

在Silverlight中自身并没有提供拖放功能的相关实现,要实现拖放功能得借助其事件支持(MouseLeftButtonDown、MouseLeftButtonUp和MouseMove)来完成,实际应用中我们可以通过行为(Behavior)特性将拖放操作封装为行为,这样可达到代码复用的效果。而在Blend中则直接提供了拖放操作行为,它位于Microsoft.Expression.Interactions.dll的Microsoft.Expression.Interactivity.Layout名称空间下。

  Silverlight中的拖放操作通常是使用事件驱动动态定位对象的坐标来实现,首先来看看如何通过代码的可编程方式在Silverlight中实现拖放操作,如下代码块:

private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    MousePosition = e.GetPosition(null);
    IsMouseCaptured = true;
    element.CaptureMouse();
    element.Cursor = Cursors.Hand;
}

private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    IsMouseCaptured = false;
    element.ReleaseMouseCapture();
    MousePosition.X = MousePosition.Y = 0;
    element.Cursor = null;
}

private void OnMouseMove(object sender, MouseEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    if (IsMouseCaptured)
    {
        double Y = e.GetPosition(null).Y - MousePosition.Y;
        double X = e.GetPosition(null).X - MousePosition.X;

X = X + (double)element.GetValue(Canvas.LeftProperty);
        Y = Y + (double)element.GetValue(Canvas.TopProperty);

element.SetValue(Canvas.LeftProperty, X);
        element.SetValue(Canvas.TopProperty, Y);

MousePosition = e.GetPosition(null);
    }
}

  如上定义好的三个方法实现了对象的拖放算法,实际应用中只需要将需要进行拖放移动的对象分别添加MouseLeftButtonDown、MouseLeftButtonUp和MouseMove事件处理就行了。如下示例代码:

attachedElement.MouseLeftButtonDown += (s, e) => OnMouseLeftButtonDown(s, e);
attachedElement.MouseLeftButtonUp += (s, e) => OnMouseLeftButtonUp(s, e);
attachedElement.MouseMove += (s, e) => OnMouseMove(s, e);

  按照常规做法我们会将以上相关方法的实现封装为一个基类以达到复用的目的,但本文不推荐使用基类去封装拖放行为,因为Silverlight有专门用于处理对象行为的特性-Behaviors。在Silverlight中System.Windows.Interactivity命名空间下提供了行为的基础框架,我们可以进行自由的扩展行为以实现自己的不同需求。安装Blend后可以在安装目录下找到Microsoft.Expression.Interactivity.dll这个库,这个库提供了一些比较常用的集中行为扩展,在Blend中通过“窗口”--“资产”打开资产面板,选择行为资产就可以查看到Silverlight 3中所提供的扩展行为,如下图: 

        

  我们可以将上面实现对象拖放的功能封装为行为以达到代码复用,在Blend中通过“文件”--“新建”菜单项可打开新建对象对话框。

        

  Blend新建向导创建的行为提供了一套行为模板,如下代码块:

public class Behavior1 : Behavior<DependencyObject>
{
    public Behavior1()
    {
        // 在此点下面插入创建对象所需的代码。

//
        // 下面的代码行用于在命令
        // 与要调用的函数之间建立关系。如果您选择
        // 使用 MyFunction 和 MyCommand 的已注释掉的版本,而不是创建自己的实现,
        // 请取消注释以下行并添加对 Microsoft.Expression.Interactions 的引用。
        //
        // 文档将向您提供简单命令实现的示例,
        // 您可以使用该示例,而不是使用 ActionCommand 并引用 Interactions 程序集。
        //
        //this.MyCommand = new ActionCommand(this.MyFunction);
    }

protected override void OnAttached()
    {
        base.OnAttached();

// 插入要在将 Behavior 附加到对象时运行的代码。
    }

protected override void OnDetaching()
    {
        base.OnDetaching();

// 插入要在从对象中删除 Behavior 时运行的代码。
    }

/*
    public ICommand MyCommand
    {
        get;
        private set;
    }
     
    private void MyFunction()
    {
        // 插入要在从对象中删除 Behavior 时运行的代码。
    }
    */
}

  要实现自定义行为通过此行为模板进行自我扩展就行了,位于System.Windows.Interactivity中的Behavior提供了将行为或命令进行封装以达到可进行附加到其他的一个对象上,需要注意的是自定义行为默认继承Behavior<DependencyObject>,使用DependencyObject类型的行为是不能访问对象的鼠标事件的,如果要访问鼠标操作的事件,可以使用具体的UI组件类型或者直接使用UI元素基类UIElement。

  下面为将本篇前面实现对象拖放功能的代码进行了行为的封装,完整代码如下:

/// <summary>
/// Behavior:封装行为和命令,便于附加到对象中。
/// DependencyObject:不能实现访问鼠操作事件
/// UIElement:可访问鼠标事件
/// </summary>
public class DragBehavior : Behavior<UIElement>
{
    private UIElement attachedElement;
    private UserControl parent;
    private bool IsMouseCaptured;
    private Point MousePosition;

protected override void OnAttached()
    {
        attachedElement = this.AssociatedObject;
        parent = Application.Current.RootVisual as UserControl;
        attachedElement.MouseLeftButtonDown += (s, e) => OnMouseLeftButtonDown(s, e);
        attachedElement.MouseLeftButtonUp += (s, e) => OnMouseLeftButtonUp(s, e);
        attachedElement.MouseMove += (s, e) => OnMouseMove(s, e);
    }

private void OnMouseMove(object sender, MouseEventArgs e)
    {
        FrameworkElement element = sender as FrameworkElement;
        if (IsMouseCaptured)
        {
            double Y = e.GetPosition(null).Y - MousePosition.Y;
            double X = e.GetPosition(null).X - MousePosition.X;

X = X + (double)element.GetValue(Canvas.LeftProperty);
            Y = Y + (double)element.GetValue(Canvas.TopProperty);

element.SetValue(Canvas.LeftProperty, X);
            element.SetValue(Canvas.TopProperty, Y);

MousePosition = e.GetPosition(null);
        }
    }

private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        FrameworkElement element = sender as FrameworkElement;
        IsMouseCaptured = false;
        element.ReleaseMouseCapture();
        MousePosition.X = MousePosition.Y = 0;
        element.Cursor = null;
    }

private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        FrameworkElement element = sender as FrameworkElement;
        MousePosition = e.GetPosition(null);
        IsMouseCaptured = true;
        element.CaptureMouse();
        element.Cursor = Cursors.Hand;
    }

protected override void OnDetaching()
    {
        base.OnDetaching();
    }
}

  通过行为特性将对象的拖放功能进行封装以达到复用的目的,以上就全部实现了这个功能,测试可通过Ctrol+Shift+B编译项目,然后通过“资产”面板就可以发现以上自定义扩展的拖放行为。

        

  使用行为非常简单,打开Blend的资源面板中,选中需要使用的行为,将其拖放到要使用该行为的对象(Blend中设计的界面对象)上就行了。其实在Blend也提供了拖放行为:MouseDragElementBehavior,直接使用这个行为和本篇所介绍的实现达到的是同样的效果。以下为分别使用这两种行为所对应生成的XAML编码:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:local="clr-namespace:DragBehavior"
    xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
    x:Class="DragBehavior.MainControl"
    Width="800" Height="600">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Rectangle Fill="#FFFF0000" Stroke="#FF000000" Height="100" Width="100" Canvas.Left="100" Canvas.Top="100">
            <i:Interaction.Behaviors>
                <il:MouseDragElementBehavior/>
            </i:Interaction.Behaviors>
        </Rectangle>
        <Ellipse Fill="#FF0000FF" Stroke="#FF000000" Height="100" Width="100" Canvas.Top="219" Canvas.Left="397">
            <i:Interaction.Behaviors>
                <local:DragBehavior/>
            </i:Interaction.Behaviors>
        </Ellipse>
    </Canvas>
</UserControl>

原文地址:https://www.cnblogs.com/xiaowie/p/9279642.html

时间: 2024-10-12 01:04:31

Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)的相关文章

Silverlight &amp; Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)

模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模糊的透明度来达到一个放大透明的效果. 一.模糊效果(BlurEffect) Silverlight中的每个对象都是支持添加模糊和阴影效果的, 在Blend工具中通过"外观"面板可以直接可视化的进行设计完成模糊和阴影效果的添加,以及效果参数的调整.如下图为模糊效果的设计界面: 点击"

Silverlight &amp; Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)

Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控制对象在多个不同的视觉状态之间切换.导航.本篇主要介绍动画(Animation)与视图状态管理(Visual State Manager)的结合应用,关于视图状态管理的详细内容请大家查看相关资料. 举一个简单的示例,比如在开发一个项目中有一个按钮,当我点击这个按钮的时候就动态的从某个方向(如从上到下

Silverlight &amp; Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动

如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯.因为在Silverlight中的坐标系与Flash中的坐标系一样,一切都的颠倒的.在标准的数学坐标系中,X轴表示水平轴,Y轴表是垂直轴,然而Silverlight中的坐标系是基于视频屏幕的坐标系. Silverlight中的坐标系统和Flash中的坐标系统是完全一样的,都是采用笛卡尔坐标系统,分为四象限.简单的说就是以X轴表示水平方向并向东方无限延伸,Y轴表示垂直方向并向着南方无限延伸,X和Y轴相交点表示坐标系源

Silverlight &amp; Blend动画设计系列一:偏移动画(TranslateTransform)

原文:Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform) 用户界面组件.图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”.实际上,英文中Animation这个单词的意思是给某物带来生命.在界面中添加动画效果,给人以印象深刻可视化提示,可以让用户的注意力集中到我们想让他们关注的地方. 动画主要是通过计时器来完成,在Silverlight中开发动画程序通常是使用微软主推的设计工

Silverlight &amp; Blend动画设计系列十一:沿路径动画(Animation Along a Path)

原文:Silverlight & Blend动画设计系列十一:沿路径动画(Animation Along a Path) Silverlight 提供一个好的动画基础,但缺少一种方便的方法沿任意几何路径对象进行动画处理.在Windows Presentation Foundation中提供了动画处理类DoubleAnimationUsingPath和PointAnimationUsingPath,使用这些类就可以非常容易的实现沿几何路径的动画处理,本文提供了基于Silverlight的等效动画类

Silverlight &amp; Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)

原文:Silverlight & Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation) 说到对象的旋转,或许就会联想到对象角度的概念.对象的旋转实现实际上就是利用对象的角度改变来实现的位置变换,在<Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)>一文中有对对象的不同角度变换的实现介绍,本篇要介绍的自由旋转(Free-form rotation)将借助<Fun

Silverlight &amp; Blend动画设计系列二:旋转动画(RotateTransform)

Silverlight的基础动画包括偏移.旋转.缩放.倾斜和翻转动画,这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果,其使用也是非常简单的.相信看过上一篇<偏移动画(TranslateTransform)>文章的朋友大多数对Silverlight & Blend动画设计已经产生了莫大的兴趣,本篇将继续介绍Silverlight中的基础动画之旋转动画(RotateTransform). 所谓旋转动画(RotateTransform)也就是一个元素以一个坐标点为旋转中

Silverlight &amp; Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效

当我们在进行Silverlight & Blend进行动画设计的过程中,可能需要设计出很多效果不一的图形图像出来作为动画的基本组成元素.然而在设计过程中可能会出现许多的问题,比如当前绘制了一个椭圆,但是在动画中仅仅只需要椭圆的一半或是更多更少的部分用作与动画元素,这时候就需要对椭圆对象进行相应的处理才能满足我们的需求,那到底该怎么做才能实现最终想要的效果呢?本篇将介绍在Microsoft Expression Blend中进行动画设计的一些常用的功能点和动画设计技巧. 一.转换对象为路径 将一个

Silverlight &amp; Blend动画设计系列三:缩放动画(ScaleTransform)

在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动画效果,故此我将其称为缩放动画(ScaleTransform).使用ScaleTransform需要特别关注的有两点:中心点坐标和X.Y轴方向的缩放比例,比例值越小则对象元素就越小(既收缩),比例值越大则对象元素就越大(既呈现为放大效果). Blend对Silverlight里的动画设计支持非常强大