XAMLのお勉強メモ ⑦

 こんばんは。ざわです。

今回もXAMLについて、過去履歴はこちらです。

　・XAMLのお勉強メモ①

　・XAMLのお勉強メモ②

　・XAMLのお勉強メモ③

　・XAMLのお勉強メモ④

　・XAMLのお勉強メモ⑤

　・XAMLのお勉強メモ⑥

動作環境

　・Windows10

　・Microsoft Visual Studio Community 2022 Preview 7.0

　・Xamarin.Forms

今回試してみたこと

　本日のテーマは「SwipeView」です。

　iPhoneメールなどで一覧のリスト上で横にスワイプした際に「ゴミ箱」や「フラグ」といったボタンが表示されますが、

　今回はこれを実装してみたいと思います。

　１. LabelでSwipeView

まずはラベルコントロールでSwipeViewの動きを試してみます。 

左方向にスワイプした際に「削除」と「お気に入り」ボタンを表示するようにします。 

（赤字の部分がSwipeView）

 

<StackLayout>

    <SwipeView>

        <SwipeView.RightItems>

            <SwipeItems>

                <SwipeItem Text="削除"

                            BackgroundColor="Red"

                            IconImageSource="delete.png"

                            Invoked="OnDeleteSwipeItemInvoked" />

                <SwipeItem Text="お気に入り"

                            BackgroundColor="RoyalBlue"

                            IconImageSource="favorite.png"

                            Invoked="OnFavoriteSwipeItemInvoked" />

            </SwipeItems>

        </SwipeView.RightItems>

        <StackLayout>

            <Label Text="Swipe View Test" FontSize="Large"  Padding="20,10"/>

        </StackLayout>

    </SwipeView>

</StackLayout>

 

コードビハインドにはボタンをタップしたときのイベントを追加。

public partial class MainPage : ContentPage

{

    public MainPage()

    {

        InitializeComponent();

    }

    private void OnDeleteSwipeItemInvoked(object sender, EventArgs e)

    {

        DisplayAlert("削除", "このアイテムを削除しますか？", "OK");

    }

    private void OnFavoriteSwipeItemInvoked(object sender, EventArgs e)

    {

        DisplayAlert("お気に入り", "このアイテムをお気に入りに追加しますか？", "OK");

    }

}

 

ラベル部分を左方向にスワイプすると・・

 

 

「削除」と「お気に入り」ボタンが表示されました！ 

　

　２. CollectionViewでSwipeView

SwipeViewは一般的にデータのコレクションで使用されると思いますので、

次は一覧（CollectionView）に対して、同じようにSwipeViewを使ってみます。 

（赤字の部分がSwipeView）

<CollectionView x:Name="myCollectionView">

    <CollectionView.ItemTemplate>

        <DataTemplate>

            <SwipeView>

                <SwipeView.RightItems>

                    <SwipeItems>

                        <SwipeItem Text="削除"

                        BackgroundColor="Red"

                        IconImageSource="delete.png"

                        Invoked="OnDeleteSwipeItemInvoked" />

                        <SwipeItem Text="お気に入り"

                        BackgroundColor="RoyalBlue"

                        IconImageSource="favorite.png"

                        Invoked="OnFavoriteSwipeItemInvoked" />

                    </SwipeItems>

                </SwipeView.RightItems>

                <StackLayout Orientation="Horizontal">

                    <Image Source="{Binding Image}"

                            HeightRequest="60"

                            WidthRequest="60"

                            Margin="5"/>

                    <Label Text="{Binding Name}"

                            FontSize="Medium" />

                </StackLayout>

            </SwipeView>

        </DataTemplate>

    </CollectionView.ItemTemplate>

</CollectionView>

 

一覧のアイテム（あひる）部分を左方向にスワイプすると・・

 

ラベルのときと同じように「削除」と「お気に入り」ボタンが表示されましたですね。

 

 

スワイプでボタン表示機能を付けたいコントロールを<SwipeView>～</SwipeView>内に記述し、

スワイプジェスチャー（上下左右のどこに表示するのか、ボタンの属性等）を指定してあげる、

CollectionViewの場合は各行に設定されるので<DataTemplate>内に<SwipeView>を記述する、

というイメージですかね。

それではまた！