Udostępnij przez

Swipe

Przesuwanie gestem to akcelerator menu kontekstowego, który umożliwia użytkownikom łatwy dostęp do typowych opcji menu za pomocą dotyku, bez konieczności zmiany stanów wewnątrz aplikacji.

Wykonaj i ujawnij motyw jasny

Czy jest to właściwa kontrola?

Sterowanie gestami przesuwania oszczędza miejsce. Jest to przydatne w sytuacjach, w których użytkownik może wykonać tę samą operację na wielu elementach w krótkim odstępie czasu. Zapewnia ona również "szybkie akcje" dla elementów, które nie wymagają pełnego wyświetlenia okna podręcznego lub zmiany stanu na stronie.

Należy użyć polecenia przesunięcia, gdy masz potencjalnie dużą grupę elementów, a każdy element ma 1–3 akcje, które użytkownik może chcieć regularnie wykonywać. Te akcje mogą obejmować, ale nie są ograniczone do następujących czynności:

  • Usuwanie
  • Oznaczanie lub archiwizowanie
  • Zapisywanie lub pobieranie
  • Odpowiadanie

Jak działa Swipe?

Polecenie przesunięcia platformy UWP ma dwa tryby: Reveal i Execute. Obsługuje również cztery różne kierunki przesunięcia: w górę, w dół, w lewo i w prawo.

Tryb odsłaniania

W trybie Ujawnij użytkownik przesuwa element, aby otworzyć menu jednego lub kilku poleceń i musi jawnie nacisnąć polecenie, aby go wykonać. Gdy użytkownik przesuwa i zwalnia element, menu pozostaje otwarte do momentu wybrania polecenia lub ponownego zamknięcia menu przez przesuwanie z powrotem, naciśnięcie lub przewinięcie otwartego elementu przesunięcia poza ekran.

Szybko przesuń, aby ujawnić

Tryb odsłaniania jest bezpieczniejszym, bardziej wszechstronnym trybem przesuwania i może być używany do większości akcji menu, nawet potencjalnie destrukcyjnych działań, takich jak usuwanie.

Gdy użytkownik wybierze jedną z opcji menu wyświetlanych w stanie otwartym i spoczynku, polecenie dla tego elementu zostanie wywołane, a kontrolka przesunięcia zostanie zamknięta.

Tryb wykonania

W trybie wykonywania użytkownik szybko przesuwa otwarty element, aby wyświetlić i wykonać pojedyncze polecenie z jednym przesunięciem. Jeśli użytkownik puści przesuwany element przed przejściem przez próg, menu zostanie zamknięte i polecenie nie zostanie wykonane. Jeśli użytkownik przesunie element za próg, a następnie go zwolni, polecenie zostanie wykonane natychmiast.

Przesuń, aby wykonać

Jeśli użytkownik nie zwolni palca po osiągnięciu progu i ponownie zamknie element przesunięcia, polecenie nie zostanie wykonane i nie zostanie podjęta żadna akcja na elemencie.

Tryb wykonywania zapewnia więcej wizualnego sprzężenia zwrotnego poprzez kolor i orientację etykiety, gdy element jest przesuwany.

Wykonywanie najlepiej się sprawdza, gdy jest to najczęstsza akcja wykonywana przez użytkownika.

Może być również używany do bardziej destrukcyjnych akcji, takich jak usuwanie elementu. Należy jednak pamiętać, że polecenie Execute wymaga tylko jednej akcji przesuwania w kierunku, w przeciwieństwie do funkcji Reveal, co wymaga jawnego kliknięcia przycisku przez użytkownika.

Szybkie przesuwanie wskazówek

Przesunięcie działa we wszystkich kierunkach kardynalnych: w górę, w dół, w lewo i w prawo. Każdy kierunek przesunięcia może zawierać własne elementy lub treści, ale tylko jedno wystąpienie kierunku można ustawić jednocześnie na jednym elemencie typu "swipe-able".

Na przykład, nie można mieć dwóch definicji LeftItems na tej samej kontrolce SwipeControl.

Zalecenia i zakazy

  • Nie używaj szybkiego przesunięcia w widokach FlipView ani w Hubach. Kombinacja może być myląca dla użytkownika z powodu konfliktu kierunków przesunięcia.
  • Nie należy łączyć przesuwania w poziomie z nawigacją poziomą ani przesuwać w pionie z nawigacją pionową.
  • Upewnij się, że to, co użytkownik przesuwa, jest tą samą akcją i jest spójne we wszystkich powiązanych elementach, które można przesunąć.
  • Stosuj przesunięcie dla głównych czynności, które użytkownik chce wykonać.
  • Warto korzystać z przesuwania w elementach, w których ta sama czynność jest powtarzana wiele razy.
  • Użyj poziomego przesuwania na szerszych elementach i przesuwania pionowego na wyższych elementach.
  • Używaj krótkich, zwięzłych etykiet tekstowych.

Tworzenie polecenia szybkiego przesunięcia

