Silverlight 行为(Behavior)

 

        行为的目的在于封装部分UI功能，那样就可以直接应用于元素而不用写任何代码。行为是一组相关操作的组合，它包含了触发器（监听某个事件或改变）和动作（完成适当的操作）的工作。例如，Deep Zoom功能由一些事件处理程序组成，允许通过鼠标按键和鼠标滚轮对Deep Zoom 图像进行平移和缩放。

        想象一下在Canvas上如何让一个元素可以拥有拖放的行为，首先要创建一个派生自Behavior的类，Behavior是个泛型类，可以通过类型参数将行为限制到特定的元素，通常可以使用UIElement 或者是 FrameworkElement。

        当用户按下鼠标左键，DragInCanvasBehavior开始拖拽操作，记录下元素左上角与鼠标指针之间的偏移量，并捕获鼠标。

    public class DragInCanvasBehavior : Behavior<UIElement>
    {
        protected override void OnAttached()
        {
            base.OnAttached();
            //附加事件处理程序
            this.AssociatedObject.MouseLeftButtonDown += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);
            this.AssociatedObject.MouseMove += new MouseEventHandler(AssociatedObject_MouseMove);
            this.AssociatedObject.MouseLeftButtonUp += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
            //分离事件处理程序
            this.AssociatedObject.MouseLeftButtonDown -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);
            this.AssociatedObject.MouseMove -= new MouseEventHandler(AssociatedObject_MouseMove);
            this.AssociatedObject.MouseLeftButtonUp -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
        }

        //记录当前元素所放置的Canvas
        private Canvas canvas;
        //记录当前元素是否正被拖拽
        private bool isDragging = false;
        //当鼠标左键按下的时候，记录单击所在的准确位置
        private Point mouseOffset;

        private void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            //找到Canvas
            if (canvas == null)
            {
                canvas = (Canvas)VisualTreeHelper.GetParent(this.AssociatedObject);
            }
            //拖拽模式开始
            isDragging = true;
            //获取鼠标单击时相对于元素的位置
            //因此元素左上角的坐标为(0, 0)
            mouseOffset = e.GetPosition(AssociatedObject);
            //捕获鼠标，这样即使用户突然将鼠标指针拽到元素外，仍然可以接收到MouseMove事件
            AssociatedObject.CaptureMouse();
        }

        private void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                //鼠标指针相对于Canvas的位置
                Point point = e.GetPosition(canvas);
                //重定位元素
                Canvas.SetLeft(AssociatedObject, point.X - mouseOffset.X);
                Canvas.SetTop(AssociatedObject, point.Y - mouseOffset.Y);
            }
        }

        private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (isDragging)
            {
                AssociatedObject.ReleaseMouseCapture();
                isDragging = false;
            }
        }
    }

接下来只要简单的附加到Canvas中的任何元素，就可以使用这个行为。

<UserControl x:Class="SilverlightApplication1.Behaviors.BehaviorSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:custom="clr-namespace:SilverlightApplication1.Behaviors"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"          
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Canvas>
        <Rectangle Canvas.Left="10" Canvas.Top="10" Width="40" Height="60" Fill="Yellow" />
        <Ellipse Canvas.Left="10" Canvas.Top="70" Fill="Blue" Width="80" Height="60">
            <i:Interaction.Behaviors>
                <custom:DragInCanvasBehavior />
            </i:Interaction.Behaviors>
        </Ellipse>
        <Ellipse Canvas.Left="80" Canvas.Top="70" Fill="OrangeRed" Width="40" Height="70">
            <i:Interaction.Behaviors>
                <custom:DragInCanvasBehavior />
            </i:Interaction.Behaviors>
        </Ellipse>
    </Canvas>
</UserControl>