Silverlight ListBox控件中的拖放功能实现

在Silverlight中,ListBox控件默认并不支持拖放功能,因此实现这一功能需要编写大量的代码。但是,通过使用Silverlight 4 Toolkit,可以很容易地实现这一功能。可以从CodePlex Silverlight Toolkit网站下载Silverlight 4 Toolkit。

Silverlight4 Toolkit提供了一个名为ListBoxDragDropTarget的控件,它具有在ListBox控件内进行拖放操作的功能。让开始创建一个包含两个ListBox控件的示例应用程序,并为其中一个填充一些虚拟数据。将能够在同一个ListBox控件内拖动ListBox元素,并且能够将其放置到第二个ListBox控件中。

创建示例应用程序

首先,创建一个名为"Silverlight4.DragDropListBox"的Silverlight应用程序。

接下来,右键单击Silverlight项目,然后点击"添加引用"。从"添加引用"对话框中,将Silverlight Toolkit程序集引用添加到项目中。添加完程序集引用后,可以在应用程序的任何地方使用它。

现在打开MainPage.xaml,并在其中添加Toolkit DLL引用,以便可以在页面中使用工具包控件。添加后,它将如下所示:

<UserControl x:Class="Silverlight4.DragDropListBox.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:toolKit="clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Toolkit"> </UserControl>

上面的代码中提到的行是Silverlight Toolkit的引用。使用“toolkit”作为前缀,这样就可以在整个应用程序中使用“toolkit:”关键字来引用Silverlight工具包。

让在Grid中添加ListBoxDragDropTarget。将属性“AllowDrop”设置为True。设置为true后,它将能够在控件内捕获放置事件。

<toolKit:ListBoxDragDropTarget AllowDrop="True"> </toolKit:ListBoxDragDropTarget>

现在将在刚刚添加到XAML页面中的ListBoxDragDropTarget内部添加一个ListBox。设置适当的Height和Width属性。同时,将设置DisplayMemberPath="Name"。这是因为,将获取一些虚拟的Person信息,并将ListBox的ItemSource设置为这些数据,其中Person有一个名为"Name"的属性。人的名字将在这里的下拉列表中可见。

<toolKit:ListBoxDragDropTarget AllowDrop="True"> <ListBox x:Name="customerListBoxMain" Height="200" Width="200" DisplayMemberPath="Name"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Vertical" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> </toolKit:ListBoxDragDropTarget>

让创建另一个被ListBoxDragDropTarget包围的ListBox控件。这里,也将设置前面提到的相同属性。

<toolKit:ListBoxDragDropTarget AllowDrop="True"> <ListBox Height="200" Width="200" DisplayMemberPath="Name"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Vertical" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> </toolKit:ListBoxDragDropTarget>

一旦完成了XAML视图的创建,就可以继续获取一些数据并将其设置为第一个ListBox的Source。以下是示例代码:

public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); customerListBoxMain.ItemsSource = PersonDataProvider.GetData(); } }

在两个ListBox之间进行拖放

一旦设计和编码完成,就可以运行Silverlight应用程序来展示工作。按F5在浏览器中运行应用程序。加载完成后,将看到屏幕上有两个Listbox控件。一个包含一些虚拟数据,另一个是空的。

现在,将从第一个listbox中拖动一个元素到外面。将看到鼠标光标变成了“不可用”图标。一旦释放鼠标,将注意到项目并没有在特定点被放置。为什么?因为只将两个Listbox控件标记为DropTarget。

现在再次从第一个listbox开始拖动操作,这次将把它拖到第二个listbox控件内。发生了什么?鼠标光标现在有一个小箭头。这表明项目可以在这里放置。

释放鼠标光标,将看到元素已经从第一个listbox中移除,并添加到第二个listbox中。

在同一个ListBox内进行拖放

这里将看到在同一个ListBox控件内的拖放操作。开始拖动任何元素并在同一个ListBox控件内向上或向下移动。将看到,光标已经变成了放置图标,即光标附近的箭头。此外,它将在ListBox内显示一条线。这是拖放操作将要发生的地方。

释放鼠标,将看到项目已经被移动到新的位置。

如果列表太大,想要将元素重新定位到列表中的特定位置,只需拖动到末尾。将看到滚动条已经开始自动滚动操作。

这在想在treeview或listbox控件之间进行拖放操作时非常有用。也会在最终用户重新排列项目列表时发现它很有用。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485