行为的目的在于封装部分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>