Жесты в .NET MAUI. Жест смахивания (swipe)

Жест смахивания (swipe) в .NET MAUI используется чтобы показать или скрыть спрятанные панели, например, в списке писем или задач, чтобы удалить элемент или, наоборот — посмотреть подробные сведения о нем. Применение этого жеста в мобильных приложениях может не только добавить интерактивности в ваше приложение, но и сэкономить пространство экрана мобильного устройства, которое определенно намного меньше, чем на ноутбуке или стационарном компьютере.

Жест смахивания (swipe) в .NET MAUI

Свойства и события класса SwipeGestureRecognizer

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

При распознавании жеста смахивания в генерируется событие

public class SwipedEventArgs : EventArgs

Воспользуемся этими свойствами и событием в приложении .NET MAUI

Распознавание жеста смахивания (swipe) в .NET MAUI

Создадим новое приложение .NET MAUI  изменим код страницы MainPage следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp25.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit">
                <Image.GestureRecognizers>
                    <SwipeGestureRecognizer Direction="Down" Threshold="5" Swiped="SwipeGestureRecognizer_Swiped"></SwipeGestureRecognizer>
                    <SwipeGestureRecognizer Direction="Left" Threshold="5" Swiped="SwipeGestureRecognizer_Swiped"></SwipeGestureRecognizer>
                    <SwipeGestureRecognizer Direction="Right" Threshold="5" Swiped="SwipeGestureRecognizer_Swiped"></SwipeGestureRecognizer>
                    <SwipeGestureRecognizer Direction="Up" Threshold="5" Swiped="SwipeGestureRecognizer_Swiped"></SwipeGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>

            <Label 
                x:Name="SwipeLabel"
                Text="Смахни картинку!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Здесь мы добавили в список GestureRecognizers элемента Image четыре объекта типа SwipeGestureRecognizer у каждого из которых определили один и тот же обработчик события Swiped, который выглядит следующим образом:

private void SwipeGestureRecognizer_Swiped(object sender, SwipedEventArgs e)
{
    switch (e.Direction) 
    {
        case SwipeDirection.Right: 
            {
                SwipeLabel.Text = "Смахивание ВПРАВО";
                break; 
            }
        case SwipeDirection.Left: 
            {
                SwipeLabel.Text = "Смахивание ВЛЕВО";
                break; 
            }
        case SwipeDirection.Up: 
            {
                SwipeLabel.Text = "Смахивание ВВЕРХ";
                break; 
            }
        case SwipeDirection.Down: 
            {
                SwipeLabel.Text = "Смахивание ВНИЗ";
                break; 
            }
    }  
}

То есть, при смахивании в любую сторону мы будем виде соответствующую надпись в метке SwipeLabel. Как только вы запустите приложение и проведете пальцем по картинке, то увидите, например, вот такую надпись:

Жест смахивания (swipe): Использование компонента SwipeView

Используя SwipeGestureRecognizer, мы просто распознаем жест смахивания, при этом сам по себе SwipeGestureRecognizer не добавляет никакой анимации или дополнительных визуальных компонентов к элементу для которого он определен. Компонент .NET MAUI SwipeView — специальный элемент XAML, который выступает в качестве контейнера для элемента и добавляет специальное контекстное меню, которое становится видимым при распознавании жеста прокрутки.

Компонент SwipeView предоставляет нам для работы следующие свойства:

Для каждого элемента в списке SwipeItems можно определить следующие свойства:

Рассмотрим пример использования SwipeView в нашем приложении.

Для того, чтобы продемонстрировать работу компонента, добавьте в папку Resources/Images два любые картинки, которые будут выступать в качестве иконок для пунктов меню. Теперь измените XAML-код страницы MainPage.xaml следующим образом:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp25.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <SwipeView>
                <SwipeView.LeftItems>
                    <SwipeItem Text="Help" IconImageSource="help_32px.png"></SwipeItem>
                </SwipeView.LeftItems>
                <SwipeView.RightItems>
                    <SwipeItem Text="Add" IconImageSource="plus_math_32px.png"></SwipeItem>
                </SwipeView.RightItems>
                <Image
                    Source="dotnet_bot.png"
                    HeightRequest="185"
                    Aspect="AspectFit">
                </Image>
            </SwipeView>


            <Label 
                x:Name="SwipeLabel"
                Text="Смахни картинку!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Здесь мы «обернули» картинку Image в компонент SwipeView:

<SwipeView>
    ....
    <Image
       Source="dotnet_bot.png"
       ...            
    </Image>
</SwipeView>

и добавили два элемента меню: первый — при смахивании картинки влево:

<SwipeView.LeftItems>
    <SwipeItem Text="Help" IconImageSource="help_32px.png"></SwipeItem>
</SwipeView.LeftItems>

второй — при смахивании картинки вправо:

<SwipeView.RightItems>
    <SwipeItem Text="Add" IconImageSource="plus_math_32px.png"></SwipeItem>
</SwipeView.RightItems>

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

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

• SwipeStarted вызывается при начале выполнения жеста. Аргумент события SwipeStartedEventArgs содержит свойство SwipeDirection (см. описание выше).
• SwipeChanging вызывается при перемещении элемента. Аргумент события SwipeChangingEventArgs содержит свойство SwipeDirection и свойство Offset типа double(на какое расстояние сдвинут элемент).
• SwipeEnded вызывается при завершении смахивания. Аргумент события SwipeEndedEventArgs содержит свойство SwipeDirection и IsOpen свойство типа bool.

Итого

Жест смахивания (swipe) в .NET MAUI часто используется чтобы показать или скрыть спрятанные панели. Для использования этого жеста в своих приложениях, мы можем воспользоваться компонентом SwipeGestureRecognizer для простого распознавания жеста смахивания и выполнения каких-либо действий в зависимости от направления смахивания. Или же использовать контейнер SwipeView, который позволяет создавать скрытые панели с элементами меню.