我正在尝试创建一个WPF应用程序,我可以在其中拖动图像。
目前我在窗口中央放置了一个图像,我正在考虑使用鼠标左键鼠标,MouseMove和MouseUp来拖动图像时计算新位置。
关于如何做到这一点还有其他好的想法吗?我是WPF的新手,所以我的思维方式仍然在Windows窗体世界中。
据我所知,我需要使用 为了获得绝对定位。
答案 0 :(得分:32)
好的,这是一个附加属性“行为”,你可以使用它来使任何元素可拖动,只要它在画布上:
public class DraggableExtender : DependencyObject
{
// This is the dependency property we're exposing - we'll
// access this as DraggableExtender.CanDrag="true"/"false"
public static readonly DependencyProperty CanDragProperty =
DependencyProperty.RegisterAttached("CanDrag",
typeof(bool),
typeof(DraggableExtender),
new UIPropertyMetadata(false, OnChangeCanDragProperty));
// The expected static setter
public static void SetCanDrag(UIElement element, bool o)
{
element.SetValue(CanDragProperty, o);
}
// the expected static getter
public static bool GetCanDrag(UIElement element)
{
return (bool) element.GetValue(CanDragProperty);
}
// This is triggered when the CanDrag property is set. We'll
// simply check the element is a UI element and that it is
// within a canvas. If it is, we'll hook into the mouse events
private static void OnChangeCanDragProperty(DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
UIElement element = d as UIElement;
if (element == null) return;
if (e.NewValue != e.OldValue)
{
if ((bool)e.NewValue)
{
element.PreviewMouseDown += element_PreviewMouseDown;
element.PreviewMouseUp += element_PreviewMouseUp;
element.PreviewMouseMove += element_PreviewMouseMove;
}
else
{
element.PreviewMouseDown -= element_PreviewMouseDown;
element.PreviewMouseUp -= element_PreviewMouseUp;
element.PreviewMouseMove -= element_PreviewMouseMove;
}
}
}
// Determine if we're presently dragging
private static bool _isDragging = false;
// The offset from the top, left of the item being dragged
// and the original mouse down
private static Point _offset;
// This is triggered when the mouse button is pressed
// on the element being hooked
static void element_PreviewMouseDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
// Ensure it's a framework element as we'll need to
// get access to the visual tree
FrameworkElement element = sender as FrameworkElement;
if (element == null) return;
// start dragging and get the offset of the mouse
// relative to the element
_isDragging = true;
_offset = e.GetPosition(element);
}
// This is triggered when the mouse is moved over the element
private static void element_PreviewMouseMove(object sender,
MouseEventArgs e)
{
// If we're not dragging, don't bother - also validate the element
if (!_isDragging) return;
FrameworkElement element = sender as FrameworkElement;
if (element == null) return;
Canvas canvas = element.Parent as Canvas;
if( canvas == null ) return;
// Get the position of the mouse relative to the canvas
Point mousePoint = e.GetPosition(canvas);
// Offset the mouse position by the original offset position
mousePoint.Offset(-_offset.X, -_offset.Y);
// Move the element on the canvas
element.SetValue(Canvas.LeftProperty, mousePoint.X);
element.SetValue(Canvas.TopProperty, mousePoint.Y);
}
// this is triggered when the mouse is released
private static void element_PreviewMouseUp(object sender,
MouseButtonEventArgs e)
{
_isDragging = false;
}
}
然后,您可以通过导入包含类的命名空间在您的XAML中使用它(如下所示:)
<Window x:Class="WPFFunWithDragging.Window1"
xmlns:local="clr-namespace:WPFFunWithDragging" .. >
然后你可以在元素上设置DraggableExtender.CanDrag =“true”来拖动:
<Canvas>
<Image Source="Garden.jpg"
Width="50"
Canvas.Left="10" Canvas.Top="10"
local:DraggableExtender.CanDrag="true"/>
</Canvas>
希望这有一些用处:)
答案 1 :(得分:0)
deepcode.co.uk提供的解决方案可以;但是,在实施时我错过了一些功能,因此我正在扩展他的解决方案。
当画布中有2个或更多元素时,还必须设置:
private void Element_PreviewMouseDown(object sender, MouseEventArgs e)
{
element.CaptureMouse();
}
private void Element_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
element.ReleaseMouseCapture();
}
以便拖动动作仅影响当前活动的元素。
在拖动时,人们可能也不希望元素超出画布的边界:
if (mousePoint.X > 0 && mousePoint.X + element.ActualWidth <= canvas.ActualWidth &&
mousePoint.Y > 0 && mousePoint.Y + element.ActualHeight <= canvas.ActualHeight)
{
element.SetValue(Canvas.LeftProperty, mousePoint.X);
element.SetValue(Canvas.TopProperty, mousePoint.Y);
}
如果您希望活动元素始终出现在顶部:
private void Element_PreviewMouseDown(object sender, MouseEventArgs e)
{
Panel.SetZIndex(element, 1);
}
private void Element_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
Panel.SetZIndex(element, 0);
}