Прокрутка

  • Статья

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

Execute и Reveal в светлой теме

Выбор правильного элемента управления

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

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

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

Как работают команды прокрутки?

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

Режим показа

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

Сдвиг для показа

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

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

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

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

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

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

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

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

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

Направления сдвига

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

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

Рекомендации

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

UWP и WinUI 2

Важно!

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

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

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

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

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

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

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

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

Откройте приложение коллекции WinUI 3 и просмотрите Элемент Управления SwipeControl в действии.

Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций 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"/>

Получение примера кода