背水一战 Windows 10 (56) - 控件（集合类）: ListViewBase - 基础知识, 拖动项

Page
    x:Class="Windows10.Controls.CollectionControl.ListViewBaseDemo.ListViewBaseDemo1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.CollectionControl.ListViewBaseDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    
    xmlns:common="using:Windows10.Common">

    Grid Background="Transparent">
        Grid Margin="10 0 10 10">

            StackPanel Orientation="Vertical">
                
                TextBlock Name="lblMsg1" />
                TextBlock Name="lblMsg2" Margin="0 10 0 0" />

                StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0 10 0 0">
                    CheckBox Name="chkIsItemClickEnabled" Content="IsItemClickEnabled" Margin="10 0 0 0" />
                    CheckBox Name="chkShowsScrollingPlaceholders" Content="ShowsScrollingPlaceholders" Margin="10 0 0 0" />
                    CheckBox Name="chkIsMultiSelectCheckBoxEnabled" Content="IsMultiSelectCheckBoxEnabled" Margin="10 0 0 0" />
                    ComboBox Name="cmbSelectionMode" PlaceholderText="SelectionMode" SelectionChanged="cmbSelectionMode_SelectionChanged" Margin="10 0 0 0">
                        ComboBoxItem>NoneComboBoxItem>
                        ComboBoxItem>SingleComboBoxItem>
                        ComboBoxItem>MultipleComboBoxItem>
                        ComboBoxItem>ExtendedComboBoxItem>
                    ComboBox>
                StackPanel>

                StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0 10 0 0">
                    Button Name="buttonScrollDefault" Content="滚动到第 101 条数据 ScrollIntoViewAlignment.Default" Click="buttonScrollDefault_Click" />
                    Button Name="buttonScrollLeading" Content="滚动到第 101 条数据 ScrollIntoViewAlignment.Leading" Click="buttonScrollLeading_Click" Margin="10 0 0 0" />
                    Button Name="buttonSelect" Content="选中第 3 到第 6 项" Click="buttonSelect_Click" Margin="10 0 0 0" />
                StackPanel>
            StackPanel>

            
            ListView x:Name="listView" VerticalAlignment="Top" HorizontalAlignment="Left" ItemsSource="{x:Bind Data}" Margin="0 150 10 10" 
                      ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      SelectionMode="Single"
                      IsItemClickEnabled="{Binding IsChecked, ElementName=chkIsItemClickEnabled}" 
                      ShowsScrollingPlaceholders ="{Binding IsChecked, ElementName=chkShowsScrollingPlaceholders}"
                      IsMultiSelectCheckBoxEnabled="{Binding IsChecked, ElementName=chkIsMultiSelectCheckBoxEnabled}"
                      SelectionChanged="listView_SelectionChanged"
                      ItemClick="listView_ItemClick">
                ListView.ItemTemplate>
                    DataTemplate x:DataType="common:Employee">
                        StackPanel Orientation="Horizontal">
                            TextBlock Text="{x:Bind Name, Mode=TwoWay}" />
                            TextBlock Text="{x:Bind Age, Mode=TwoWay}" Margin="10 0 0 0" />
                        StackPanel>
                    DataTemplate>
                ListView.ItemTemplate>
                ListView.HeaderTemplate>
                    DataTemplate>
                        TextBlock Text="header" />
                    DataTemplate>
                ListView.HeaderTemplate>
                ListView.HeaderTransitions>
                    TransitionCollection>
                        EntranceThemeTransition FromHorizontalOffset="100" />
                    TransitionCollection>
                ListView.HeaderTransitions>
                ListView.FooterTemplate>
                    DataTemplate>
                        TextBlock Text="footer" />
                    DataTemplate>
                ListView.FooterTemplate>
                ListView.FooterTransitions>
                    TransitionCollection>
                        EntranceThemeTransition />
                    TransitionCollection>
                ListView.FooterTransitions>
            ListView>

        Grid>
    Grid>
Page>