Otwórz aplikację Galeria WinUI 3 i zobacz SwipeControl w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Polecenia szybkiego przesunięcia mają dwa składniki, które należy zdefiniować:

  • SwipeControl, która owija się wokół zawartości. W kolekcji, takiej jak ListView, znajduje się to w obrębie szablonu danych.
  • Elementy menu przesunięcia, które stanowią jeden lub więcej obiektów SwipeItem umieszczonych w kontenerach kierunkowych kontrolki przesuwania: LeftItems, RightItems, TopItemslub BottomItems

Zawartość do przesuwania można umieścić bezpośrednio w treści lub zdefiniować w sekcji zasobów strony lub aplikacji.

Oto prosty przykład kontrolki SwipeControl opakowanej wokół tekstu. Przedstawia on hierarchię elementów XAML wymaganych do utworzenia polecenia szybkiego przesunięcia.

<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>

Teraz przyjrzymy się bardziej kompletnym przykładom sposobu, w jaki zwykle używasz poleceń szybkiego przesunięcia na liście. W tym przykładzie skonfigurujesz polecenie usuwania, które używa trybu Wykonywania, oraz menu innych poleceń korzystających z trybu Reveal. Oba zestawy poleceń są definiowane w sekcji Zasoby strony. Będziesz stosować polecenia przesunięcia do elementów w widoku ListView.

Najpierw utwórz elementy szybkiego przesunięcia reprezentujące polecenia jako zasoby na poziomie strony. Funkcja SwipeItem używa IconSource jako ikony. Utwórz ikony jako zasoby.

<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>

Pamiętaj, aby elementy menu w zawartości przewijania miały krótkie, zwięzłe etykietki. Te akcje powinny być podstawowymi, które użytkownik może chcieć wykonać wiele razy w krótkim okresie.

Skonfigurowanie polecenia przesunięcia w celu pracy w kolekcji lub ListView jest dokładnie takie samo jak definiowanie pojedynczego polecenia przesunięcia (pokazane wcześniej), z wyjątkiem definiowania kontrolki SwipeControl w elemencie DataTemplate, aby można było zastosować do każdego elementu w kolekcji.

Oto element ListView z kontrolką SwipeControl zastosowaną w elemencie DataTemplate. Właściwości LeftItems i RightItems odnoszą się do elementów przesunięcia, które zostały utworzone jako zasoby.

<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>

Obsługa wywoływanego polecenia przesunięcia

Aby wykonać działanie na poleceniu przesunięcia, obsłużysz jego wywoływane zdarzenie. (Aby uzyskać więcej informacji na temat sposobu wywoływania polecenia przez użytkownika, zapoznaj się z sekcją Jak działa przesunięcie? we wcześniejszej części tego artykułu). Zazwyczaj polecenie przesunięcia znajduje się w scenariuszu ListView lub podobnym do listy. W takim przypadku chcesz wykonać określoną akcję na przesuniętym elemencie po wywołaniu polecenia.

Poniżej przedstawiono sposób obsługi zdarzenia Invoked na utworzonym wcześniej elemencie przesunięcia usuwania.

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

Element danych jest DataContext kontrolki SwipeControl. W kodzie możesz uzyskać dostęp do elementu, który został przesunięty, uzyskując właściwość SwipeControl.DataContext z argumentów zdarzenia, jak pokazano na przykładzie.

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

Uwaga / Notatka

W tym miejscu elementy zostały dodane bezpośrednio do kolekcji ListView.Items dla uproszczenia, więc element jest również usuwany w ten sam sposób. Jeśli zamiast tego ustawisz właściwość ListView.ItemsSource na kolekcję, która jest bardziej typowa, musisz usunąć element z kolekcji źródłowej.

W tym konkretnym przypadku usunięto element z listy, więc ostateczny wizualny stan przesuniętego elementu nie jest ważny. Jednak w sytuacjach, w których po prostu chcesz wykonać akcję, a następnie ponownie zwiń szybkie przesunięcie, możesz ustawić właściwość BehaviorOnInvoked na jedną z wartości wyliczenia SwipeBehaviorOnInvoked.

  • Automatycznie
    • W trybie Wykonywania otwarty element przesuwany pozostanie otwarty po jego wywołaniu.
    • W trybie Ujawniaj otwarty element szybkiego przesunięcia zwinie się po wywołaniu.
  • Zamknij
    • Po wywołaniu elementu kontrolka przesuwana zawsze się zwija i wraca do normalnego stanu, niezależnie od trybu.
  • PozostańOtwarty
    • Po wywołaniu elementu kontrolka machnięcia zawsze pozostanie otwarta, niezależnie od trybu.

W tym miejscu odpowiedź elementu szybkiego przesunięcia jest ustawiona na zamknięcie po wywołaniu.

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

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

Funkcja SwipeControl dla aplikacji platformy UWP jest zawarta w ramach interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. API dla tej kontrolki istnieją zarówno w przestrzeniach nazw Windows.UI.Xaml.Controls (UWP), jak i Microsoft.UI.Xaml.Controls (WinUI).

Zalecamy użycie najnowszego interfejsu WinUI 2 , aby uzyskać najbardziej aktualne style, szablony i funkcje dla wszystkich kontrolek.

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

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

<muxc:SwipeControl />
<muxc:SwipeItem />
  • Last updated on