Xamarin.Forms SwipeView

[アーティクル]
04/24/2024

SwipeView は、コンテンツの項目をラップし、スワイプジェスチャによって表示されるコンテキストメニュー項目を提供するコンテナーコントロールです。

SwipeView には、次のプロパティが定義されています。

SwipeItems 型の LeftItems。コントロールが左側からスワイプされたときに呼び出すことができるスワイプ項目を表します。
SwipeItems 型の RightItems。コントロールが右側からスワイプされたときに呼び出すことができるスワイプ項目を表します。
SwipeItems 型の TopItems。コントロールが上から下にスワイプされたときに呼び出すことができるスワイプ項目を表します。
SwipeItems 型の BottomItems。コントロールが下から上にスワイプされたときに呼び出すことができるスワイプ項目を表します。
double 型の Threshold。スワイプジェスチャをトリガーしてスワイプ項目を完全に表示する、デバイスに依存しない単位の数を表します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データバインディングの対象にすることができ、スタイルを設定できます。

さらに、SwipeView は ContentView クラスから Content プロパティを継承します。 Content プロパティは、SwipeView クラスのコンテンツプロパティであるため、明示的に設定する必要はありません。

SwipeView クラスでは、3 つのイベントも定義します。

SwipeStarted は、スワイプの開始時に発生します。このイベントに付随する SwipeStartedEventArgs オブジェクトには、SwipeDirection 型の SwipeDirection プロパティがあります。
SwipeChanging は、スワイプの動きに合わせて発生します。このイベントに付随する SwipeChangingEventArgs オブジェクトには、SwipeDirection 型の SwipeDirection プロパティと、double 型の Offset プロパティがあります。
SwipeEnded は、スワイプが終了したときに発生します。このイベントに付随する SwipeEndedEventArgs オブジェクトには、SwipeDirection 型の SwipeDirection プロパティと、bool 型の IsOpen プロパティがあります。

さらに、SwipeView には、Open メソッドと Close メソッドが含まれており、それぞれプログラムによってスワイプ項目を開いたり閉じたりします。

Note

SwipeView には iOS と Android のプラットフォーム固有の機能があり、SwipeView を開くときに使用されるトランジションを制御します。詳細については、「iOS の SwipeView スワイプ画面切り替えモード」および「Android の SwipeView スワイプ画面切り替えモード」を参照してください。

SwipeView を作成する

SwipeView は、SwipeView がラップするコンテンツと、スワイプジェスチャによって表示されるスワイプ項目を定義する必要があります。スワイプアイテムは、4 つの SwipeView 方向コレクション (LeftItems、RightItems、TopItems、BottomItems) のいずれかに配置される 1 つまたは複数の SwipeItem オブジェクトです。

次の例は、XAML で SwipeView をインスタンス化する方法を示しています。

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
    <Grid HeightRequest="60"
          WidthRequest="300"
          BackgroundColor="LightGray">
        <Label Text="Swipe right"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Grid>
</SwipeView>

同等の C# コードを次に示します。

// SwipeItems
SwipeItem favoriteSwipeItem = new SwipeItem
{
    Text = "Favorite",
    IconImageSource = "favorite.png",
    BackgroundColor = Color.LightGreen
};
favoriteSwipeItem.Invoked += OnFavoriteSwipeItemInvoked;

SwipeItem deleteSwipeItem = new SwipeItem
{
    Text = "Delete",
    IconImageSource = "delete.png",
    BackgroundColor = Color.LightPink
};
deleteSwipeItem.Invoked += OnDeleteSwipeItemInvoked;

List<SwipeItem> swipeItems = new List<SwipeItem>() { favoriteSwipeItem, deleteSwipeItem };

// SwipeView content
Grid grid = new Grid
{
    HeightRequest = 60,
    WidthRequest = 300,
    BackgroundColor = Color.LightGray
};
grid.Children.Add(new Label
{
    Text = "Swipe right",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
});

SwipeView swipeView = new SwipeView
{
    LeftItems = new SwipeItems(swipeItems),
    Content = grid
};

この例では、SwipeView コンテンツは Label を含む Grid です。

スワイプ項目は、SwipeView コンテンツでアクションを実行するために使用され、コントロールを左側からスワイプすると表示されます。

既定では、スワイプ項目はユーザーによってタップされたときに実行されます。ただし、この動作は変更可能です。詳細については、「スワイプモード」を参照してください。

スワイプ項目が実行されると、スワイプ項目は非表示になり、 SwipeView コンテンツが再表示されます。ただし、この動作は変更可能です。詳細については、「スワイプ動作」を参照してください。

Note

スワイプコンテンツとスワイプ項目は、インラインで配置することも、リソースとして定義することもできます。

スワイプ項目

LeftItems、RightItems、TopItems、BottomItems コレクションはすべて SwipeItems 型です。 SwipeItems クラスには、次のプロパティが定義されています。