/*
 * ListViewBase(基类) - 列表控件基类（继承自 Selector, 请参见 /Controls/SelectionControl/SelectorDemo.xaml）
 *     SelectedItems - 被选中的 items 集合（只读）
 *     SelectedRanges - 被选中的 items 的范围（只读）
 *     SelectAll() - 选中全部 items
 *     SelectRange(ItemIndexRange itemIndexRange) - 选中指定范围的 items
 *     DeselectRange(ItemIndexRange itemIndexRange) - 取消选中指定范围的 items
 *     ScrollIntoView(object item, ScrollIntoViewAlignment alignment) - 滚动到指定的 item
 *         ScrollIntoViewAlignment.Default - 不好解释，请自己看演示效果
 *         ScrollIntoViewAlignment.Leading - 不好解释，请自己看演示效果
 * 
 * ItemIndexRange - items 的范围
 *     FirstIndex - 范围的第一个 item 的索引位置
 *     LastIndex - 范围的最后一个 item 的索引位置
 *     Length - 范围的长度
 *     
 * 
 * 注：
 * ListViewBase 实现了 ISemanticZoomInformation 接口，所以可以在 SemanticZoom 的两个视图间有关联地切换。关于 ISemanticZoomInformation 请参见 /Controls/CollectionControl/SemanticZoomDemo/ISemanticZoomInformationDemo.xaml
 * 
 * 
 * 本例用于演示 ListViewBase 的基础知识
 */

using System;
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using System.Linq;
using Windows10.Common;
using Windows.UI.Xaml;
using Windows.UI.Popups;

namespace Windows10.Controls.CollectionControl.ListViewBaseDemo
{
    public sealed partial class ListViewBaseDemo1 : Page
    {
        public ObservableCollection Data { get; set; } = TestData.GetEmployees(10000);

        public ListViewBaseDemo1()
        {
            this.InitializeComponent();
        }

        // 单击行为的事件
        private void listView_ItemClick(object sender, ItemClickEventArgs e)
        {
            // 获取被单击的 item 的数据
            lblMsg1.Text = "被单击的 employee 的 name 为：" + (e.ClickedItem as Employee).Name;
        }

        // 选中行为的事件
        private void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // e.RemovedItems - 本次事件中，被取消选中的项
            // e.AddedItems - 本次事件中，新被选中的项

            lblMsg2.Text = $"新被选中的 item 共 {e.AddedItems.Count.ToString()} 条, 新被取消选中的 item 共 {e.RemovedItems.Count.ToString()} 条";
        }

        private void cmbSelectionMode_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            listView.SelectionMode = (ListViewSelectionMode)Enum.Parse(typeof(ListViewSelectionMode), (e.AddedItems[0] as ComboBoxItem).Content.ToString());
        }

        private void buttonScrollDefault_Click(object sender, RoutedEventArgs e)
        {
             listView.ScrollIntoView(Data.Skip(100).First(), ScrollIntoViewAlignment.Default);
        }

        private void buttonScrollLeading_Click(object sender, RoutedEventArgs e)
        {
            listView.ScrollIntoView(Data.Skip(100).First(), ScrollIntoViewAlignment.Leading);
        }

        private async void buttonSelect_Click(object sender, RoutedEventArgs e)
        {
            if (listView.SelectionMode == ListViewSelectionMode.Multiple || listView.SelectionMode == ListViewSelectionMode.Extended)
            {
                // 选中第 3, 4, 5, 6 项
                ItemIndexRange iir = new ItemIndexRange(2, 4);
                listView.SelectRange(iir);
            }
            else
            {
                MessageDialog messageDialog = new MessageDialog("SelectionMode 必须是 Multiple 或 Extended", "提示");
                await messageDialog.ShowAsync();
            }
        }
    }
}

