在 WPF 應用程式中，拖放操作是實現使用者互動的重要組成部分。透過拖放操作，使用者可以輕鬆地將資料從一個位置移動到另一個位置，或者將控制元件從一個容器移動到另一個容器。然而，WPF 中預設的拖放操作可能並不是那麼好用。為了解決這個問題，我們可以自定義一個 Panel 來實現更簡單的拖拽操作。
自定義 Panel 的優點有很多。首先，我們可以根據自己的需求來設計 Panel 的外觀和行為。其次，我們可以使用程式碼來控制拖放操作的細節，比如拖放的開始和結束位置、拖放過程中控制元件的顯示方式等等。最後，我們可以將自定義 Panel 作為一個控制元件，方便地應用到不同的應用程式中。
在本教程中，我們將一步一步地建立一個自定義 Panel 來實現更簡單的拖拽操作。我們將學習如何定義 Panel 的佈局、如何處理拖放事件，以及如何將自定義 Panel 應用到不同的應用程式中。按照本教程的步驟操作，您將能夠建立一個功能強大且易於使用的自定義 Panel，從而使您的 WPF 應用程式更加友好和易用。
1.定義一個繼承自Panel的類。
public class DragStackPanel : Panel { /// <summary> /// 獲取或設定方向 /// </summary> public Orientation Orientation { get { return (Orientation)GetValue(OrientationProperty); } set { SetValue(OrientationProperty, value); } } public static readonly DependencyProperty OrientationProperty = DependencyProperty.Register("Orientation", typeof(Orientation), typeof(DragStackPanel), new PropertyMetadata(Orientation.Vertical)); }
2.重寫Panel類的MeasureOverride方法測量控制元件Size。
public class DragStackPanel : Panel { protected override Size MeasureOverride(Size availableSize) { var panelDesiredSize = new Size(); foreach (UIElement child in InternalChildren) { child.Measure(availableSize); if (this.Orientation == Orientation.Horizontal) { panelDesiredSize.Width += child.DesiredSize.Width; panelDesiredSize.Height = double.IsInfinity(availableSize.Height) ? child.DesiredSize.Height : availableSize.Height; } else { panelDesiredSize.Width = double.IsInfinity(availableSize.Width) ? child.DesiredSize.Width : availableSize.Width; panelDesiredSize.Height += child.DesiredSize.Height; } } return panelDesiredSize; } }
3.重寫Panel類的ArrangeOverride方法排列控制元件位置。
public class DragStackPanel : Panel { protected override Size ArrangeOverride(Size finalSize) { double x = 0, y = 0; foreach (FrameworkElement child in InternalChildren) { // 座標 var position = new Point(x, y); // 寬度 var width = child.DesiredSize.Width; // 高度 var height = child.DesiredSize.Height; // 透過排列方向計算寬度和高度 if (this.Orientation == Orientation.Vertical) { width = finalSize.Width; } else { height = finalSize.Height; } // 尺寸 var size = new Size(width, height); // 排列位置及尺寸 child.Arrange(new Rect(position, size)); // 計算位置 if (this.Orientation == Orientation.Horizontal) { x += child.DesiredSize.Width; } else { y += child.DesiredSize.Height; } } return finalSize; } }
檢視執行效果
<UniformGrid Rows="2"> <local:DragStackPanel Orientation="Horizontal"> <Button>test1</Button> <Button>test2</Button> </local:DragStackPanel> <local:DragStackPanel Orientation="Vertical"> <Button>test3</Button> <Button>test4</Button> </local:DragStackPanel> </UniformGrid>
4.重寫PreviewMouseLeftButtonDown方法。
該方法在按下滑鼠左鍵時觸發，我們需要在該方法中獲取第一次按下滑鼠的座標，並且透過命中測試找到我們要拖拽的控制元件，最後還要在裝飾層中新增一個元素，該元素的背景用原控制元件的外觀來填充（VisualBrush），這樣就可以覆蓋原來的控制元件，以便在拖拽控制元件時能跨越控制元件的邊界。以下為參考程式碼：
public class DragStackPanel : Panel { private FrameworkElement draggingElement; private Point mouseRelativePosition; private int draggingElementzIndex; protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e) { // 獲取滑鼠相對於Panel的座標 var mousePosition = e.GetPosition(this); // 透過命中測試獲取當前滑鼠位置下的元素 var hitTestResult = this.InputHitTest(mousePosition) as FrameworkElement; // 透過命中測試結果找到當前拖拽的控制元件子項 draggingElement = FindChild(hitTestResult); if (draggingElement != null && this.InternalChildren.Contains(draggingElement)) { // 記錄滑鼠相對位置，以供後續使用 mouseRelativePosition = e.GetPosition(draggingElement); // 暫存ZIndex draggingElementzIndex = Panel.GetZIndex(draggingElement); // 將ZIndex置頂 Panel.SetZIndex(draggingElement, this.InternalChildren.Count); // 新增遮罩，防止拖拽時覆蓋 AddOverlay(draggingElement); e.Handled = true; } base.OnPreviewMouseLeftButtonDown(e); } }
5.重寫PreviewMouseMove方法。
該方法在滑鼠移動時觸發，我們需要在滑鼠被按下移動時，根據當前的座標與第一次按下的座標實時計算出被拖拽元素的偏移量，這樣該元素就能跟隨滑鼠移動，實現拖拽效果。以下為參考程式碼：
public class DragStackPanel : Panel { private FrameworkElement draggingElement; private Point mouseRelativePosition; private int draggingElementzIndex; protected override void OnPreviewMouseMove(MouseEventArgs e) { var mousePosition = e.GetPosition(this); if (e.LeftButton == MouseButtonState.Pressed && draggingElement != null) { // 當前拖拽控制元件置為不可滑鼠命中，以供命中下一層的換位控制元件 draggingElement.IsHitTestVisible = false; // 判斷當前拖拽的控制元件是否為頂層控制元件 if (Panel.GetZIndex(draggingElement) == this.InternalChildren.Count) { // 計算出當前拖拽控制元件相對於this的位置（控制元件左上角） var targetPosition = new Point(mousePosition.X - mouseRelativePosition.X - draggingElement.Margin.Left, mousePosition.Y - mouseRelativePosition.Y - draggingElement.Margin.Top); // 獲取當前拖拽控制元件在this中的原始位置 var draggingElementOriginalPosition = GetDraggingElementOriginalPosition(draggingElement); // 計算拖拽控制元件移動時的偏移量 var offset = new Point(targetPosition.X - draggingElementOriginalPosition.X, targetPosition.Y - draggingElementOriginalPosition.Y); // 應用位移 draggingElement.RenderTransform = new TranslateTransform(offset.X, offset.Y); } e.Handled = true; } base.OnPreviewMouseMove(e); } }
6.重寫PreviewMouseLeftButtonUp方法。
該方法在滑鼠左健抬起時觸發，我們需要在該方法中將一些引數重置。
public class DragStackPanel : Panel { private FrameworkElement draggingElement; private Point mouseRelativePosition; private int draggingElementzIndex; protected override void OnPreviewMouseLeftButtonUp(MouseButtonEventArgs e) { mouseRelativePosition = default; RemoveOverlay(draggingElement); Panel.SetZIndex(draggingElement, draggingElementzIndex); draggingElement.IsHitTestVisible = true; draggingElement.RenderTransform = null; draggingElement = null; e.Handled = true; base.OnPreviewMouseLeftButtonUp(e); } }
以下為執行效果：
7.處理控制元件的拖拽換位。
拖拽換位的思路就是將當前正在拖拽的元素放置到新的Index中，並把該Index後面的所有元素整體後移一位。該功能在PreviewMouseMove方法中實現。
public class DragStackPanel : Panel { private FrameworkElement draggingElement; private FrameworkElement hitElement; private Point mouseRelativePosition; private int draggingElementzIndex; protected override void OnPreviewMouseMove(MouseButtonEventArgs e) { ... // 命中當前拖拽控制元件的下一層控制元件 var hitTestResult = this.InputHitTest(mousePosition) as FrameworkElement; // 查詢被命中的下一層換位控制元件 hitElement = FindChild(hitTestResult); // 判斷是否有效 if (hitElement != null && this.InternalChildren.Contains(hitElement)) { // 應用換位 MoveChild(draggingElement, hitElement); } } private void MoveChild(FrameworkElement element1, FrameworkElement element2) { var index1 = this.InternalChildren.IndexOf(element1); var index2 = this.InternalChildren.IndexOf(element2); if (index1 >= 0 && index2 >= 0) { this.InternalChildren.RemoveAt(index1); this.InternalChildren.Insert(index2, element1); } } }
在ArrangeOverride方法中處理重新排列時當前拖拽元素的座標。
public class DragStackPanel : Panel { private FrameworkElement draggingElement; private FrameworkElement hitElement; private Point mouseRelativePosition; private int draggingElementzIndex; protected override Size ArrangeOverride(Size finalSize) { double x = 0, y = 0; foreach (FrameworkElement child in InternalChildren) { ... // 獲取當前正在拖拽元素的位置座標 var dragElementPosition = GetDraggingElementMovingPosition(child); if (dragElementPosition != default) { // 處理拖拽元素座標 var offset = new Point(dragElementPosition.X - position.X, dragElementPosition.Y - position.Y); child.RenderTransform = new TranslateTransform(offset.X, offset.Y); SetDraggingElementMovingPosition(child, dragElementPosition); } ... } return finalSize; } }
執行效果
8.處理跨Panel拖拽。
到目前為止已經實現了本Panel內的控制元件隨意拖拽換位，處理從A控制元件拖到B控制元件也類似，這裡需要用到一個靜態變數來儲存正在拖拽的控制元件，當B控制元件檢測到滑鼠進入時，只需要在A控制元件移除正在拖拽的控制元件，在B控制元件新增正在拖拽的控制元件就可以實現了。以下為核心程式碼：
public class DragStackPanel : Panel { // 透過拖拽傳遞到下一個Panel的控制元件 private static FrameworkElement draggingTransferElement; private void Control_MouseEnter(object sender, MouseEventArgs e) { panel.Children.Remove(draggingTransferElement); panel.DraggingElement = null; Panel.SetZIndex(draggingTransferElement, this.InternalChildren.Count + 1); this.Children.Add(draggingTransferElement); this.AddOverlay(draggingTransferElement); } }
以下為執行效果：
9.在ListBox、ListView、DataGrid等ItemsControl中使用拖拽功能。
所有繼承自ItemsControl的控制元件，都有一個ItemsPanel屬性，該屬性可以指定一個Panel型別的控制元件來對ItemsControl進行排列。理論上只要將ItemsControl.ItemsPanel設定為我們自己開發的Panel控制元件就可以實現排列及拖拽功能，但是這裡直接使用的話並不會有效果。原因就是我們並沒有對資料繫結的情況下做處理。它的處理邏輯也與上面的類似，首先找到ItemsControl控制元件，透過對ItemsSource進行操作就可以實現排列功能，由於程式碼大同小異這裡就不再贅述。以下為ListBox控制元件拖拽的案例效果。
<ListBox ItemsSource="{Binding Items}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <DragStackPanel AllowCrossBorderDrag="True" CanDragAndSort="True" IsItemsHost="True"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Property1}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
10.新增動畫效果。
至此基本功能已經開發完成了，下面我們為它新增上動畫效果，讓它更具有觀賞性。動畫的核心思想就是記錄每個元素舊位置的座標，當元素移動到新位置時啟動一個動畫，從舊座標過渡到新座標，由於程式碼太過基礎，這裡就不展示了，直接上效果。
<DragStackPanel AllowCrossBorderDrag="True" CanDragAndSort="True" IsItemsHost="True"> <DragStackPanel.ChildMoveBehavior> <ChildMoveBehavior Duration="0:0:0.5"> <ChildMoveBehavior.EaseX> <QuinticEase EasingMode="EaseOut" /> </ChildMoveBehavior.EaseX> <ChildMoveBehavior.EaseY> <QuinticEase EasingMode="EaseOut" /> </ChildMoveBehavior.EaseY> </ChildMoveBehavior> </DragStackPanel.ChildMoveBehavior> </DragStackPanel>
技術交流群
聯絡方式
