WinUI3 ListView 拖曳調整順序示範

筆者在網路上沒有找到讓 ListView 可以拖曳調整順序的示範，一開始以為要自己實作 Drop 或是 DropCompleted 事件，因為怎麼拖曳都沒有效：

後來發現超級簡單，可能就是因為太簡單了，所以網路上才找不到示範。

本文是依照昨天的 WinUI3 ListView 示範(自訂顯示樣式) 調整：

自訂類別：

    
public class UserDto
{
    public int Id { get; set; }
    public string Name { get; set; }
}
    

自訂資料清單：

    
ObservableCollection<UserDto> users = new ObservableCollection<UserDto>();
users.Add(new UserDto { Id = 1, Name = "小明" });
users.Add(new UserDto { Id = 2, Name = "阿花" });
users.Add(new UserDto { Id = 3, Name = "老王" });
users.Add(new UserDto { Id = 4, Name = "小李" });
users.Add(new UserDto { Id = 5, Name = "阿張" });
users.Add(new UserDto { Id = 6, Name = "小林" });
MyListView.ItemsSource = users;
    

使用 DataTemplate 定義每筆資料的顯示方式，並在 ListView 上使用 ItemTemplate 設定樣式。
並設定為可以拖曳：

    
<Page
    x:Class="WinUi3ListViewTest.Views.Page3"
    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:winUi3ListViewTest="using:WinUi3ListViewTest"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <DataTemplate x:Key="ListViewItemTemplate" x:DataType="winUi3ListViewTest:UserDto">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Ellipse x:Name="Ellipse"
                         Grid.RowSpan="2"
                         Width="32"
                         Height="32"
                         Margin="6"
                         VerticalAlignment="Center"
                         HorizontalAlignment="Center"
                         Fill="{ThemeResource SystemControlBackgroundBaseMediumBrush}" />
                <TextBlock Grid.Row="0" Grid.Column="1"
                           Text="{x:Bind Id}"
                           x:Phase="1"
                           Style="{ThemeResource BaseTextBlockStyle}"
                           Margin="12,6,0,0" />
                <TextBlock Grid.Column="1" Grid.Row="1"
                           Text="{x:Bind Name}"
                           x:Phase="2"
                           Style="{ThemeResource BodyTextBlockStyle}"
                           Margin="12,0,0,6" />
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <ListView x:Name="MyListView"
              ItemTemplate="{StaticResource ListViewItemTemplate}"
              SelectionMode="Single"
              CanDragItems="True"
              CanReorderItems="True"
              AllowDrop="True"
              Width="350"
              Height="400" />

</Page>
    

就可以拖曳調整順序了！

那成功的關鍵是什麼呢？就是不要使用 List ，而是使用 ObservableCollection ，不然清單不會自動更新...