Page
    x:Class="Windows10.Controls.CollectionControl.ListViewBaseDemo.ListViewBaseDemo2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.CollectionControl.ListViewBaseDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    
    xmlns:common="using:Windows10.Common">

    Page.Resources>
        DataTemplate x:Key="ItemTemplate" x:DataType="common:Employee">
            StackPanel Background="Orange" Width="100">
                TextBlock TextWrapping="Wrap" Text="{x:Bind Name}" HorizontalAlignment="Left" />
                TextBlock TextWrapping="Wrap" Text="{x:Bind Age}" HorizontalAlignment="Left"/>
            StackPanel>
        DataTemplate>
    Page.Resources>

    Grid Background="Transparent">
        StackPanel Margin="10 0 10 10">

            Button Name="buttonMove" Content="通过 api 将 gridView1 中的第 1 项数据移动到第 3 项数据的位置" Click="buttonMove_Click" Margin="0 0 0 10" />
            
            

            
            GridView Name="gridView1" Margin="5" VerticalAlignment="Top" Height="100" ItemsSource="{x:Bind Data1}" Background="White"
                      ItemTemplate="{StaticResource ItemTemplate}"
                      CanDragItems="True" CanReorderItems="True" AllowDrop="True"
                      DragItemsStarting="gridView_DragItemsStarting" 
                      DragItemsCompleted="gridView_DragItemsCompleted" />

            
            GridView Name="gridView2" Margin="5" VerticalAlignment="Top" Height="100" ItemsSource="{x:Bind Data2}" Background="White"
                      ItemTemplate="{StaticResource ItemTemplate}"
                      CanDragItems="True" CanReorderItems="True" AllowDrop="True"
                      DragItemsStarting="gridView_DragItemsStarting" 
                      DragItemsCompleted="gridView_DragItemsCompleted" 
                      DragEnter="gridView2_DragEnter"
                      Drop="gridView2_Drop"/>

            
            TextBlock Name="lblEmployee" Margin="5" Foreground="Orange" Text="{x:Bind Path=Employee.Name}" 
                       PointerPressed="lblEmployee_PointerPressed" DragStarting="lblEmployee_DragStarting" />

            
            Border Name="borderDelete" Margin="5" Width="300" Height="100" BorderThickness="1" BorderBrush="Red" Background="Blue"
                    AllowDrop="True" Drop="borderDelete_Drop" DragEnter="borderDelete_DragEnter" DragLeave="borderDelete_DragLeave" DragOver="borderDelete_DragOver">
                TextBlock FontSize="32" Text="拖动到此处以删除" TextAlignment="Center" VerticalAlignment="Center" />
            Border>

            TextBlock Name="lblMsg" Margin="5" Text="通过拖动 GirdView 中的 Item 进行排序" />

        StackPanel>
    Grid>
Page>

/*
 * ListViewBase(基类) - 列表控件基类（继承自 Selector, 请参见 /Controls/SelectionControl/SelectorDemo.xaml）
 * 
 *      
 * DragItemsStartingEventArgs
 *     Items - 被拖动的 items 集合
 *     Cancel - 是否取消拖动操作
 *     Data - 一个 DataPackage 类型的对象，用于传递数据
 *     
 * DragItemsCompletedEventArgs
 *     DropResult - drop 的结果（None, Copy, Move, Link）
 *     Items - 被拖动的 items 集合
 *     
 * 
 * 注：
 * 1、drag-drop 传递数据，剪切板传递数据，分享传递数据，以及其他场景的数据传递均通过 DataPackage 类型的对象来完成
 * 2、本例通过一个私有字段传递数据，通过 DataPackage 传递数据请参见：/Controls/BaseControl/UIElementDemo/DragDropDemo.xaml
 * 3、关于 UIElement 拖放的详细说明请参见：/Controls/BaseControl/UIElementDemo/DragDropDemo.xaml
 * 
 * 
 * 本例用于演示如何在 ListViewBase 内拖动 item 以对 item 排序，以及如何拖动 item 到 ListViewBase 外的指定位置以删除 item，以及如何拖动一个 UIElement 到 ListViewBase 内以添加这个 item
 */

