Swipe

Смахивающие команды — это ускоритель действий в контекстных меню, который позволяет пользователям устройств с сенсорным вводом легко получать доступ к частым действиям, не изменяя состояния в приложении.

Это правильный элемент управления?

Управление свайпом экономит место. Они полезны в тех случаях, когда пользователю нужно выполнить одно и то же действие с несколькими элементами подряд. Также с помощью этих команд можно выполнять "быстрые действия" с элементами, для которых не требуется полное всплывающее окно или изменение состояния, в рамках одной страницы.

Такие команды следует использовать, если существует потенциально крупная группа элементов, каждый из которых предлагает 1–3 действия, которые пользователь будет выполнять с ними регулярно. Сюда могут относиться, среди прочего:

• Удаление
• установка метки или архивация;
• сохранение или скачивание;
• Ответ

Как работает свайп?

Команда прокрутки UWP имеет два режима: показать и выполнить. Он также поддерживает четыре разных направления прокрутки: вверх, вниз, влево и вправо.

Режим показа

В режиме раскрытия пользователь сдвигает элемент, чтобы открыть меню с одной или несколькими командами и должен явно нажать на команду, чтобы выполнить ее. Когда пользователь сдвигает элемент и отпускает его, меню остается открытым, пока не будет выбрана команда или меню снова не закроется при сдвиге в обратную сторону, нажатии вне элемента или прокрутке открытого элемента за пределы экрана.

Режим раскрытия — это более безопасный и универсальный режим, который можно использовать для большинства типов действий в меню, даже для действий с возможными разрушительными последствиями, такими как удаление.

При выборе одного из вариантов меню, отображаемых в режиме показа и покоя, вызывается команда для этого элемента, и элемент управления прокрутки закрывается.

Режим выполнения

В режиме выполнения пользователь смахивает элемент, чтобы отобразить и выполнить единственную команду одним движением. Если пользователь отпускает сдвигаемый элемент до того, как он пересечёт порог, меню закрывается, и команда не выполняется. Если пользователь сдвигает элемент за пороговое значение и затем отпускает элемент, команда немедленно выполняется.

Если пользователь не отпускает палец после достижения порогового значения и сдвигает элемент обратно, команда не выполняется и действие над элементом не производится.

Режим выполнения поддерживает дополнительную визуальную индикацию путем изменения цвета и ориентации текстовой метки во время перетаскивания элемента.

Режим выполнения лучше использовать для наиболее распространенного действия пользователя.

Также его можно применить для более деструктивных действий, например, для удаления элемента. Однако, имейте в виду, что для режима выполнения необходимо выполнить только одно действие сдвига в одном направлении, в отличие от режима показа, когда требуется явно нажать кнопку.

Направления свайпа

Свайп работает во всех кардинальных направлениях: вверх, вниз, влево и вправо. Каждому направлению сдвига можно назначить собственные элементы или содержимое, однако на одном сдвигаемом элементе можно установить только одно направление одновременно.

Например, в одном и том же SwipeControl не может быть два определения LeftItems.

Полезные советы

• Не используйте проведение пальцем в элементах FlipView и Hub. Такое сочетание может запутать пользователя из-за противоречивых направлений свайпа.
• Не объединяйте горизонтальный сдвиг с горизонтальной навигацией и вертикальный сдвиг с вертикальной навигацией.
• Убедитесь, что пользователь совершает одно и то же действие при сдвиге, и оно выполняется единообразно для всех связанных элементов, которые могут быть сдвинуты.
• Используйте свайп для действий, которые пользователь захочет выполнить.
• Используйте свайп для элементов, для которых одно и то же действие повторяется многократно.
• Используйте горизонтальную прокрутку для широких элементов и вертикальную прокрутку для высоких элементов.
• Используйте краткие и точные текстовые метки.

Создание команды прокрутки

• Важные API: SwipeControl, SwipeItem, Класс ListView

Откройте приложение WinUI 3 Gallery и посмотрите на SwipeControl в действии

Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления, возможностей и функциональности WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

Команды сдвига содержат два компонента, которые необходимо определить:

• SwipeControl служит оболочкой для содержимого. В коллекции, например в ListView, этот компонент находится в пределах элемента DataTemplate.
• Элементы меню прокрутки, которые являются одним или несколькими объектами 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 выполняется точно так же, как и определение отдельной команды свайпа (как показано ранее), за исключением того, что ваш SwipeControl определяется в DataTemplate, чтобы он применялся к каждому элементу в коллекции.

Ниже приведен элемент управления ListView с применением SwipeControl в его шаблоне данных DataTemplate. Свойства 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 для созданного ранее элемента сдвига delete (удалить).

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

Элемент данных размещается в DataContext элемента управления SwipeControl. В коде можно получить доступ к элементу, который был сдвинут, получив свойство SwipeControl.DataContext из аргументов события, как показано ниже.

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

Примечание.

Здесь элементы были добавлены непосредственно к коллекции ListView.Items для простоты, чтобы удаление элемента выполнялось таким же образом. Если же элемент ListView.ItemsSource сохранен в коллекции, что происходит чаще, необходимо удалить элемент из исходной коллекции.

В этом конкретном случае происходит удаление элемента из списка, поэтому окончательное визуальное состояние сдвинутого элемента не является важным. Однако в ситуациях, когда вы просто хотите выполнить действие и затем снова свернуть жест сдвига, можно задать свойству BehaviorOnInvoked одно из значений перечисления SwipeBehaviorOnInvoked.

• Автоматически
  • В режиме выполнения открытый элемент прокрутки останется открытым при его вызове.
  • В режиме показа открытый элемент прокрутки будет свернут при его вызове.
• Закрыть
  • При вызове элемента управления смахиванием, он всегда будет сворачиваться и возвращаться в стандартное состояние независимо от режима.
• RemainOpen (оставаться открытым)
  • При вызове элемента управления смахиванием он всегда будет оставаться открытым, независимо от режима.

В примере ниже элемент прокрутки reply (ответ) настроен на закрытие после его вызова.

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

UWP и WinUI 2

Внимание

Сведения и примеры в этой статье оптимизированы для приложений, использующих пакет SDK для приложений Windows и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. См. справочник по API UWP для конкретных сведений и примеров платформы.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

Приложение SwipeControl для приложений UWP входит в состав WinUI 2. Дополнительные сведения, включая инструкции по установке, см. в статье WinUI 2. API для этого элемента управления существуют в пространствах имен Windows.UI.Xaml.Controls (UWP) и Microsoft.UI.Xaml.Controls (WinUI).

• API UWP:SwipeControl, SwipeItem, Класс ListView
• API WinUI 2:SwipeControl, SwipeItem
• Откройте приложение WinUI 2 Gallery и посмотрите, как SwipeControl работает в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили, шаблоны и функции для всех элементов управления.

Чтобы использовать код в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc), чтобы представить API библиотеки пользовательского интерфейса Windows, включенные в проект. Дополнительные сведения см. в статье "Начало работы с WinUI 2 ".

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

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

Связанные статьи

• Представления списка и сетки
• Контейнеры и шаблоны элементов
• Потяните вниз для обновления