スワイプSwipe

スワイプによるコマンド実行は、ユーザーがタッチ操作によってアプリ内の状態を変更することなく、一般的なメニュー アクションに簡単にアクセスできるようにするコンテキスト メニューのアクセラレータです。Swipe commanding is an accelerator for context menus that lets users easily access common menu actions by touch, without needing to change states within the app.

重要な API: SwipeControlSwipeItemListView classImportant APIs: SwipeControl, SwipeItem, ListView class

実行と表示の淡色テーマ

適切なコントロールの選択Is this the right control?

スワイプによるコマンド実行によって、領域が節約されます。Swipe commanding saves space. これは、ユーザーが複数の項目に対して同じ操作をすばやく連続して実行できる場合に役立ちます。It's useful in situations where the user may perform the same operation on multiple items in quick succession. ページ内で完全なポップアップや状態の変更を必要としないアイテムに対して「クイック アクション」を提供します。And it provides "quick actions" on items that don't need a full popup or state change within the page.

潜在的に多くの項目のグループで、各項目にユーザーが定期的に実行する必要がある操作が 1 ~ 3 つある場合は、スワイプによるコマンド実行を使用してください。You should use swipe commanding when you have a potentially large group of items, and each item has 1-3 actions that a user may want to perform regularly. これには次のような操作が含まれますが、これに限定されません。These actions may include, but are not limited to:

  • 削除Deleting
  • マークやアーカイブMarking or archiving
  • 保存またはダウンロードSaving or downloading
  • 返信Replying

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、SwipeControl の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the SwipeControl in action.

ビデオの概要Video summary

スワイプの動作の仕組みHow does Swipe work?

UWP のスワイプによるコマンド実行には、表示実行 の 2 つのモードがあります。UWP swipe commanding has two modes: Reveal and Execute. さらに、上、下、左、右の 4 つのスワイプの方向もサポートされています。It also supports four different swipe directions: up, down, left, and right.

表示モードReveal mode

表示モードでは、ユーザーが項目をスワイプすると、1 つまたは複数のコマンドのメニューが開きます。ユーザーがコマンドを実行するには、コマンドを明示的にタップする必要があります。In Reveal mode, the user swipes an item to open a menu of one or more commands and must explicitly tap a command to execute it. ユーザーが項目をスワイプして、指を離すと、コマンドを選択するか、メニューを再び閉じるまで、メニューを開いたままになります。メニューが閉じられるのは、端へスワイプしたとき、別の場所をタップしたとき、または開いたスワイプ項目が画面に表示されなくなるまでスクロールしたときです。When the user swipes and releases an item, the menu remains open until either a command is selected, or the menu is closed again through swiping back, tapping off, or scrolling the opened swipe item off the screen.

スワイプによる表示

表示モードは、より安全で、より多用途なスワイプ モードであり、ほとんどの種類のメニュー操作に使用できます。ただし、削除など、潜在的に破壊的な操作もあります。Reveal mode is a safer, more versatile swipe mode, and can be used for most types of menu actions, even potentially destructive actions, such as deletion.

ユーザーが表示モードの開いた安静状態で表示されているメニュー オプションの 1 つを選択すると、その項目のコマンドが呼び出され、スワイプ コントロールが閉じられます。When the user selects one of the menu options shown in the reveal's open and resting state, the command for that item is invoked and the swipe control is closed.

実行モードExecute mode

実行モードでは、ユーザーは項目をスワイプして開き、その 1 回のスワイプで 1 つのコマンドを表示して実行します。In Execute mode, the user swipes an item open to reveal and execute a single command with that one swipe. ユーザーがしきい値を超えるまでスワイプする前に、スワイプしている項目から指を離した場合、メニューは閉じ、コマンドは実行されません。If the user releases the item being swiped before they swipe past a threshold, the menu closes and the command is not executed. しきい値を超えてスワイプした後、項目から指を離すと、コマンドがすぐに実行されます。If the user swipes past the threshold and then releases the item, the command is executed immediately.

スワイプして実行

しきい値に達した後もユーザーが指を離さなかった場合や、スワイプ項目をプルして再び閉じた場合は、コマンドは実行されず、その項目に対して操作は実行されません。If the user does not release their finger after the threshold is reached, and pulls the swipe item closed again, the command is not executed and no action is performed on the item.

実行モードでは、項目をスワイプする際に、色やラベルの向きによって、より多くの視覚的フィードバックを提供します。Execute mode provides more visual feedback through color and label orientation while an item is being swiped.