using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using System.Linq;
using Windows.UI.Xaml;
using System.Diagnostics;
using Windows10.Common;
using Windows.ApplicationModel.DataTransfer;
using System.Collections.Specialized;
using System;
using Windows.UI.Xaml.Input;

namespace Windows10.Controls.CollectionControl.ListViewBaseDemo
{
    public sealed partial class ListViewBaseDemo2 : Page
    {
        // gridView1 的数据源
        public ObservableCollection Data1 { get; set; } = new ObservableCollection(TestData.GetEmployees());
        // gridView2 的数据源
        public ObservableCollection Data2 { get; set; } = new ObservableCollection();

        // lblEmployee 的数据源
        public Employee Employee { get; set; } = new Employee() { Name = "wanglei", Age = 36, IsMale = true };

        // 拖动中的 Employee 对象
        private Employee _draggingEmployee;

        public ListViewBaseDemo2()
        {
            this.InitializeComponent();

            // 这个用来证明在 gridView1 中拖动 item 排序时，其结果会同步到数据源
            Data1.CollectionChanged += Data1_CollectionChanged;
        }

        private void Data1_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += $"Action: {e.Action}, OldStartingIndex: {e.OldStartingIndex}, NewStartingIndex: {e.NewStartingIndex}";
        }

        // 开始 item 拖动
        private void gridView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
        {
            _draggingEmployee = e.Items.First() as Employee;
        }

        // 完成 item 拖动
        private void gridView_DragItemsCompleted(ListViewBase sender, DragItemsCompletedEventArgs args)
        {
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += $"DropResult: {args.DropResult}";

            _draggingEmployee = null;
        }

        // item 被拖进了 borderDelete
        private void borderDelete_DragEnter(object sender, DragEventArgs e)
        {
            // 关于 DragEventArgs 的详细介绍，以及其他属于 UIElement 拖放方面的详细介绍请参见：/Controls/BaseControl/UIElementDemo/DragDropDemo.xaml

            e.AcceptedOperation = DataPackageOperation.Move;

            e.DragUIOverride.IsGlyphVisible = false;
            e.DragUIOverride.Caption = "松开则删除";

            Debug.WriteLine("DragEnter");
        }

        // item 被 drop 到了 borderDelete
        private void borderDelete_Drop(object sender, DragEventArgs e)
        {
            // 从数据源中删除指定的 Employee 对象
            Data1.Remove(_draggingEmployee);
            Data2.Remove(_draggingEmployee);

            _draggingEmployee = null;

            // 在 borderDelete 放下了拖动项
            Debug.WriteLine("Drop");
        }

        // item 被拖出了 borderDelete
        private void borderDelete_DragLeave(object sender, DragEventArgs e)
        {
            Debug.WriteLine("DragLeave");
        }

        // item 在 borderDelete 上面拖动着
        private void borderDelete_DragOver(object sender, DragEventArgs e)
        {
            Debug.WriteLine("DragOver");
        }


        // item 被拖进了 gridView2
        private void gridView2_DragEnter(object sender, DragEventArgs e)
        {
            e.AcceptedOperation = DataPackageOperation.Copy;
        }

        // item 被 drop 到了 gridView2
        private void gridView2_Drop(object sender, DragEventArgs e)
        {
            Data2.Add(_draggingEmployee);
        }


        // lblEmployee 被按下了
        private async void lblEmployee_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            // 启动 lblEmployee 的拖动操作
            await lblEmployee.StartDragAsync(e.GetCurrentPoint(lblEmployee));
        }

        // lblEmployee 开始被拖动
        private void lblEmployee_DragStarting(UIElement sender, DragStartingEventArgs args)
        {
            args.Data.RequestedOperation = DataPackageOperation.Copy;

            _draggingEmployee = Employee;
        }


        // 通过 api 将 gridView1 中的第 1 项数据移动到第 3 项数据的位置
        private void buttonMove_Click(object sender, RoutedEventArgs e)
        {
            // 利用数据源 ObservableCollection 的 Move 方法
            Data1.Move(0, 2);
        }
    }
}