SwipeMode 型の Mode。スワイプ操作の効果を示します。スワイプモードの詳細については、「スワイプモード」を参照してください。
SwipeBehaviorOnInvoked 型の SwipeBehaviorOnInvoked。スワイプ項目が呼び出された後の SwipeView の動作を示します。スワイプ動作の詳細については、「スワイプ動作」を参照してください。

各スワイプ項目は、4 つの SwipeItems 方向のコレクションのいずれかに配置される SwipeItem オブジェクトとして定義されます。 SwipeItem クラスは MenuItem クラスから派生し、次のメンバーを追加します。

Color 型の BackgroundColor プロパティは、スワイプ項目の背景色を定義します。このプロパティは、バインド可能なプロパティによってサポートされています。
Invoked イベント。これは、スワイプ項目が実行されたときに発生します。

重要

MenuItem クラスは、Command、CommandParameter、IconImageSource、Text などのいくつかのプロパティを定義します。これらのプロパティは、SwipeItem オブジェクトに設定して外観を定義したり、スワイプ項目が呼び出されたときに実行される ICommand プロパティを定義したりできます。詳細については、「Xamarin.FormsMenuItem」を参照してください。

次の例は、SwipeView の LeftItems コレクション内の 2 つの SwipeItem オブジェクトを示しています。

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

それぞれの SwipeItem の外観は、Text、IconImageSource、BackgroundColor プロパティの組み合わせによって定義されます。

SwipeItem がタップされると、その Invoked イベントが発生し、登録されたイベントハンドラーによって処理されます。さらに、MenuItem.Clicked イベントが発生します。または、Command プロパティは、SwipeItem が呼び出されたときに実行される ICommand 実装に設定できます。

Note

SwipeItem の外観が Text または IconImageSource プロパティのみを使用して定義されている場合、コンテンツは常に中央に配置されます。

スワイプ項目を SwipeItem オブジェクトとして定義するだけでなく、カスタムのスワイプ項目ビューを定義することもできます。詳細については、「カスタムのスワイプ項目」をご覧ください。

スワイプの方向

SwipeView では、4 つの異なるスワイプ方向がサポートされ、スワイプ方向は、SwipeItem オブジェクトが追加される方向 SwipeItems コレクションによって定義されます。各スワイプ方向は、独自のスワイプ項目を保持できます。たとえば、次の例は、スワイプ項目がスワイプ方向に依存する SwipeView を示しています。

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <SwipeView.RightItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Command="{Binding FavoriteCommand}" />
            <SwipeItem Text="Share"
                       IconImageSource="share.png"
                       BackgroundColor="LightYellow"
                       Command="{Binding ShareCommand}" />
        </SwipeItems>
    </SwipeView.RightItems>
    <!-- Content -->
</SwipeView>

この例では、SwipeView コンテンツを右または左にスワイプできます。右にスワイプすると [削除] スワイプ項目が表示され、左にスワイプすると [お気に入り] と [共有] のスワイプ項目が表示されます。

警告

SwipeView では、方向性 SwipeItems コレクションのインスタンスを一度に 1 つだけ設定できます。したがって、SwipeView に 2 つの LeftItems 定義を含めることはできません。

SwipeStarted、SwipeChanging、SwipeEnded イベントは、イベント引数の SwipeDirection プロパティを介してスワイプ方向を報告します。このプロパティは SwipeDirection 型で、次の 4 つのメンバーで構成される列挙です。

Right は、右スワイプが発生したことを示します。
Left は、左スワイプが発生したことを示します。
Up は、上向きのスワイプが発生したことを示します。
Down は、下向きにスワイプが発生したことを示します。

スワイプのしきい値

SwipeView には、double 型の Threshold プロパティが含まれています。これは、スワイプジェスチャをトリガーしてスワイプ項目を完全に表示するデバイスに依存しないユニットの数を表します。

次の例では、SwipeView で Threshold プロパティを設定します。

<SwipeView Threshold="200">
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

この例では、SwipeItem が完全に表示される前に、SwipeView をデバイスに依存しない 200 単位分スワイプする必要があります。

Note

現在、Threshold プロパティは、iOS および Android にのみ実装されています。

スワイプモード

SwipeItems クラスには Mode プロパティがあります。これは、スワイプ操作の効果を示します。このプロパティは、次の SwipeMode 列挙要素のいずれかに設定する必要があります。

Reveal は、スワイプによってスワイプ項目が表示されることを示します。これは、SwipeItems.Mode プロパティの既定値です。
Execute は、スワイプがスワイプ項目を実行することを示します。

表示モードでは、ユーザーは SwipeView をスワイプして 1 つ以上のスワイプ項目で構成されるメニューを開きます。スワイプ項目を実行するには明示的にスワイプ項目をタップする必要があります。スワイプ項目が実行されると、スワイプ項目が閉じられ、 SwipeView コンテンツが再表示されます。実行モードでは、ユーザーが SwipeView をスワイプすると、もう 1 つのスワイプ項目で構成されるメニューが開き、自動的に実行されます。実行後、スワイプ項目が閉じられ、SwipeView コンテンツが再表示されます。

