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

分类： WPF编程技术2011-11-23 10:552685人阅读评论(5)收藏举报

wpfobjectnullvector

一般的拖动程序，都是实现 MouseLeftButtonDown，MouseLeftButtonUp，MouseMove 这三个事件，大多数的情况下，拖动过程中，都是在 MouseMove 这个函数里面设置控件的坐标。

以下的代码，只有一点点的不同，在拖动过程中，原控件还是在原来位置，只是新产生了一个按控件外形生成的阴影图片，然后设置该阴影图片的位置，最后，鼠标离开的时候，设置原控件的位置。。。

[csharp] view plaincopy?

1. private void ContainerPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
2. {  
3.     if ((e.ClickCount <= 1) && (sender != e.Source))  
4.     {  
5.         ElementUI source = e.Source as ElementUI;  
6.         this.SelectedItem = source;  
7.         NodeUI eui = e.Source as NodeUI;  
8.         if ((eui != null) && eui.DataSource.CanDrag)  
9.         {  
10.             NodeUI nodeUI = (NodeUI) e.Source;  
11.             Point point = new Point(nodeUI.CenterX, nodeUI.CenterY);  
12.             this.startPoint = base.ToPlot(e.GetPosition(this));  
13.             this.offsetVector = (Vector) (this.startPoint - point);  
14.             this.CreateDragShade(nodeUI);  
15.             this.dragShade.CaptureMouse();//阴影捕获鼠标  
16.             e.Handled = true;  
17.         }  
18.     }  
19. }  
20.   
21. private void ContainerPanel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)  
22. {  
23.     if (e.ClickCount <= 1)  
24.     {  
25.         NodeUI selectedItem = this.SelectedItem as NodeUI;  
26.         if ((selectedItem != null) && this.dragShade.IsMouseCaptured)  
27.         {  
28.             Point point = base.ToPlot(e.GetPosition(this));  
29.             double dx = point.X - this.startPoint.X;  
30.             double dy = point.Y - this.startPoint.Y;  
31.             Node dataSource = selectedItem.DataSource;  
32.             if ((dataSource != null) && dataSource.CanDrag)  
33.             {  
34.                 dataSource.PerformDrag(dx, dy);  
35.             }  
36.         }  
37.         this.dragShade.ReleaseMouseCapture();  
38.         this.dragShade.Visibility = Visibility.Hidden;  
39.         base.Children.Remove(this.dragShade);  
40.     }  
41. }  
42.   
43. private void ContainerPanel_MouseMove(object sender, MouseEventArgs e)  
44. {  
45.     if ((e.LeftButton == MouseButtonState.Pressed) && this.dragShade.IsMouseCaptured)  
46.     {  
47.         Point point = base.ToPlot(e.GetPosition(this));  
48.         PlotPanel.SetCenterX(this.dragShade, point.X - this.offsetVector.X);  
49.         PlotPanel.SetCenterY(this.dragShade, point.Y - this.offsetVector.Y);  
50.     }  
51. }  
52.   
53. private void CreateDragShade(NodeUI nodeUI)  
54. {  
55.     VisualBrush brush = new VisualBrush();  
56.     brush.Stretch = Stretch.Fill;  
57.     brush.Visual = nodeUI;  
58.     brush.Opacity = 0.6;  
59.     this.dragShade.Width = nodeUI.ActualWidth;  
60.     this.dragShade.Height = nodeUI.ActualHeight;  
61.     this.dragShade.Stroke = Brushes.Transparent;  
62.     this.dragShade.Fill = brush;  
63.     this.dragShade.Stretch = Stretch.Fill;  
64.     PlotPanel.SetCenterX(this.dragShade, nodeUI.CenterX);  
65.     PlotPanel.SetCenterY(this.dragShade, nodeUI.CenterY);  
66.     this.dragShade.Visibility = Visibility.Visible;  
67.     base.Children.Add(this.dragShade);  
68. }  

分享到：

上一篇：WPF创建自定义按钮[2]

下一篇：WPF中拖动控件,实现位置随意摆放[2]

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

分类： WPF编程技术2011-11-23 11:061143人阅读评论(0)收藏举报

wpfblendmicrosoftlistviewobjectclass

在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 plaincopyprint?

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;
13. namespace DrapControlLibrary
14. {
15. public class DragInCanvasBehavior : Behavior<UIElement>
16. {
17. private Canvas canvas;
19. protected override void OnAttached()
20. {
21. base.OnAttached();
23. // Hook up event handlers.
24. this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;
25. this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;
26. this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
27. }
29. protected override void OnDetaching()
30. {
31. base.OnDetaching();
33. // Detach event handlers.
34. this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;
35. this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;
36. this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;
37. }
39. // Keep track of when the element is being dragged.
40. private bool isDragging = false;
42. // When the element is clicked, record the exact position
43. // where the click is made.
44. private Point mouseOffset;
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;
51. // Dragging mode begins.
52. isDragging = true;
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);
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. }
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);
71. // Move the element.
72. AssociatedObject.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);
73. AssociatedObject.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);
74. }
75. }
77. private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
78. {
79. if (isDragging)
80. {
81. AssociatedObject.ReleaseMouseCapture();
82. isDragging = false;
83. }
84. }
85. }
86. }

using System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.Windows.Interactivity;namespace DrapControlLibrary{    public class DragInCanvasBehavior : Behavior<UIElement>    {        private Canvas canvas;        protected override void OnAttached()        {            base.OnAttached();            // Hook up event handlers.                        this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;            this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;            this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;        }        protected override void OnDetaching()        {            base.OnDetaching();            // Detach event handlers.            this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;            this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;            this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;        }        // Keep track of when the element is being dragged.        private bool isDragging = false;        // When the element is clicked, record the exact position        // where the click is made.        private Point mouseOffset;        private void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)        {            // Find the canvas.            if (canvas == null) canvas = VisualTreeHelper.GetParent(this.AssociatedObject) as Canvas;            // Dragging mode begins.            isDragging = true;            // Get the position of the click relative to the element            // (so the top-left corner of the element is (0,0).            mouseOffset = e.GetPosition(AssociatedObject);            // Capture the mouse. This way you'll keep receiveing            // the MouseMove event even if the user jerks the mouse            // off the element.            AssociatedObject.CaptureMouse();        }        private void AssociatedObject_MouseMove(object sender, MouseEventArgs e)        {            if (isDragging)            {                // Get the position of the element relative to the Canvas.                Point point = e.GetPosition(canvas);                // Move the element.                AssociatedObject.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);                AssociatedObject.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);            }        }        private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)        {            if (isDragging)            {                AssociatedObject.ReleaseMouseCapture();                isDragging = false;            }        }    }}

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

制作测试程序

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

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

[html] view plaincopyprint?

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">
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>

<Window	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:custom="clr-namespace:DrapControlLibrary;assembly=DrapControlLibrary" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"	x:Class="DrapControlTest.MainWindow"	x:Name="Window"	Title="DrapControlTest"	Width="300" Height="250" ResizeMode="CanMinimize" Background="White">    <Canvas>        <TreeView Canvas.Left="10" Canvas.Top="80" Width="200" Height="50">            <i:Interaction.Behaviors>                <custom:DragInCanvasBehavior/>            </i:Interaction.Behaviors>        </TreeView>        <ListView Canvas.Left="10" Canvas.Top="15" Width="200" Height="50">            <i:Interaction.Behaviors>                <custom:DragInCanvasBehavior/>            </i:Interaction.Behaviors>        </ListView>         <Rectangle Canvas.Left="10" Canvas.Top="10" Fill="Yellow" Width="40" Height="60"/>        <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></Window>

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