Dot-Net

在 WPF 中拖動圖像

  • December 30, 2019

我正在嘗試創建一個 WPF 應用程序,我可以在其中拖動圖像。

目前我有一個圖像放置在視窗的中心,我正在考慮使用三個滑鼠事件 MouseDown、MouseMove 和 MouseUp 來計算拖動圖像時的新位置。

關於如何做到這一點還有其他好主意嗎?我對 WPF 完全陌生,所以我的心態仍然在 Windows 窗體世界中。

據我所知,我需要使用 a 才能獲得絕對定位。

好的,這是一個附加屬性“行為”,您可以使用它來使任何元素可拖動,前提是它位於畫布上:

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>

希望這有點用:)

引用自:https://stackoverflow.com/questions/294220