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

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

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

wpfobjectnullvector

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

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

private void ContainerPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if ((e.ClickCount <= 1) && (sender != e.Source))
    {
        ElementUI source = e.Source as ElementUI;
        this.SelectedItem = source;
        NodeUI eui = e.Source as NodeUI;
        if ((eui != null) && eui.DataSource.CanDrag)
        {
            NodeUI nodeUI = (NodeUI) e.Source;
            Point point = new Point(nodeUI.CenterX, nodeUI.CenterY);
            this.startPoint = base.ToPlot(e.GetPosition(this));
            this.offsetVector = (Vector) (this.startPoint - point);
            this.CreateDragShade(nodeUI);
            this.dragShade.CaptureMouse();//阴影捕获鼠标
            e.Handled = true;
        }
    }
}

private void ContainerPanel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    if (e.ClickCount <= 1)
    {
        NodeUI selectedItem = this.SelectedItem as NodeUI;
        if ((selectedItem != null) && this.dragShade.IsMouseCaptured)
        {
            Point point = base.ToPlot(e.GetPosition(this));
            double dx = point.X - this.startPoint.X;
            double dy = point.Y - this.startPoint.Y;
            Node dataSource = selectedItem.DataSource;
            if ((dataSource != null) && dataSource.CanDrag)
            {
                dataSource.PerformDrag(dx, dy);
            }
        }
        this.dragShade.ReleaseMouseCapture();
        this.dragShade.Visibility = Visibility.Hidden;
        base.Children.Remove(this.dragShade);
    }
}

private void ContainerPanel_MouseMove(object sender, MouseEventArgs e)
{
    if ((e.LeftButton == MouseButtonState.Pressed) && this.dragShade.IsMouseCaptured)
    {
        Point point = base.ToPlot(e.GetPosition(this));
        PlotPanel.SetCenterX(this.dragShade, point.X - this.offsetVector.X);
        PlotPanel.SetCenterY(this.dragShade, point.Y - this.offsetVector.Y);
    }
}

private void CreateDragShade(NodeUI nodeUI)
{
    VisualBrush brush = new VisualBrush();
    brush.Stretch = Stretch.Fill;
    brush.Visual = nodeUI;
    brush.Opacity = 0.6;
    this.dragShade.Width = nodeUI.ActualWidth;
    this.dragShade.Height = nodeUI.ActualHeight;
    this.dragShade.Stroke = Brushes.Transparent;
    this.dragShade.Fill = brush;
    this.dragShade.Stretch = Stretch.Fill;
    PlotPanel.SetCenterX(this.dragShade, nodeUI.CenterX);
    PlotPanel.SetCenterY(this.dragShade, nodeUI.CenterY);
    this.dragShade.Visibility = Visibility.Visible;
    base.Children.Add(this.dragShade);
}

分享到：

上一篇：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",该文件的源码如下

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