GridView/ListViewの順序入れ替え

　GridView や ListView には、表示している項目の順序を入れ替えられるようにする機能が用意されています。
　この機能を使って、実際に項目入れ替えを行ってみたいと思います。

　今回は“分割アプリケーション”のテンプレートの先頭画面に機能追加をしていきます。
　まず、順序入れ替え機能を追加しますが、これは CanReorderItems と AllowDrop の両プロパティを True にするだけです。
　これだけで入れ替えは動作しますが、実際にコレクションの順序が入れ替わっているか確認するために、コレクションの順序を表示する機能も追加します。

　画面定義の変更部分は以下のようになります。

<!-- Back button and page title -->
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
    <Button x:Name="orderButton" Click="OnClick" Grid.Column="2" Content="順序表示" Margin="0, 40, 300, 0" />
</Grid>

<!-- Horizontal scrolling grid used in most view states -->
<ScrollViewer
    x:Name="itemGridScrollViewer"
    AutomationProperties.AutomationId="GridScrollViewer"
    Grid.Row="1"
    Margin="0,-4,0,0"
    Style="{StaticResource HorizontalScrollViewerStyle}">

    <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        Margin="116,0,116,46"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
        SelectionMode="None"
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick"
        CanReorderItems="True"
        AllowDrop="True"/>
</ScrollViewer>

<!-- Vertical scrolling list only used when snapped -->
<ScrollViewer
    x:Name="itemListScrollViewer"
    AutomationProperties.AutomationId="ListScrollViewer"
    Grid.Row="1"
    Padding="0,-10,0,0"
    Visibility="Collapsed"
    Style="{StaticResource VerticalScrollViewerStyle}">

    <ListView
        x:Name="itemListView"
        AutomationProperties.AutomationId="ItemsListView"
        AutomationProperties.Name="Items"
        Margin="10,0,0,60"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
        ItemTemplate="{StaticResource Standard80ItemTemplate}"
        SelectionMode="None"
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick"
        CanReorderItems="True"
        AllowDrop="True"/>
</ScrollViewer>

　順序表示を行うためのボタンを追加し、GridView と ListView の両方に CanReorderItems と AllowDrop を追加しています。

　コードの変更部分は以下の通りです。

private async void OnClick(object sender, RoutedEventArgs e)
{
    var sb = new StringBuilder();
    var groups = (ObservableCollection<SampleDataGroup>)this.DefaultViewModel["Items"];

    for (int i = 0; i < groups.Count; i++)
    {
        sb.AppendFormat("{0}:{1}", i + 1, groups[i].Title);
        sb.AppendLine();
    }

    var msgBox = new MessageDialog(sb.ToString());
    await msgBox.ShowAsync();
}