実行モードは、ユーザーが実行する操作が最も一般的なときに使用するのに最適です。Execute is best used when the action the user is performing is most common.

これは、項目を削除するなどのより破壊的な操作についても使用できます。It may also be used for more destructive actions like deleting an item. ただし、実行にはある方向にスワイプする操作だけですむ点に留意してください。表示する場合は、明示的にボタンをクリックする必要があるのとは対照的です。However, keep in mind that Execute requires only one action of swiping in a direction, as opposed to Reveal, which requires the user to explicitly click on a button.

スワイプの方向Swipe directions

スワイプはすべての基本的な方向 (上、下、左、右) で機能します。Swipe works in all cardinal directions: up, down, left, and right. 各スワイプ方向には、独自のスワイプ項目またはコンテンツを保持できますが、1 つのスワイプ可能な要素について設定できる方向のインスタンスは一度に 1 つだけです。Each swipe direction can hold its own swipe items or content, but only one instance of a direction can be set at a time on a single swipe-able element.

たとえば、同じ SwipeControl で 2 つの LeftItems を定義することはできません。For example, you cannot have two LeftItems definitions on the same SwipeControl.

スワイプ コマンドを作成する方法How to create a Swipe command

スワイプ コマンドでは、2 つのコンポーネントを定義する必要があります。Swipe commands have two components that you need to define:

  • コンテンツを取り囲む SwipeControlThe SwipeControl, which wraps around your content. ListView などコレクションに含まれる場合は、DataTemplate 内にあります。In a collection, such as a ListView, this sits within your DataTemplate.
  • スワイプ コントロールの方向コンテナー内に配置された 1 つまたは複数の SwipeItem オブジェクトであるスワイプ メニュー項目: LeftItemsRightItemsTopItems、または BottomItemsThe swipe menu items, which is one or more SwipeItem objects placed in the swipe control's directional containers: LeftItems, RightItems, TopItems, or BottomItems

スワイプ コンテンツは、インラインで配置するか、ページまたはアプリの [リソース] セクションで定義することができます。Swipe content can be placed inline, or defined in the Resources section of your page or app.

いくつかのテキストを囲む SwipeControl の単純な例を以下に示します。Here's a simple example of a SwipeControl wrapped around some text. スワイプ コマンドを作成するために必要な XAML 要素の階層構造が表示されます。It shows the hierarchy of XAML elements required to create a swipe command.

<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>

ここでは、通常、スワイプ コマンドをリスト内で使用する方法のより具体的な例について説明します。Now we'll take a look at a more complete example of how you would typically use swipe commands in a list. この例では、実行モードを使用する削除コマンド、および表示モードを使用するその他のコマンドのメニューを設定します。In this example, you'll set up a delete command that uses Execute mode, and a menu of other commands that uses Reveal mode. どちらのコマンドのセットも、ページの [リソース] セクションで定義されます。Both sets of commands are defined in the Resources section of the page. スワイプ コマンドを ListView の項目に適用します。You'll apply the swipe commands to the items in a ListView.

最初に、コマンドを表すスワイプの項目をページ レベルのリソースとして作成します。First, create the swipe items, which represent the commands, as page level resources. SwipeItem では IconSource がそのアイコンとして使用されます。SwipeItem uses an IconSource as its icon. リソースとしてのアイコンも作成します。Create the icons as resources, too.

<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>

スワイプ コンテンツ内のメニュー項目は、短く、簡潔なテキスト ラベルにしてください。Remember to keep the menu items in your swipe content to short, concise text labels. これらの操作は、ユーザーが短時間で複数回実行するようなプライマリ操作である必要があります。These actions should be the primary ones that a user may want to perform multiple times over a short period.

コレクションや ListView で動作するようにスワイプ コマンドを設定する方法は、1 つのスワイプ コマンド (上の例) を定義する場合とまったく同じですが、DataTemplate で SwipeControl を定義する点が異なります。このため、これはコレクションの各項目に適用されます。Setting up a swipe command to work in a collection or ListView is exactly the same as defining a single swipe command (shown previously), except you define your SwipeControl in a DataTemplate so it's applied to each item in the collection.

SwipeControl がその項目の DataTemplate で適用されている ListView を以下に示します。Here's a ListView with the SwipeControl applied in its item DataTemplate. LeftItems プロパティと RightItems プロパティは、リソースとして作成したスワイプ項目を参照します。The LeftItems and RightItems properties reference the swipe items that you created as resources.

<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>

