スワイプ

[アーティクル]
06/02/2023

スワイプによるコマンド実行は、ユーザーがタッチ操作によってアプリ内の状態を変更することなく、一般的なメニューアクションに簡単にアクセスできるようにするコンテキストメニューのアクセラレータです。

実行と表示の淡色テーマ

これは適切なコントロールですか?

スワイプによるコマンド実行によって、領域が節約されます。これは、ユーザーが複数の項目に対して同じ操作をすばやく連続して実行できる場合に役立ちます。ページ内で完全なポップアップや状態の変更を必要としないアイテムに対して「クイックアクション」を提供します。

潜在的に多くの項目のグループで、各項目にユーザーが定期的に実行する必要がある操作が 1 ～ 3 つある場合は、スワイプによるコマンド実行を使用してください。これには次のような操作が含まれますが、これに限定されません。

削除中
マークやアーカイブ
保存またはダウンロード
返信

スワイプの動作の仕組み

UWP のスワイプによるコマンド実行には、表示と実行の 2 つのモードがあります。さらに、上、下、左、右の 4 つのスワイプの方向もサポートされています。

表示モード

表示モードでは、ユーザーが項目をスワイプすると、1 つまたは複数のコマンドのメニューが開きます。ユーザーがコマンドを実行するには、コマンドを明示的にタップする必要があります。ユーザーが項目をスワイプして、指を離すと、コマンドを選択するか、メニューを再び閉じるまで、メニューを開いたままになります。メニューが閉じられるのは、端へスワイプしたとき、別の場所をタップしたとき、または開いたスワイプ項目が画面に表示されなくなるまでスクロールしたときです。

スワイプによる表示

表示モードは、より安全で、より多用途なスワイプモードであり、ほとんどの種類のメニュー操作に使用できます。ただし、削除など、潜在的に破壊的な操作もあります。

ユーザーが表示モードの開いた安静状態で表示されているメニューオプションの 1 つを選択すると、その項目のコマンドが呼び出され、スワイプコントロールが閉じられます。

実行モード

実行モードでは、ユーザーは項目をスワイプして開き、その 1 回のスワイプで 1 つのコマンドを表示して実行します。ユーザーがしきい値を超えるまでスワイプする前に、スワイプしている項目から指を離した場合、メニューは閉じ、コマンドは実行されません。しきい値を超えてスワイプした後、項目から指を離すと、コマンドがすぐに実行されます。

スワイプして実行

しきい値に達した後もユーザーが指を離さなかった場合や、スワイプ項目をプルして再び閉じた場合は、コマンドは実行されず、その項目に対して操作は実行されません。

実行モードでは、項目をスワイプする際に、色やラベルの向きによって、より多くの視覚的フィードバックを提供します。

実行モードは、ユーザーが実行する操作が最も一般的なときに使用するのに最適です。

これは、項目を削除するなどのより破壊的な操作についても使用できます。ただし、実行にはある方向にスワイプする操作だけですむ点に留意してください。表示する場合は、明示的にボタンをクリックする必要があるのとは対照的です。

スワイプの方向

スワイプはすべての基本的な方向 (上、下、左、右) で機能します。各スワイプ方向には、独自のスワイプ項目またはコンテンツを保持できますが、1 つのスワイプ可能な要素について設定できる方向のインスタンスは一度に 1 つだけです。

たとえば、同じ SwipeControl で 2 つの LeftItems を定義することはできません。

すべきこととやってはいけないこと

FlipView やハブでスワイプを使用しないでください。組み合わせによっては、スワイプの方向が競合するために、ユーザーの混乱を招く可能性があります。
水平方向ナビゲーションと水平方向のスワイプ、または垂直方向ナビゲーションと垂直方向のスワイプを組み合わせないでください。
ユーザーがスワイプしている対象が同じアクションであり、スワイプできるすべての関連する項目で一貫していることを確認します。
ユーザーが実行する主なアクションではスワイプを使用します。
同じアクションが何度も繰り返される項目ではスワイプを使用します。
幅の広い項目では水平方向のスワイプを使用し、高さのある項目では垂直方向のスワイプを使用します。
短く、簡潔なテキストラベルを使用します。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

