Бөлісу құралы:

Проведите пальцем

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

Выполнить и Раскрыть со светлой темой

Это правильный контроль?

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

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

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

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

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

Режим показа

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

Проведите, чтобы открыть

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

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

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

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

Сдвиг для выполнения

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

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

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

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

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

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

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

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

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

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

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

Значок коллекции WinUI 3 Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из 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"/>
  • Last updated on