WPF中拖动控件,实现位置随意摆放

在WPF中,除了可以通过处理鼠标事件来实现控件位置的拖动以外,还可以通过定义一些控件的行为,来实现控件的拖动,具体操作步骤如下:

自定义实现拖动的类库

1. 使用VS2010建立一个C#的类库

2. 增加"System.Windows.Interactivity.dll"库的引用\

    如果使用的是Blend4,则位置为:"C:\Program Files\Microsoft SDKs\Expression\Blend\.NETFramework\v4.0\Libraries"

    如果使用的是Blend3,则位置为:"C:\Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\WPF"

3. 向项目中添加一个新的类文件.并命名为"DrapControlLibrary.cs",该文件的源码如下

[csharp]  view plain copy

1. using System;  
2. using System.Net;  
3. using System.Windows;  
4. using System.Windows.Controls;  
5. using System.Windows.Documents;  
6. using System.Windows.Ink;  
7. using System.Windows.Input;  
8. using System.Windows.Media;  
9. using System.Windows.Media.Animation;  
10. using System.Windows.Shapes;  
11. using System.Windows.Interactivity;  
12.   
13. namespace DrapControlLibrary  
14. {  
15.     public class DragInCanvasBehavior : Behavior<UIElement>  
16.     {  
17.         private Canvas canvas;  
18.   
19.         protected override void OnAttached()  
20.         {  
21.             base.OnAttached();  
22.   
23.             // Hook up event handlers.              
24.             this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;  
25.             this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;  
26.             this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;  
27.         }  
28.   
29.         protected override void OnDetaching()  
30.         {  
31.             base.OnDetaching();  
32.   
33.             // Detach event handlers.  
34.             this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;  
35.             this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;  
36.             this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;  
37.         }  
38.   
39.         // Keep track of when the element is being dragged.  
40.         private bool isDragging = false;  
41.   
42.         // When the element is clicked, record the exact position  
43.         // where the click is made.  
44.         private Point mouseOffset;  
45.   
46.         private void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
47.         {  
48.             // Find the canvas.  
49.             if (canvas == null) canvas = VisualTreeHelper.GetParent(this.AssociatedObject) as Canvas;  
50.   
51.             // Dragging mode begins.  
52.             isDragging = true;  
53.   
54.             // Get the position of the click relative to the element  
55.             // (so the top-left corner of the element is (0,0).  
56.             mouseOffset = e.GetPosition(AssociatedObject);  
57.   
58.             // Capture the mouse. This way you'll keep receiveing  
59.             // the MouseMove event even if the user jerks the mouse  
60.             // off the element.  
61.             AssociatedObject.CaptureMouse();  
62.         }  
63.   
64.         private void AssociatedObject_MouseMove(object sender, MouseEventArgs e)  
65.         {  
66.             if (isDragging)  
67.             {  
68.                 // Get the position of the element relative to the Canvas.  
69.                 Point point = e.GetPosition(canvas);  
70.   
71.                 // Move the element.  
72.                 AssociatedObject.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);  
73.                 AssociatedObject.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);  
74.             }  
75.         }  
76.   
77.         private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)  
78.         {  
79.             if (isDragging)  
80.             {  
81.                 AssociatedObject.ReleaseMouseCapture();  
82.                 isDragging = false;  
83.             }  
84.         }  
85.     }  
86. }  

4. 编译生成类库文件,类库文件名称为"DrapControlLibrary.dll"

制作测试程序

1. 使用Blend4新建一个WPF程序

2. 修改主XAML文件,修改后的结果如下

[html]  view plain copy

1. <Window  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"   
5.         xmlns:custom="clr-namespace:DrapControlLibrary;assembly=DrapControlLibrary" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"  
6.     x:Class="DrapControlTest.MainWindow"  
7.     x:Name="Window"  
8.     Title="DrapControlTest"  
9.     Width="300" Height="250" ResizeMode="CanMinimize" Background="White">  
10.   
11.     <Canvas>  
12.         <TreeView Canvas.Left="10" Canvas.Top="80" Width="200" Height="50">  
13.             <i:Interaction.Behaviors>  
14.                 <custom:DragInCanvasBehavior/>  
15.             </i:Interaction.Behaviors>  
16.         </TreeView>  
17.         <ListView Canvas.Left="10" Canvas.Top="15" Width="200" Height="50">  
18.             <i:Interaction.Behaviors>  
19.                 <custom:DragInCanvasBehavior/>  
20.             </i:Interaction.Behaviors>  
21.         </ListView>   
22.         <Rectangle Canvas.Left="10" Canvas.Top="10" Fill="Yellow" Width="40" Height="60"/>  
23.         <Ellipse Canvas.Left="10" Canvas.Top="70" Fill="Blue" Width="80" Height="60">  
24.             <i:Interaction.Behaviors>  
25.                 <custom:DragInCanvasBehavior/>  
26.             </i:Interaction.Behaviors>  
27.         </Ellipse>  
28.         <Ellipse Canvas.Left="80" Canvas.Top="70" Fill="OrangeRed" Width="40" Height="70">  
29.             <i:Interaction.Behaviors>  
30.                 <custom:DragInCanvasBehavior/>  
31.             </i:Interaction.Behaviors>  
32.         </Ellipse>  
33.     </Canvas>  
34. </Window>  
35. 
    

3. 编译文件,能够看到效果了吧?是不是很帅

转自：http://blog.youkuaiyun.com/wangyong0921/article/details/7003338