前天整理一份Silverlight 4中拖拽效果实现-附源码下载 在评论中一位园友提到实现不同控件间拖拽效果设想. 其实在项目中原本我遇到最初拖拽实现就是一个从TreeVIEw中拖拽到一个ListBox中.中午正好看了Silverlight.net BBS和CrraySun.com上讨论.做了一个简单Demo实现.先看看效果:
左边ListBox,右边TreevIEw.实现步骤如下
A:页面布局:
<GrID x:name="LayoutRoot" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center"> <GrID.RowDeFinitions> <RowDeFinition Height="40"></RowDeFinition> <RowDeFinition Height="350"></RowDeFinition> <RowDeFinition Height="10*" /> </GrID.RowDeFinitions> <GrID.ColumnDeFinitions> <ColumnDeFinition WIDth="300"></ColumnDeFinition> <ColumnDeFinition WIDth="300"></ColumnDeFinition> <ColumnDeFinition WIDth="200*" /> </GrID.ColumnDeFinitions> <TextBlock Text="Drag ListBox to TreevIEw" Foreground="Red" FontFamily="Comic Sans MS" FontSize="16" GrID.ColumnSpan="2" margin="85,12,162,0"></TextBlock> <!--左边一个ListBox--> <toolKit:ListBoxDragDropTarget AllowDrop="True" GrID.Row="1" GrID.Column="0" > <ListBox x:name="customerListBoxMain" Height="240" WIDth="215" SelectionMode="Extended" displayMemberPath="Customername" borderBrush="Black" borderThickness="1"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel OrIEntation="Vertical"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> </toolKit:ListBoxDragDropTarget> <!--右边一个TreevIEw--> <toolKit:TreeVIEwDragDropTarget AllowDrop="True" GrID.Row="1" GrID.Column="1" borderThickness="1" borderBrush="Red"> <!--定义一个数据模板--> <toolKit:TreeVIEwDragDropTarget.Resources> <my:HIErarchicalDataTemplate x:name="datetmp" ItemsSource="{Binding Customer}"> <TextBlock Text="{Binding Customername}"/> </my:HIErarchicalDataTemplate> </toolKit:TreeVIEwDragDropTarget.Resources> <sdk:TreeVIEw x:name="AcceptTreevIEw" Height="240" WIDth="215" ItemTemplate="{StaticResource datetmp}"> </sdk:TreeVIEw> </toolKit:TreeVIEwDragDropTarget> </GrID>
同上篇不同在TreeVIEw中使用到了HIErarchicalDataTemplate数据模板来定义TreevIEw数据显示. HIErarchicalDataTemplate 数据模板默认是不添加的,所以需要在页面添加引用如下:
xmlns:my="clr-namespace:System.windows;assembly=System.windows.Controls" 至于HIErarchicalDataTemplate如何使用请参见MSDN.
B:数据绑定-后台代码
同样为了演示方便 直接写了一个类用来ListBox和TreevIEw中提供所需数据.
/// <summary> /// 为了达到演示目的 当前类提供List数据 /// Author:chenkai Date:2010年5月28日10:21:36 /// </summary> public class ProvIDeDate { public static List<Customer> GetAllCustomerList() { List<Customer> getcusList = new List<Customer>(); getcusList.Add(new Customer { Customername="JackChen" }); getcusList.Add(new Customer { Customername = "Arrmy" }); getcusList.Add(new Customer { Customername = "SunSkyUnion" }); getcusList.Add(new Customer { Customername = "西藏拉萨" }); getcusList.Add(new Customer { Customername = "甘肃玉门关" }); return getcusList; } public static List<Customer> GetAllCustomerTreeList() { List<Customer> getcusList = new List<Customer>(); getcusList.Add(new Customer { Customername = "markChen" }); getcusList.Add(new Customer { Customername = "KaIDun" }); getcusList.Add(new Customer { Customername = "GuIDeinformation" }); getcusList.Add(new Customer { Customername = "三门峡函谷关" }); getcusList.Add(new Customer { Customername = "嘉峪关" }); getcusList.Add(new Customer { Customername = "泰山" }); getcusList.Add(new Customer { Customername = "嵩山" }); return getcusList; } } public class Customer { public string Customername { get; set; } }
页面数据绑定:
//绑定ListBox数据 List<Customer> getcusList = TestSilverlightOutOfbrowerDemo.Date.ProvIDeDate.GetAllCustomerList(); if (getcusList != null) { ObservableCollection<Customer> getList = new ObservableCollection<Customer>(); foreach (Customer getcus in getcusList) { getList.Add(getcus); } this.customerListBoxMain.ItemsSource = getList; } //绑定TreevIEw数据 List<Customer> gettreevIEwList=TestSilverlightOutOfbrowerDemo.Date.ProvIDeDate.GetAllCustomerTreeList(); ObservableCollection<Customer> getvIEwList = new ObservableCollection<Customer>(); foreach (Customer getcustree in gettreevIEwList) { getvIEwList.Add(getcustree); } this.AcceptTreevIEw.ItemsSource = getvIEwList;
因为使用ObservableCollection一个动态数据集合,需要在添加一个空间引用:
using System.Collections.ObjectModel; ObservableCollection动态数据集合,这次数据通过绑定来实现.动态数据集合，在添加项、移除项或刷新整个列表时，此集合将提供通知 具体参见:MSDN
如上即简单实现了一个ListBox向一个TreeVIEw中拖拽实现,其实我当初在实现这问题,参考大量资料. 我想说一下个人对这个拖拽实现思路理解.首先我想说的是在整个拖拽过程事件执行过程,
注意:虽然实现了TreevIEw在ListBox之间拖拽,但真正拖拽事件发生是在TreeVIEwDragDropTarget和ListBoxDragDropTarget控件中. 不要误认为是ListBox或TreevIEw本身.
(1)先看看TreeVIEwDragDropTarget关于Drag事件.
分别为Drop,DragOver,DragLeave,dragenter. 这三个真正执行顺序如下:
执行场景：当把一个ListBox一个项拖拽到TreevIEw时 从dragenter开始执行到DragOver. 其实上面实现完全是利用数据模板和DragDropTraget控件便利. 来整理一下在Sl3.0中实现一个拖拽需要具体步骤拆分:
A:实现一个拖动图像，作为开始拖拽时的快照
B:找到程序的root visual根视觉(如StackPanel)
C:将拖动图像添加到根视觉，并得到它的绝对坐标[动态坐标数据-难点]
D:在运动时保持鼠标与拖动图像同步，随时给出是否在落下目标（drop target）上的视觉反馈 [需要动画效果]
E:处理用户释放鼠标时刻，当经过落下目标时可以适当地动作，甚至可以显示一段不错的动画
如此就在Silverlight 3.0拖拽效果.当然在4.0加以封装来实现.如何来获得拖拽实时数据 和SL3.0有点不同.
(2)获得拖拽实时数据
其实拖拽时ListBox中数据都放在ItemContainer数据容器中,当拖拽一项时既是反映到ItemContainer中就是Remove删除一项,反而言之 接受一方TreevIEw中数据容器这是Add添加一个新项. 这就给我们提供一个监听拖拽数据机会.我们可以在ListBox中ItemContainerGenerator.ItemsChanged定义一个监听事件. 来获取当前拖拽项.
//附属一个监听事件 ItemsChanged 事件由 IItemContainerGenerator 引发，以通知布局项集合已更改 this.AcceptTreevIEw.ItemContainerGenerator.ItemsChanged += new System.windows.Controls.Primitives.ItemsChangedEventHandler(ItemContainerGenerator_ItemsChanged);
事件实现:
voID ItemContainerGenerator_ItemsChanged(object sender, System.windows.Controls.Primitives.ItemsChangedEventArgs e) { if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add) { //e.position获取集合中更改发生的位置 int index = (e.position.Index + e.position.Offset); MessageBox.Show("total:" + this.AcceptTreevIEw.Items.Count.ToString() + "Index：" + index.ToString()); object obj = this.AcceptTreevIEw.Items[index]; if (obj != null) { TreeVIEwItem getitem = obj as TreeVIEwItem; MessageBox.Show(getitem.header.ToString()); ListBoxItem getBoxitem = obj as ListBoxItem; MessageBox.Show(getBoxitem.Content.ToString()); } } }
通过附属的ItemsChangedEventArgs 附带事件信息. 来判断当前对数据容器ItemContainer *** 作类型,System.Collections.Specialized.NotifyCollectionChangedAction是一个 *** 作枚举. 包含None Add REmove. 判断拖拽状态后即可通过E.position来获取数据项发生的位置. 集合通过装换获得具体拖拽项.当然也可定义其他 *** 作.
总结以上是内存溢出为你收集整理的Silverlight4不同控件间拖拽实现-附源码下载全部内容，希望文章能够帮你解决Silverlight4不同控件间拖拽实现-附源码下载所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）