UWP アプリ用の SwipeControl は、Windows UI ライブラリ 2 の一部として含まれています。インストール手順などについて詳しくは、「Windows UI Library (Windows UI ライブラリ)」をご覧ください。このコントロールの API は、 Windows.UI.Xaml.Controls (UWP) 名前空間と Microsoft.UI.Xaml.Controls (WinUI) 名前空間の両方に存在します。

UWP API:SwipeControl、 SwipeItem、 ListView クラス
WinUI 2 Apis:SwipeControl、 SwipeItem
WinUI 2 ギャラリーアプリを開き、「SwipeControl の動作」を参照してください。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイル、テンプレート、および機能を取得することをお勧めします。

WinUI 2 でこの記事のコードを使用するには、XAML のエイリアスを使って (ここでは muxc を使用)、プロジェクトに含まれる Windows UI ライブラリ API を表します。詳細については、「WinUI 2 の概要」を参照してください。

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:SwipeControl />
<muxc:SwipeItem />

スワイプコマンドを作成する

重要な API: SwipeControl、SwipeItem、ListView class

WinUI 3 ギャラリーアプリを開き、「SwipeControl の動作」を参照してください。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

スワイプコマンドでは、2 つのコンポーネントを定義する必要があります。

コンテンツを取り囲む SwipeControl。 ListView などコレクションに含まれる場合は、DataTemplate 内にあります。
スワイプコントロールの方向コンテナー内に配置された 1 つまたは複数の SwipeItem オブジェクトであるスワイプメニュー項目: LeftItems、RightItems、TopItems、または BottomItems

スワイプコンテンツは、インラインで配置するか、ページまたはアプリの [リソース] セクションで定義することができます。

いくつかのテキストを囲む SwipeControl の単純な例を以下に示します。スワイプコマンドを作成するために必要な XAML 要素の階層構造が表示されます。

<SwipeControl HorizontalAlignment="Center" VerticalAlignment="Center">
    <SwipeControl.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Pin">
                <SwipeItem.IconSource>
                    <SymbolIconSource Symbol="Pin"/>
                </SwipeItem.IconSource>
            </SwipeItem>
        </SwipeItems>
    </SwipeControl.LeftItems>

     <!-- Swipeable content -->
    <Border Width="180" Height="44" BorderBrush="Black" BorderThickness="2">
        <TextBlock Text="Swipe to Pin" Margin="4,8,0,0"/>
    </Border>
</SwipeControl>

ここでは、通常、スワイプコマンドをリスト内で使用する方法のより具体的な例について説明します。この例では、実行モードを使用する削除コマンド、および表示モードを使用するその他のコマンドのメニューを設定します。どちらのコマンドのセットも、ページの [リソース] セクションで定義されます。スワイプコマンドを ListView の項目に適用します。

最初に、コマンドを表すスワイプの項目をページレベルのリソースとして作成します。 SwipeItem では IconSource がそのアイコンとして使用されます。リソースとしてのアイコンも作成します。

<Page.Resources>
    <SymbolIconSource x:Key="ReplyIcon" Symbol="MailReply"/>
    <SymbolIconSource x:Key="DeleteIcon" Symbol="Delete"/>
    <SymbolIconSource x:Key="PinIcon" Symbol="Pin"/>

    <SwipeItems x:Key="RevealOptions" Mode="Reveal">
        <SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"/>
        <SwipeItem Text="Pin" IconSource="{StaticResource PinIcon}"/>
    </SwipeItems>

    <SwipeItems x:Key="ExecuteDelete" Mode="Execute">
        <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
                   Background="Red"/>
    </SwipeItems>
</Page.Resources>

