Silverlight Toolkit ListBoxDragDropTarget学习笔记

 最近刚接触Silverlight，感觉学习Silverlight还是要先从控件学起。Silverlight Toolkit 是一个非常不错的控件集，里面具有很多很实用的东西，所以先学习些这些东西还是很有好处的。

 自己原来通过写鼠标的各种事件，实现鼠标拖动组件的功能，今天学了学Sliverlight Toolkit 工具，发现有DragDropTarge很好用的东西。废话不多说，直接上代码。

首先放上两个ListBox，利用ListBoxDragDropTarget实现拖拽效果。

这里需要注意的是，如果想要实现一个ListBox内部的重排序功能，就必须要定义一下ListBox.ItemPanel，否则将无法实现单独ListBox的reorder功能。

        <StackPanel Orientation="Horizontal" Margin="20,20,20,20">
            <toolkit:ListBoxDragDropTarget AllowDrop="True">
                <ListBox Width="100" Height="400" x:Name="FromBox" SelectionMode="Multiple">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel HorizontalAlignment="Center" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Image Source="{Binding HeadImage}" Height="30" Width="30" HorizontalAlignment="Center"/>
                                <TextBlock Width="60" Height="15" Text="{Binding Name}" HorizontalAlignment="Center"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </toolkit:ListBoxDragDropTarget>
            <toolkit:ListBoxDragDropTarget AllowDrop="True" >
                <ListBox Width="100" Height="400" x:Name="ToBox" Margin="50,0,0,0">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel HorizontalAlignment="Center" />
                        </ItemsPanelTemplate>               
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Image Source="{Binding HeadImage}" Height="30" Width="30" HorizontalAlignment="Center"/>
                                <TextBlock Width="60" Height="15" Text="{Binding Name}" HorizontalAlignment="Center"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </toolkit:ListBoxDragDropTarget>
        </StackPanel>

接下来写后台代码，这里预先定义一个Person类，作为数据源。在Person类里，定义name、age、headImage属性，别忘了ListBox可是内容控件哦。这里有一点需要大家注意，我们平常绑定数据，用List<>就可以，但是为了实现预期的效果，就必须要使用ObservableCollection<>类型，为什么？因为ObservableCollection表示一个动态数据集合，在添加项、移除项或刷新整个列表时，此集合将提供通知。 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.DataVisualization.Charting;
using System.Collections.ObjectModel;

namespace Demo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            //集合必须定义为ObservableCollection，因为ObservableCollection
            //表示一个动态数据集合，在添加项、移除项或刷新整个列表时，此集合将提供通知。
            ObservableCollection<Person> personList = new ObservableCollection<Person>();
            personList.Add(new Person {Name="张三" , Age=30 ,HeadImage="image/1.png"});
            personList.Add(new Person { Name = "李四", Age = 15, HeadImage = "image/2.png" });
            personList.Add(new Person { Name = "王五", Age = 20, HeadImage = "image/3.png" });
            ObservableCollection<Person> personList2 = new ObservableCollection<Person>();
            personList2.Add(new Person { Name = "赵六", Age = 60 ,HeadImage="image/4.png"});
            personList2.Add(new Person { Name = "刘二", Age = 30, HeadImage = "image/5.png" });
            personList2.Add(new Person { Name = "赵一", Age = 40, HeadImage = "image/6.png" });
            FromBox.ItemsSource = personList;
            ToBox.ItemsSource = personList2;
        }
    }
}

    就这样，利用Silverlight Toolkit很简单就可以实现很强大的功能。

效果截图：