呼び出されたスワイプ コマンドの処理Handle an invoked swipe command

スワイプ コマンドを処理するには、その Invoked イベントを処理します。To act on a swipe command, you handle its Invoked event. (ユーザーがコマンドを呼び出す方法の詳細については、この記事の前半にある「スワイプの動作の仕組み」セクションをご覧ください。) 通常、スワイプ コマンドは、ListView または一覧のようなシナリオで使用されます。(For more info about a how a user can invoke a command, review the How does swipe work? section earlier in this article.) Typically, a swipe command is in a ListView or list-like scenario. その場合は、コマンドが呼び出されるた場合、そのスワイプされた項目で操作を実行する必要があります。In that case, when a command is invoked, you want to perform an action on that swiped item.

以前に作成した_削除_スワイプ項目で Invoked イベントを処理する方法を以下に示します。Here's how to handle the Invoked event on the delete swipe item you created previously.

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

データ項目は、SwipeControl の DataContext です。The data item is the DataContext of the SwipeControl. コードで、スワイプされた項目にアクセスするには、以下に示すようにイベント引数から SwipeControl.DataContext プロパティを取得します。In your code, you can access the item that was swiped by getting the SwipeControl.DataContext property from the event args, as shown here.

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

注意

ここでは、わかりやすくするために項目は ListView.Items コレクションに直接追加されており、同じ方法で削除も実行されます。Here, the items were added directly to the ListView.Items collection for simplicity, so the item is also deleted the same way. 代わりに、より一般的な方法として ListView.ItemsSource をコレクションに設定した場合は、ソース コレクションから項目を削除する必要があります。If you instead set the ListView.ItemsSource to a collection, which is more typical, you need to delete the item from the source collection.

この特定のインスタンスで、リストから項目が削除されてりうため、最終的な表示状態は重要ではありません。In this particular instance, you removed the item from the list, so the final visual state of the swiped item isn't important. ただし、操作を実行し、スワイプを再び折りたたむことのみが必要である場合は、BehaviorOnInvoked プロパティを SwipeBehaviorOnInvoked 列挙値のいずれかに設定できます。However, in situations where you simply want to perform an action and then have the swipe collapse again, you can set the BehaviorOnInvoked property one of the SwipeBehaviorOnInvoked enum values.

  • 自動Auto
    • 実行モードでは、開いたスワイプ項目は呼び出されても開いたままになります。In Execute mode, the opened swipe item will remain open when invoked.
    • 表示モードでは、開いたスワイプ項目は呼び出されると折りたたまれます。In Reveal mode, the opened swipe item will collapse when invoked.
  • 閉じるClose
    • 項目が呼び出されると、スワイプ コントロールは常に折りたたまれ、モードに関係なく通常に戻ります。When the item is invoked, the swipe control will always collapse and return to normal, regardless of the mode.
  • RemainOpenRemainOpen
    • 項目が呼び出されると、スワイプ コントロールはモードに関係なく常に開いたままになります。When the item is invoked, the swipe control will always stay open, regardless of the mode.

ここでは、_返信_スワイプ項目は呼び出された後に閉じるように設定されます。Here, a reply swipe item is set to close after its invoked.

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

推奨と非推奨Dos and don'ts

  • FlipView、ハブ、ピボットではスワイプを使用しないでください。Don't use swipe in FlipViews, Hubs or Pivots. 組み合わせによっては、スワイプの方向が競合するために、ユーザーの混乱を招く可能性があります。The combination may be confusing for the user because of conflicting swipe directions.
  • 水平方向ナビゲーションと水平方向のスワイプ、または垂直方向ナビゲーションと垂直方向のスワイプを組み合わせないでください。Don't combine horizontal swipe with horizontal navigation, or vertical swipe with vertical navigation.
  • ユーザーがスワイプしている対象が同じアクションであり、スワイプできるすべての関連する項目で一貫していることを確認します。Do make sure what the user is swiping is the same action, and is consistent across all related items that can be swiped.
  • ユーザーが実行する主なアクションではスワイプを使用します。Do use swipe for the main actions a user will want to perform.
  • 同じアクションが何度も繰り返される項目ではスワイプを使用します。Do use swipe on items where the same action is repeated many times.
  • 幅の広い項目では水平方向のスワイプを使用し、高さのある項目では垂直方向のスワイプを使用します。Do use horizontal swiping on wider items, and vertical swiping on taller items.
  • 短く、簡潔なテキスト ラベルを使用します。Do use short, concise text labels.

サンプル コードを入手するGet the sample code