Silverlight 行为(Behavior)

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

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

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

view plain copy to clipboard print ?

1. public class DragInCanvasBehavior : Behavior<UIElement>  
2. {  
3.     protected override void OnAttached()  
4.     {  
5.         base.OnAttached();  
6.         //附加事件处理程序   
7.         this.AssociatedObject.MouseLeftButtonDown += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);  
8.         this.AssociatedObject.MouseMove += new MouseEventHandler(AssociatedObject_MouseMove);  
9.         this.AssociatedObject.MouseLeftButtonUp += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);  
10.     }  
11.   
12.     protected override void OnDetaching()  
13.     {  
14.         base.OnDetaching();  
15.         //分离事件处理程序   
16.         this.AssociatedObject.MouseLeftButtonDown -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);  
17.         this.AssociatedObject.MouseMove -= new MouseEventHandler(AssociatedObject_MouseMove);  
18.         this.AssociatedObject.MouseLeftButtonUp -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);  
19.     }  
20.   
21.     //记录当前元素所放置的Canvas   
22.     private Canvas canvas;  
23.     //记录当前元素是否正被拖拽   
24.     private bool isDragging = false;  
25.     //当鼠标左键按下的时候，记录单击所在的准确位置   
26.     private Point mouseOffset;  
27.   
28.     private void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
29.     {  
30.         //找到Canvas   
31.         if (canvas == null)  
32.         {  
33.             canvas = (Canvas)VisualTreeHelper.GetParent(this.AssociatedObject);  
34.         }  
35.         //拖拽模式开始   
36.         isDragging = true;  
37.         //获取鼠标单击时相对于元素的位置   
38.         //因此元素左上角的坐标为(0, 0)   
39.         mouseOffset = e.GetPosition(AssociatedObject);  
40.         //捕获鼠标，这样即使用户突然将鼠标指针拽到元素外，仍然可以接收到MouseMove事件   
41.         AssociatedObject.CaptureMouse();  
42.     }  
43.   
44.     private void AssociatedObject_MouseMove(object sender, MouseEventArgs e)  
45.     {  
46.         if (isDragging)  
47.         {  
48.             //鼠标指针相对于Canvas的位置   
49.             Point point = e.GetPosition(canvas);  
50.             //重定位元素   
51.             Canvas.SetLeft(AssociatedObject, point.X - mouseOffset.X);  
52.             Canvas.SetTop(AssociatedObject, point.Y - mouseOffset.Y);  
53.         }  
54.     }  
55.   
56.     private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)  
57.     {  
58.         if (isDragging)  
59.         {  
60.             AssociatedObject.ReleaseMouseCapture();  
61.             isDragging = false;  
62.         }  
63.     }  
64. }  

  

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

view plain copy to clipboard print ?

1. <UserControl x:Class="SilverlightApplication1.Behaviors.BehaviorSample"  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
6.     xmlns:custom="clr-namespace:SilverlightApplication1.Behaviors"  
7.     xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"            
8.     mc:Ignorable="d"  
9.     d:DesignHeight="300" d:DesignWidth="400">  
10.     <Canvas>  
11.         <Rectangle Canvas.Left="10" Canvas.Top="10" Width="40" Height="60" Fill="Yellow" />  
12.         <Ellipse Canvas.Left="10" Canvas.Top="70" Fill="Blue" Width="80" Height="60">  
13.             <i:Interaction.Behaviors>  
14.                 <custom:DragInCanvasBehavior />  
15.             </i:Interaction.Behaviors>  
16.         </Ellipse>  
17.         <Ellipse Canvas.Left="80" Canvas.Top="70" Fill="OrangeRed" Width="40" Height="70">  
18.             <i:Interaction.Behaviors>  
19.                 <custom:DragInCanvasBehavior />  
20.             </i:Interaction.Behaviors>  
21.         </Ellipse>  
22.     </Canvas>  
23. </UserControl>  

本文链接地址为：http://blog.youkuaiyun.com/fan_ken/article/details/6737495