下拉列表 XAML Silverlight 设计/图形初学者 C# 3.5 C# 3.0 中级开发 Visual Studio C#

如何在 Silverlight 4 工具包中实现 ListBox 之间的拖放？

<b>Kunal Chowdhury «IN»</b>

4.93/5 (11投票s)

2010年5月13日

CPOL

4分钟阅读

166696

1969

在本文中，我将向您展示如何使用 Silverlight 4 Toolkit 创建一个拖放 ListBox。在这里，您将学习如何在两个 ListBox 之间以及在同一个 ListBox 内进行拖放。

引言

在本文中，我将讨论 Silverlight ListBox 控件内的拖放功能。本文还将涵盖两个 ListBox 控件之间的拖放操作。在这里，我们将使用 Silverlight 4 Toolkit 来实现此功能。

背景

Silverlight ListBox 默认不包含拖放功能。因此，实现该功能曾是一个大问题。我们不得不为该功能编写大量的代码。但是，使用 Silverlight Toolkit，您可以非常轻松地完成此操作。您可以从 CodePlex Silverlight Toolkit 站点 下载 Silverlight 4 Toolkit。

Using the Code

Silverlight 4 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 Toolkit。

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

让我们将 ListBoxDragDropTarget 添加到 Grid 中。将“AllowDrop”属性设置为 True。设置为 true 后，它就能捕获控件内的拖放事件。

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

现在，我们将在刚刚添加到 XAML 页面的 ListBoxDragDropTarget 中添加一个 ListBox 。设置 ListBox 控件的正确高度和宽度。此外，我们将设置 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();
    }
}