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

在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",该文件的源码如下

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文件,修改后的结果如下

<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. 编译文件,能够看到效果了吧?是不是很帅