2024-01-19

【MAUI】SwipeViewの使い方

今年の目標

今年、技術系の記事を書きまくって、Microsoft MVP受賞を狙いたいと思います。

がんばります。

今日から週一くらいの頻度で、主に.NET MAUI の記事を書いていきたいと思います。

たまに気分転換に、WPFの記事も書くかもしれません。私はWPFで育ったので。

本題

さて、MAUIには Xamarin.Forms から受け継がれたコントロールが多いようですね。

今回はその一つである、SwipeView を見ていきたいと思います。

SwipeViewは例えば CollectionViewなどの複数のエントリの一つを左右にスワイプすると出てくるボタンのようなものです。

よく、背景が赤の「削除/Delete」のようなボタンが設けられていることが多い気がします。

もちろん、SwipeView単独でも動作しそうなものですが、今回のサンプルではCollectionViewと組み合わせてみたいと思います。

まずこちらの動画をご覧ください。

youtube.com

ではソースコードをどうぞ。

github.com

詳しく説明

今回はCollectionViewのItemTemplateの中で、SwipeViewを扱うようにしています。

CollectionViewのItemsSourceに与えられたコレクションは ReactiveCollectionインスタンスです。

ItemTemplate内のBindingContextにはstring型が入っているため、SwipeItemのCommandには

Command="{Binding BindingContext.LeftSwipeItemCommand, Source={x:Reference page}}"

みたいな書き方をしています。Sourceは x:Name="page"と名付けられた、ContentPageインスタンスに結びつきます。

つまり、ContentPageインスタンスのBindingContextにはSwipeViewSamplePageViewModelインスタンスが入っており、そのLeftSwipeItemCommandをバインディングしているというわけです。

この書き方はWPFに比べて、ややわかりやすく書きやすくなったと言えるでしょう。x:Reference大好き❤

ちなみにSwipeItemのCommandParameterは "{Binding}"となってます。これはSwipeItemのBindingContextをそのまま充てるという意味ですが、SwipeItemのBindingContextはさかのぼると、DataTemplateのx:DataTypeで指定されている型（ここではstring型）で、DataTemplateのデータはCollectionViewのItemsSourceに当てられているコレクションの要素になるので、つまりstringインスタンスが親から継承されてきて、CommandParameterはその値をそのままつかっているという意味になります。

public ReactiveCommandSlim<string> LeftSwipeItemCommand { get; } = new();

public ReactiveCommandSlim<string> RightSwipeItemCommand { get; } = new();

LeftSwipeItemCommand.Subscribe(async str =>
{
    await Shell.Current.CurrentPage.DisplayAlert("LeftSwipeItem", "LeftSwipeItem がタップされました。", "OK");
}).AddTo(_disposables);
RightSwipeItemCommand.Subscribe(async str =>
{
    await Shell.Current.CurrentPage.DisplayAlert("RightSwipeItem", "RightSwipeItem がタップされました。", "OK");
}).AddTo(_disposables);

あとは、ViewModel側で煮るなり焼くなり好きにしてくれっていうことですね。

今回はDisplayAlertを呼び出しています。