在WPF中通过DataTemple实现Drag&Drop控件

WPF中提供一套十分简便的实现Drag&Drop的机制，方便了开发人员定制自己的Drag&Drop行为。

但是WPF中提供的Drag&Drop是基于数据传递的，通过Drag把你希望传递的数据放入DataObject对象里, 调用DragDrop.DoDragDrop（）， 在Drop事件Hander里就可以获取到你刚才传入的数据，在使对这些数据做处理就完成了整个Drag&Drop行为。

 

实际中经常用到拖拽控件本身，这在WPF中怎么实现呢？笔者想到可以利用WPF中的DataTemple， DataTemple定义了用来展现数据的界面模板，你可以想象即使在界面层，你操作控制的也是一堆数据，这些数据的展现交给DataTemplate来做。那还等什么，利用它来实现Drag&Drop控件吧。

下面是我的一个Sample， 供大家参考：

 

1.首先定义PresenterDataForButton和PresenterDataForTextBox 分别代表 Button 和TextBox控件的Data类型：

 1    public interface ITragable
 2     { 
 3     }
 4     public class PresenterDataForButton :ITragable
 5     {
 6         public string Content
 7         {
 8             get;
 9             set;
10         }
11 
12         public RoutedEventHandler ButtonClickHandler;
13 
14     }
15 
16     public class PresenterDataForTextBox : ITragable
17     {
18         public string Text
19         {
20             get;
21             set;
22         }
23     }

 

2. 利用DataTemple使数据分别展现成Button和TextBox控件，注意本例中DataTemple的定义是放在Window的Resouce中，并且是使用的是DataType，这样整个window中的PresenterDataForButton和PresenterDataForTextBox 都会被展现成相应的控件：

 1 <Window x:Class="MyDragAndDrop.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:local="clr-namespace:MyDragAndDrop"
 5         Title="MainWindow" Height="350" Width="525">
 6     <Window.Resources>
 7         
 8         <DataTemplate DataType="{x:Type local:PresenterDataForButton}">
 9             <Button Content="{Binding Path=Content}"/>
10         </DataTemplate>
11         <DataTemplate DataType="{x:Type local:PresenterDataForTextBox}">
12             <TextBox Text="{Binding Path=Text}"/>
13         </DataTemplate>
14         
15     </Window.Resources>
16         <DockPanel >
17         <ListView  x:Name="listView" DockPanel.Dock="Left"
18                    PreviewMouseLeftButtonDown="listView_PreviewMouseLeftButtonDown" 
19                    PreviewMouseMove="listView_PreviewMouseMove"/>
20         <Canvas Drop="ContentControl_Drop" DockPanel.Dock="Right" 
21                         AllowDrop="True" Background="LightBlue"
22                         DragEnter="ContentControl_DragEnter" Height="260" Width="272">
23             <StackPanel x:Name="myStackPanel"/>
24 
25             </Canvas>
26     </DockPanel>
27 
28 </Window>

3. 最后通过Drag&Drop你的数据，达到拖拽控件的效果。

 

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Text;
  5 using System.Windows;
  6 using System.Windows.Controls;
  7 using System.Windows.Data;
  8 using System.Windows.Documents;
  9 using System.Windows.Input;
 10 using System.Windows.Media;
 11 using System.Windows.Media.Imaging;
 12 using System.Windows.Navigation;
 13 using System.Windows.Shapes;
 14 
 15 namespace MyDragAndDrop
 16 {
 17     /// <summary>
 18     /// Interaction logic for MainWindow.xaml
 19     /// </summary>
 20     public partial class MainWindow : Window
 21     {
 22         private Point m_startPoint;
 23         
 24         public MainWindow()
 25         {
 26             InitializeComponent();
 27             this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
 28         }
 29 
 30 
 31         private void MainWindow_Loaded(object sender, RoutedEventArgs e)
 32         {
 33 
 34             this.listView.Items.Add(new PresenterDataForButton
 35             {
 36                 Content = "Click Me",
 37                 ButtonClickHandler = (object sender1, RoutedEventArgs e1) =>
 38                 {
 39                     MessageBox.Show("Clicked");
 40                 }
 41             });
 42 
 43             this.listView.Items.Add(new PresenterDataForTextBox { Text = "It is a TextBox." });
 44 
 45         }
 46 
 47         private void listView_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 48         {
 49               m_startPoint = e.GetPosition(null);
 50 
 51         }
 52 
 53         private void listView_PreviewMouseMove(object sender, MouseEventArgs e)
 54         {
 55             // Get the current mouse position
 56             Point mousePos = e.GetPosition(null);
 57             Vector diff = m_startPoint - mousePos;
 58 
 59             if (e.LeftButton == MouseButtonState.Pressed &&
 60                 Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
 61                 Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance)
 62             {
 63                 // Get the dragged ListViewItem
 64                 ListView listView = sender as ListView;
 65                 if (null != listView)
 66                 {
 67 
 68                     ListViewItem listViewItem =
 69                         FindAnchestor<ListViewItem>((DependencyObject)e.OriginalSource);
 70 
 71                     if (null != listViewItem)
 72                     {
 73 
 74                         // Find the data behind the ListViewItem
 75                         object dragedObject = listView.ItemContainerGenerator.
 76                            ItemFromContainer(listViewItem);
 77 
 78                         // Initialize the drag & drop operation
 79                         DataObject dragData = new DataObject("myFormat", dragedObject);
 80                         DragDrop.DoDragDrop(listViewItem, dragData, DragDropEffects.Move);
 81                     }
 82                 }
 83             } 
 84 
 85         }
 86 
 87 
 88         // Helper to search up the VisualTree
 89         private static T FindAnchestor<T>(DependencyObject current)
 90             where T : DependencyObject
 91         {
 92             do
 93             {
 94                 if (current is T)
 95                 {
 96                     return (T)current;
 97                 }
 98                 current = VisualTreeHelper.GetParent(current);
 99             }
100             while (current != null);
101             return null;
102         }
103 
104         private void ContentControl_Drop(object sender, DragEventArgs e)
105         {
106             if (e.Data.GetDataPresent("myFormat"))
107             {
108                 ITragable dragedObject = e.Data.GetData("myFormat") as ITragable;
109                 if(null!=dragedObject)
110                 {
111                     Canvas canvas = sender as Canvas;
112                     var content = new ContentControl();
113                     content.Content = dragedObject;
114                     myStackPanel.Children.Add(content);                                       
115                 }
116             }
117 
118         }
119 
120         private void ContentControl_DragEnter(object sender, DragEventArgs e)
121         {
122             if (!e.Data.GetDataPresent(typeof(ITragable)) ||
123                 sender == e.Source)
124             {
125                 e.Effects = DragDropEffects.None;
126             }
127 
128 
129         }
130 
131 
132 
133     }
134 }