Silverlight 4中拖拽效果实现附源码下载

Silverlight的版本不断更新.当然有些很不错的功能和属性添加进来并进一步得到完善. 例如拖拽. 在Silverlight 3.0版本以前是不直接支持拖拽效果. 同样在Ria运用中我也对比一个Flex实现拖拽方式, 其实就是利用一个DragManager类,这是一个像StartDrag静态方法的类，你只需要提供一个 UIComponent对象，DragManager就会创建一个微小的透明图像跟随鼠标，跟随鼠标的图像经过组件上时会很形像的表明是否允许接受拖拽对象. 实现拖拽效果.

在Silverlight 3.0中做过拖拽效果应该知道, 当你分析了Drag拖拽效果步骤. 在silverlight 3.0以前中实现的难点核心是如何保持生成的代理形象与鼠标进行同步. 而在4.0中大大增强了控件之间的拖拽行为.现在在Silverlight 4中, 针对所有的UIElement对象，增加了一个AllowDrop属性设置为True,我们甚至可以把实体档案拖曳到浏览器上正在执行的Silverlight应用程序中.相比3.0 足以激动人心. 转入正题Silverlight 4下拖拽效果实现.

实现效果: 从一个listbox某一个子项移动到另外一个listbox中.

A:在拖放控件之前添加一个Toolkit空间引用:

1 xmlns:toolKit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit">

B:拖入第一个ListBox.注意是包含在toolKit:ListBoxDragDropTarget控件中,并设置 AllowDrop="True"

1       <toolKit:ListBoxDragDropTarget AllowDrop="True">
2                 <ListBox x:Name="customerListBoxMain" Height="200" Width="200"
3                             DisplayMemberPath="Name">
4                     <ListBox.ItemsPanel>
5                         <ItemsPanelTemplate>
6                             <StackPanel Orientation="Vertical"/>
7                         </ItemsPanelTemplate>
8                     </ListBox.ItemsPanel>
9                 </ListBox>
10       </toolKit:ListBoxDragDropTarget>

其实在去年Silverlight 4.0还是Beta版本时. 这个AllowDrop并没有被直接作为ListBoxDragDropTarget属性来定义.silverlight 4.0 Beta版本实现AllowDrop是通过引用空间:

1 xmlns:mswindows="clr-namespace:Microsoft.Windows;assembly=System.Windows.Controls.Toolkit"

在定义toolKit:ListBoxDragDropTarget控件设置属性为mswindows下的DragDrop.AllowDrop="True".当然4.0正式版后不用这么做则直接通过在每个UIElement中设置Bool类型AllowDrop属性,更加简便

1 <toolkit:ListBoxDragDropTarget mswindows:DragDrop.AllowDrop="True">  </toolkit:ListBoxDragDropTarget>

C:拖入第二个接受ListBox基本可第一个雷同:

1  <toolKit:ListBoxDragDropTarget AllowDrop="True">
2                 <ListBox x:Name="AcceptListBox" Height="200" Width="200" DisplayMemberPath="Name">
3                     <ListBox.ItemsPanel>
4                         <ItemsPanelTemplate>
5                             <StackPanel Orientation="Vertical"/>
6                         </ItemsPanelTemplate>
7                     </ListBox.ItemsPanel>
8                 </ListBox>
9  </toolKit:ListBoxDragDropTarget>

D:绑定数据源.为了达到演示Drag效果的演示目的,定义一个Person类.类中只有一个属性Name.

1   public class Person
2     {
3         public string Name { get; set; }
4     }

通过在PersonDataProvider类中定义一个方法提供一个ObservableCollection<Person>集合数据.绑定到第一个[customerListBoxMain]ListBox中.

代码

1  public class PersonDataProvider
2     {
3         public static ObservableCollection<Person> GetData()
4         {
5             return new ObservableCollection<Person>
6                         {
7                             new Person { Name = "Akash Sharma" },
8                             new Person { Name = "Vinay Sen" },
9                             new Person { Name = "Lalit Narayan" },
10                             new Person { Name = "Madhumita Chatterjee" },
11                             new Person { Name = "Priyanka Patil" },
12                             new Person { Name = "Kumar Sanu" },
13                             new Person { Name = "Victor Kapoor" },
14                             new Person { Name = "Shymal Sen" },
15                             new Person { Name = "Alan D'Souza" },
16                             new Person { Name = "Kamal Saha" },
17                             new Person { Name = "Alex Chan" },
18                             new Person { Name = "Rohit Sharma" },
19                             new Person { Name = "Dipti Sen" },
20                             new Person { Name = "Dinesh Sharma" },
21                             new Person { Name = "Kamal Kapoor" },
22                             new Person { Name = "Raj Kapoor" },
23                             new Person { Name = "Deepa Karmakar" },
24                             new Person { Name = "Sarmishtha Chakrobarty" },
25                             new Person { Name = "Pranab Kumar Debnath" },
26                             new Person { Name = "Hiral Grover" },
27                             new Person { Name = "Munmun Patel" },
28                             new Person { Name = "Santosh Kumar Sen" },
29                             new Person { Name = "Sandeep Debnath" }
30                         };
31         }
32     }

MainPage后台中进行数据绑定:

1  public MainPage()
2    {
3        InitializeComponent();
4        customerListBoxMain.ItemsSource = PersonDataProvider.GetData();
6    }

绑定完成后.编译通过开始运行先看看效果.

ok.silverlight 4.0中实现拖拽如此简单.当使用了ListBoxDragDropTarget控件后

A:两个listBox之间可以相互拖放ListBoxItem项实现相互的拖拽效果

B:可以在一个Listbox中通过drag/drop行为对ListBox中的项目进行重新排列. [强悍吧]

注意:在操作B时.不过ListBoxDragDropTarget并不能作用于virtualized容器（ListBox的默认容器）,所以必须改变ListBox的ItemsPanelTemplate容器，比如说像这样加个StackPanel进去取代virtualized默认容器即可 .

当然更厉害的ListBoxDragDropTarget它支持任意的DataTemplate, 拖拽效果仍然成立.[这里不再演示]!!!

当然你也许会问.我想实现Treeview中类似的拖拽效果是否能够实现？. 答案是肯定因为除了ListBoxDragDropTarget控件还有如下控件也支持这种效果:

A: ListBoxDragDropTarget[已实现]

B: TreeViewDragDropTarget -[实现Treeview拖拽]

C: DataGridDragDropTarget-[DataGrid控件支持]

D: DataPointSeriesDragDropTarget-[尚未测试.]

至此Silverlight 4.0中实现拖拽效果实现如上. 如有疑问请在留言中回复, 转载请注明出去.

Silverlight 4.0拖拽效果源码下载:/Files/chenkai/Silverlight4DragDropListBoxDemo.zip