Rozpoznawanie gestu przesuwania

Wieloplatformowy interfejs użytkownika aplikacji platformy .NET (.NET MAUI) wykrywa ruch palców wokół ekranu i może służyć do zastosowania tego ruchu do zawartości. Typowym scenariuszem gestu panowania jest przesuwanie obrazu w poziomie i w pionie, dzięki czemu można wyświetlić całą zawartość obrazu, gdy jest ona wyświetlana w widoku mniejszym niż wymiary obrazu. Jest to realizowane przez przeniesienie obrazu w okienku viewport.

W programie .NET MAUI funkcja rozpoznawania gestów pan jest dostarczana przez klasę PanGestureRecognizer . Ta klasa definiuje TouchPoints właściwość typu int, która reprezentuje liczbę punktów dotykowych w gestie. Wartość domyślna tej właściwości to 1. Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany.

Klasa PanGestureRecognizer definiuje PanUpdated również zdarzenie, które jest zgłaszane po zmianie wykrytego gestu pan. Obiekt PanUpdatedEventArgs , który towarzyszy temu zdarzeniu, definiuje następujące właściwości:

• GestureId, typu int, który reprezentuje identyfikator gestu, który wzbudził zdarzenie.
• StatusType, typu GestureStatus, który wskazuje, czy zdarzenie zostało podniesione dla nowo uruchomionego gestu, gestu uruchomienia, ukończonego gestu lub anulowanego gestu.
• TotalX, typu double, który wskazuje całkowitą zmianę kierunku X od początku gestu.
• TotalY, typu double, który wskazuje całkowitą zmianę kierunku Y od początku gestu.

Tworzenie elementu PanGestureRecognizer

View Aby rozpoznać gest panowania, utwórz PanGestureRecognizer obiekt, obsłuż PanUpdated zdarzenie i dodaj nowy aparat rozpoznawania gestów GestureRecognizers do kolekcji w widoku. Poniższy przykład kodu przedstawia PanGestureRecognizer dołączony element do elementu Image:

<Image Source="monkey.jpg">
    <Image.GestureRecognizers>
        <PanGestureRecognizer PanUpdated="OnPanUpdated" />
    </Image.GestureRecognizers>
</Image>

Kod procedury OnPanUpdated obsługi zdarzeń powinien zostać dodany do pliku za pomocą kodu:

void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
    // Handle the pan
}

Równoważny kod języka C# to:

PanGestureRecognizer panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += (s, e) =>
{
    // Handle the pan
};
image.GestureRecognizers.Add(panGesture);

Tworzenie kontenera pan

Przesuwanie dowolnych kształtów jest zwykle odpowiednie do nawigowania w obrębie obrazów i map. Klasa PanContainer , która jest pokazana w poniższym przykładzie, jest uogólnioną klasą pomocnika, która wykonuje przesuwanie dowolnych kształtów:

public class PanContainer : ContentView
{
    double panX, panY;

    public PanContainer()
    {
        // Set PanGestureRecognizer.TouchPoints to control the
        // number of touch points needed to pan
        PanGestureRecognizer panGesture = new PanGestureRecognizer();
        panGesture.PanUpdated += OnPanUpdated;
        GestureRecognizers.Add(panGesture);
    }

    void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {
            case GestureStatus.Running:
                // Translate and pan.
                double boundsX = Content.Width;
                double boundsY = Content.Height;
                Content.TranslationX = Math.Clamp(panX + e.TotalX, -boundsX, boundsX);
                Content.TranslationY = Math.Clamp(panY + e.TotalY, -boundsY, boundsY);
                break;

            case GestureStatus.Completed:
                // Store the translation applied during the pan
                panX = Content.TranslationX;
                panY = Content.TranslationY;
                break;
        }
    }
}

W tym przykładzie OnPanUpdated metoda aktualizuje widoczną zawartość opakowanego widoku na podstawie gestu pan użytkownika. Jest to osiągane przy użyciu wartości TotalX właściwości i TotalY PanUpdatedEventArgs wystąpienia, aby obliczyć kierunek i odległość patelni. Opakowany element użytkownika jest następnie przesuwany przez ustawienie jego TranslationX właściwości i TranslationY na wartości obliczeniowe. Podczas przesuwania zawartości w elemecie, który nie zajmuje pełnego ekranu, wysokość i szerokość widoku można uzyskać z właściwości i Width elementuHeight.

Klasę PanContainer można opakować wokół elementu View , tak aby rozpoznany gest pan przewróć opakowany widok. Poniższy przykład XAML przedstawia PanContainer zawijanie Imageelementu :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PanGesture"
             x:Class="PanGesture.MainPage">
    <AbsoluteLayout>
        <local:PanContainer>
            <Image Source="monkey.jpg" WidthRequest="1024" HeightRequest="768" />
        </local:PanContainer>
    </AbsoluteLayout>
</ContentPage>

W tym przykładzie po odebraniu gestu Image patelni wyświetlany obraz będzie przesuwany.