WPF MultiSelect模式下ListBox 实现多个ListBoxItem拖拽

WPF 的ListBox不支持很多常见的用户习惯，如在Explorer中用鼠标可以选择多项Item，并且点击已经选择的Item，按住鼠标左键可以将所有已选择Item拖拽到指定的位置。本文简单的实现了这一功能。

效果图：

拖拽1个Item

拖拽多个Item

说明：

代码下载地址：http://download.csdn.net/download/u012566751/6452323

代码中使用了两个类：

1.DragDropAdorner，用于拖拽过程中显示预览图，代码来自CSDN

2.ListBoxSelectionHelper，用于通过鼠标拖拽框选ListBoxItem，代码来自Codeproject，作者略作修改

具体操作

1.创建一个WPF工程，WpfDragMultiSelect，主界面代码如下：

<Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="5"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="5"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="5"/>

            <ColumnDefinition Width="50"/>

            <ColumnDefinition Width="5"/>

            <ColumnDefinition Width="*"/>

            <ColumnDefinition Width="5"/>

        </Grid.ColumnDefinitions>

        <Grid Grid.Row="1" Grid.Column="1" Background="Black"/>

        <GridSplitter Grid.Row="1"

                      Grid.Column="2"

                      ShowsPreview="True"

                      HorizontalAlignment="Stretch"

                              VerticalAlignment="Stretch"/>

        <Grid Grid.Row="1" Grid.Column="3" Background="Gray">

        </Grid>

    </Grid>

2.创建一个列表，使用数据绑定方式，数据类如下：

class ListData

    {

        public int Number

        {

            get;

            set;

        }

        public ListData(int nNum)

        {

            Number = nNum;

        }

    }

数据类只有一个公共属性Number，类型为int

主类添加代码：

List<ListData> _list = new List<ListData>();

AdornerLayer mAdornerLayer = null;

bool bIsDraging = false;

public MainWindow()

        {

            InitializeComponent();

            for (int n = ; n < ; n++ )

            {

                this._list.Add(new ListData(n));

            }

            this.DataContext = _list;

            this.list.AllowDrop = true;

            this.list.QueryContinueDrag += delegate(object sender, QueryContinueDragEventArgs e)

            {

                //_adornerLayer.Update();

                //this.list.Cursor = Cursors.Arrow;

                mAdornerLayer.Update();

            };

        }

_list作为列表数据源

bIsDraging表示数据拖拽状态

列表数据模板如下：

<DataTemplate x:Key="dt_Rectangle">

            <Grid Margin="10" >

                <Rectangle Width="50"

                   Height="50"

                   Fill="LightBlue" RadiusX="3" RadiusY="3"  />

                <TextBlock Text="{Binding Path=Number}"

                           Foreground="White"

                           VerticalAlignment="Center"

                           HorizontalAlignment="Center"/>

                <Rectangle Width="50"

                           Height="50"

                           Fill="Transparent"

                           PreviewMouseDown="Rectangle_PreviewMouseDown" PreviewMouseMove="Rectangle_PreviewMouseMove" PreviewMouseUp="Rectangle_PreviewMouseUp" />

            </Grid>

        </DataTemplate>

每个列表显示为一个亮蓝色（LightBlue）的正方形，在每个正方形中显示该项绑定ListData对象的Number属性。

最后一个Rectangle专门用于响应鼠标事件

在主界面中添加列表：

<ListBox x:Name="list"

                Background="Transparent"

                     ItemsSource="{Binding}"

                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"

                  loc:ListBoxSelectionHelper.MultiSelect="True"

                  loc:ListBoxSelectionHelper.PreviewDrag="True" PreviewDragEnter="list_PreviewDragEnter">

                <ListBox.ItemTemplate>

                    <DynamicResource ResourceKey="dt_Rectangle"/>

                </ListBox.ItemTemplate>

                <ListBox.ItemsPanel>

                    <ItemsPanelTemplate>

                        <WrapPanel/>

                    </ItemsPanelTemplate>

                </ListBox.ItemsPanel>

            </ListBox>

代码：loc:ListBoxSelectionHelper.MultiSelect="True"  loc:ListBoxSelectionHelper.PreviewDrag="True" ，使用ListBoxSelectionHelper类实现鼠标拖拽框选功能

3.添加一个Grid，用于在拖拽过程中显示预览

<!--拖拽预览-->

        <Grid Width="100"

              Height="100">

            <Grid x:Name="gridAdorner" Visibility="Hidden">

                <Rectangle Width="50"

                           Height="50"

                           Fill="LightGray"/>

                <TextBlock x:Name="textAdorner"

                           Text="0"

                           VerticalAlignment="Center"

                           HorizontalAlignment="Center"

                           Foreground="Red"

                           FontSize="20">

                </TextBlock>

            </Grid>

        </Grid>

4.实现数据模板dt_Rectangle中声明的事件，用以支持拖拽功能

private void Rectangle_PreviewMouseDown(object sender, MouseButtonEventArgs e)

        {

            var rectangle = (FrameworkElement)sender;

            var rectangleViewModel = (ListData)rectangle.DataContext;

            ListBoxItem lstitem = this.list.ItemContainerGenerator.ContainerFromItem(rectangleViewModel) as ListBoxItem;

            if (lstitem.IsSelected == true)

            {

                bIsDraging = true;

                e.Handled = true;

            }

            else

            {

                bIsDraging = false;

            }

        }

        private void Rectangle_PreviewMouseMove(object sender, MouseEventArgs e)

        {

            if(bIsDraging)

            {

                if (Mouse.LeftButton == MouseButtonState.Pressed)

                {

                    if (this.list.SelectedItems.Count>)

                    {

                        //ListBoxItem lstitem = this.list.ItemContainerGenerator.ContainerFromItem(pr) as ListBoxItem;

                        //更新数据

                        //MAx 2013-10-23 16:19:44

                        this.textAdorner.Text = this.list.SelectedItems.Count.ToString();

                        this.gridAdorner.Visibility = Visibility.Visible;

                        DragDropAdorner adorner = new DragDropAdorner(this.gridAdorner);

                        mAdornerLayer = AdornerLayer.GetAdornerLayer(this.list); // Window class do not have AdornerLayer

                        mAdornerLayer.Add(adorner);

                        this.list.Cursor = Cursors.Arrow;

                        string[] files = new string[];

                        DragDrop.DoDragDrop(list, new DataObject(DataFormats.FileDrop, files), DragDropEffects.Copy | DragDropEffects.Move /* | DragDropEffects.Link */);

                        //DataObject dataObject = new DataObject(files);

                        //System.Windows.DragDrop.DoDragDrop(this.list, dataObject, DragDropEffects.Copy);

                        mAdornerLayer.Remove(adorner);

                        mAdornerLayer = null;

                        this.gridAdorner.Visibility = Visibility.Hidden;

                    }

                }

            }

        }

        private void Rectangle_PreviewMouseUp(object sender, MouseButtonEventArgs e)

        {

            bIsDraging = false;

        }

分别响应PreviewMouseDown，PreviewMouseMove，PreviewMouseUp三个事件
PreviewMouseDown：判断Item是否选为已选择的Item，如果是则进入拖拽状态，标记bIsDraging，并且截断事件e.Handled = true;如果不截断，ListBox会响应点击事件，默认选择当前Item

Rectangle_PreviewMouseMove：如果当前为拖拽状态且鼠标左键按下，则开始拖拽。将gridAdorner作为拖拽预览

Rectangle_PreviewMouseUp：关闭拖拽状态

至此，已经完全实现拖拽多个Item功能。