次の例は、SwipeView が実行モードを使用するように構成されている例を示しています。

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems Mode="Execute">
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

この例では、SwipeView コンテンツを右にスワイプして、すぐに実行されるスワイプ項目を表示できます。実行後、 SwipeView コンテンツが再表示されます。

スワイプ動作

SwipeItems クラスには SwipeBehaviorOnInvoked プロパティがあり、スワイプ項目が呼び出された後に SwipeView がどのように動作するかを示します。このプロパティは、次の SwipeBehaviorOnInvoked 列挙要素のいずれかに設定する必要があります。

Auto は、表示モードではスワイプ項目が呼び出された後に SwipeView が閉じ、実行モードではスワイプ項目が呼び出された後も SwipeView が開いたままであることを示します。これは、SwipeItems.SwipeBehaviorOnInvoked プロパティの既定値です。
Close は、スワイプ項目が呼び出された後に SwipeView が閉じることを示します。
RemainOpen は、スワイプ項目が呼び出された後も SwipeView が開いたままであることを示します。

次の例は、スワイプ項目が呼び出された後も開いたままになるように構成された SwipeView を示しています。

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems SwipeBehaviorOnInvoked="RemainOpen">
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

カスタムのスワイプ項目

カスタムのスワイプ項目は、SwipeItemView 型で定義できます。 SwipeItemView クラスは ContentView クラスから派生し、次のプロパティを追加します。

ICommand 型の Command。スワイプ項目がタップされたときに実行されます。
CommandParameter: object 型、Command に渡されるパラメーター。

SwipeItemView クラスは、Command コマンドが実行された後、項目がタップされたときに発生する Invoked イベントも定義します。

次の例は、SwipeView の LeftItems コレクション内の SwipeItemView オブジェクトを示しています。

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItemView Command="{Binding CheckAnswerCommand}"
                           CommandParameter="{Binding Source={x:Reference resultEntry}, Path=Text}">
                <StackLayout Margin="10"
                             WidthRequest="300">
                    <Entry x:Name="resultEntry"
                           Placeholder="Enter answer"
                           HorizontalOptions="CenterAndExpand" />
                    <Label Text="Check"
                           FontAttributes="Bold"
                           HorizontalOptions="Center" />
                </StackLayout>
            </SwipeItemView>
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

この例では、SwipeItemView は、Entry と Label を含む StackLayout で構成されています。ユーザーが Entry に入力した後、残りの SwipeViewItem をタップすると、SwipeItemView.Command プロパティで定義された ICommand が実行されます。

プログラムによって SwipeView を開く/閉じる

SwipeView には、Open メソッドと Close メソッドが含まれており、それぞれプログラムによってスワイプ項目を開いたり閉じたりします。既定では、これらのメソッドは SwipeView を開いたり閉じたりしたときにアニメーション化します。

Open メソッドには、SwipeView が開かれる方向を指定するための OpenSwipeItem 引数が必要です。 OpenSwipeItem 列挙には 4 つの要素があります。

LeftItems は、SwipeView が左から開かれ、LeftItems コレクション内のスワイプ項目が表示されることを示します。
TopItems は、SwipeView が上から開かれ、TopItems コレクション内のスワイプ項目が表示されることを示します。
RightItems は、SwipeView が右から開かれ、RightItems コレクション内のスワイプ項目が表示されることを示します。
BottomItems は、SwipeView が下から開かれ、BottomItems コレクション内のスワイプ項目が表示されることを示します。

さらに、Open メソッドは、SwipeView を開いたときにアニメーション化するかどうかを定義するオプションの bool 引数も受け入れます。

swipeView という名前の SwipeView がある場合、次の例は、SwipeView を開いて、LeftItems コレクション内のスワイプ項目を表示する方法を示しています。

swipeView.Open(OpenSwipeItem.LeftItems);

swipeView は、Close メソッドで閉じることができます。

swipeView.Close();

Note

Close メソッドは、SwipeView を閉じるときにアニメーション化するかどうかを定義するオプションの bool 引数も受け入れます。

SwipeView を無効にする

アプリケーションは、コンテンツの項目のスワイプが有効な操作ではない状態になる場合があります。このような場合は、その IsEnabled プロパティを false に設定することで、SwipeView を無効にすることができます。これにより、ユーザーはコンテンツをスワイプしてスワイプ項目を表示できなくなります。

さらに、SwipeItem または SwipeItemView の Command プロパティを定義する場合、ICommand の CanExecute デリゲートを指定して、スワイプ項目を有効または無効にすることができます。

Xamarin.Forms SwipeView

SwipeView を作成する

スワイプ項目

スワイプの方向

スワイプのしきい値

スワイプ モード

スワイプ動作

カスタムのスワイプ項目

プログラムによって SwipeView を開く/閉じる

SwipeView を無効にする

関連リンク

その他のリソース

スワイプモード