スワイプコンテンツ内のメニュー項目は、短く、簡潔なテキストラベルにしてください。これらの操作は、ユーザーが短時間で複数回実行するようなプライマリ操作である必要があります。

コレクションや ListView で動作するようにスワイプコマンドを設定する方法は、1 つのスワイプコマンド (上の例) を定義する場合とまったく同じですが、DataTemplate で SwipeControl を定義する点が異なります。このため、これはコレクションの各項目に適用されます。

SwipeControl がその項目の DataTemplate で適用されている ListView を以下に示します。 LeftItems プロパティと RightItems プロパティは、リソースとして作成したスワイプ項目を参照します。

<ListView x:Name="sampleList" Width="300">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <SwipeControl x:Name="ListViewSwipeContainer"
                          LeftItems="{StaticResource RevealOptions}"
                          RightItems="{StaticResource ExecuteDelete}"
                          Height="60">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{x:Bind}" FontSize="18"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit..." FontSize="12"/>
                    </StackPanel>
                </StackPanel>
            </SwipeControl>
        </DataTemplate>
    </ListView.ItemTemplate>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

呼び出されたスワイプコマンドの処理

スワイプコマンドを処理するには、その Invoked イベントを処理します。 (ユーザーがコマンドを呼び出す方法の詳細については、この記事の前半にある「スワイプの動作の仕組み」セクションをご覧ください。) 通常、スワイプコマンドは、ListView または一覧のようなシナリオで使用されます。その場合は、コマンドが呼び出されるた場合、そのスワイプされた項目で操作を実行する必要があります。

以前に作成した削除スワイプ項目で Invoked イベントを処理する方法を以下に示します。

<SwipeItems x:Key="ExecuteDelete" Mode="Execute">
    <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
               Background="Red" Invoked="Delete_Invoked"/>
</SwipeItems>

データ項目は、SwipeControl の DataContext です。コードで、スワイプされた項目にアクセスするには、以下に示すようにイベント引数から SwipeControl.DataContext プロパティを取得します。

 private void Delete_Invoked(SwipeItem sender, SwipeItemInvokedEventArgs args)
 {
     sampleList.Items.Remove(args.SwipeControl.DataContext);
 }

注意

ここでは、わかりやすくするために項目は ListView.Items コレクションに直接追加されており、同じ方法で削除も実行されます。代わりに、より一般的な方法として ListView.ItemsSource をコレクションに設定した場合は、ソースコレクションから項目を削除する必要があります。

この特定のインスタンスで、リストから項目が削除されてりうため、最終的な表示状態は重要ではありません。ただし、操作を実行し、スワイプを再び折りたたむことのみが必要である場合は、BehaviorOnInvoked プロパティを SwipeBehaviorOnInvoked 列挙値のいずれかに設定できます。

Auto
- 実行モードでは、開いたスワイプ項目は呼び出されても開いたままになります。
- 表示モードでは、開いたスワイプ項目は呼び出されると折りたたまれます。
閉じる
- 項目が呼び出されると、スワイプコントロールは常に折りたたまれ、モードに関係なく通常に戻ります。
RemainOpen
- 項目が呼び出されると、スワイプコントロールはモードに関係なく常に開いたままになります。

ここでは、返信スワイプ項目は呼び出された後に閉じるように設定されます。

<SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"
           Invoked="Reply_Invoked"
           BehaviorOnInvoked = "Close"/>

サンプルコードを入手する

WinUI ギャラリーのサンプル - すべての XAML コントロールを対話型形式で表示します。

スワイプ

これは適切なコントロールですか?

スワイプの動作の仕組み

表示モード

実行モード

スワイプの方向

すべきこととやってはいけないこと

UWP と WinUI 2

スワイプ コマンドを作成する

呼び出されたスワイプ コマンドの処理

サンプル コードを入手する

関連記事

フィードバック

その他のリソース

スワイプコマンドを作成する

呼び出されたスワイプコマンドの処理

サンプルコードを入手する