Delen via

Swipe

Swipe-opdrachten is een accelerator voor contextmenu's waarmee gebruikers eenvoudig algemene menuacties kunnen openen door aan te raken, zonder dat ze statussen in de app hoeven te wijzigen.

Uitvoeren en onthullen van het lichte thema

Is dit de juiste controle?

Swipe-opdrachten besparen ruimte. Het is handig in situaties waarin de gebruiker dezelfde bewerking op meerdere items in snelvolgend kan uitvoeren. En het biedt 'snelle acties' voor items die geen volledige pop-up of statuswijziging binnen de pagina nodig hebben.

U moet swipe-opdrachten gebruiken wanneer u een potentieel grote groep items hebt en elk item 1-3 acties heeft die een gebruiker mogelijk regelmatig wilt uitvoeren. Deze acties kunnen omvatten, maar zijn niet beperkt tot:

  • Verwijderen
  • Markeren of archiveren
  • Opslaan of downloaden
  • Beantwoorden

Hoe werkt Swipe?

UwP-swipeopdrachten hebben twee modi: weergeven en uitvoeren. Het ondersteunt ook vier verschillende swiperichtingen: omhoog, omlaag, links en rechts.

Weergavemodus

In de modus Onthullen swipet de gebruiker een item om een menu van een of meer opdrachten te openen en moet hij expliciet op een opdracht tikken om deze uit te voeren. Wanneer de gebruiker een item swipet en loslaat, blijft het menu geopend totdat een opdracht is geselecteerd of het menu opnieuw wordt gesloten door terug te vegen, af te tikken of door het geopende swipe-item van het scherm te schuiven.

Swipe om weer te geven

De weergavemodus is een veiligere, veelzijdigere veegmodus en kan worden gebruikt voor de meeste typen menuacties, zelfs potentieel destructieve acties, zoals verwijderen.

Wanneer de gebruiker een van de menuopties selecteert die worden weergegeven in de geopende en ruststatus van de onthulling, wordt de opdracht voor dat item aangeroepen en wordt het swipe-besturingselement gesloten.

Uitvoermodus

In de execute-modus swipet de gebruiker een item dat is geopend om één opdracht weer te geven en uit te voeren met die ene swipe. Als de gebruiker het item loslaat voordat hij voorbij een drempel swipet, wordt het menu gesloten en wordt de opdracht niet uitgevoerd. Als de gebruiker over de drempelwaarde swipet en het item vervolgens loslaat, wordt de opdracht onmiddellijk uitgevoerd.

Swipe om uit te voeren

Als de gebruiker zijn vinger niet loslaat nadat de drempelwaarde is bereikt en het swipe-item opnieuw is gesloten, wordt de opdracht niet uitgevoerd en wordt er geen actie uitgevoerd op het item.

De uitvoeren-modus biedt meer visuele feedback via kleur en oriëntatie van labels terwijl een item wordt geswipet.

Uitvoeren wordt het beste gebruikt wanneer de actie die de gebruiker uitvoert het meest voorkomt.

Het kan ook worden gebruikt voor meer destructieve acties, zoals het verwijderen van een item. Houd er echter rekening mee dat uitvoeren slechts één actie vereist om in een richting te vegen, in plaats van Onthullen, waarvoor de gebruiker expliciet op een knop moet klikken.

Swipe naar een routebeschrijving

Swipe werkt in alle kardinale richtingen: omhoog, omlaag, links en rechts. Elke veegrichting kan zijn eigen swipe-items of inhoud bevatten, maar er kan slechts één exemplaar van een richting tegelijk worden ingesteld op één swipebaar element.

U kunt bijvoorbeeld niet twee LeftItems-definities op dezelfde SwipeControl hebben.

Wat je wel en niet moet doen

  • Gebruik geen veegbewegingen in FlipViews of Hubs. De combinatie kan verwarrend zijn voor de gebruiker vanwege conflicterende swiperichtingen.
  • Combineer horizontale swipe niet met horizontale navigatie of verticale swipe met verticale navigatie.
  • Zorg ervoor dat wat de gebruiker veegt dezelfde actie is en consistent is voor alle gerelateerde items die kunnen worden geveegd.
  • Gebruik swipe voor de belangrijkste acties die een gebruiker wil uitvoeren.
  • Gebruik veegbewegingen voor items waarbij dezelfde actie vaak wordt herhaald.
  • Gebruik horizontaal vegen op bredere items en verticaal vegen op hogere items.
  • Gebruik wel korte, beknopte tekstlabels.

Een swipe-opdracht maken

Open de App WinUI 3 Gallery en zie SwipeControl in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Swipe-opdrachten hebben twee onderdelen die u moet definiëren:

Swipe-inhoud kan inline worden geplaatst of worden gedefinieerd in de sectie Resources van uw pagina of app.

Hier is een eenvoudig voorbeeld van een SwipeControl gewikkeld om wat tekst heen. Hier ziet u de hiërarchie van XAML-elementen die nodig zijn om een swipe-opdracht te maken.

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

Nu gaan we eens kijken naar een uitgebreider voorbeeld van hoe u meestal swipeopdrachten in een lijst zou gebruiken. In dit voorbeeld stelt u een verwijderopdracht in die gebruikmaakt van de modus Execute en een menu met andere opdrachten die de modus Onthulling gebruiken. Beide opdrachtensets worden gedefinieerd in de sectie Resources van de pagina. U past de swipe-opdrachten toe op de items in een ListView.

Maak eerst de swipe-items, die de opdrachten vertegenwoordigen, als resources op paginaniveau. SwipeItem gebruikt een IconSource als pictogram. Maak ook de pictogrammen als resources.

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

Vergeet niet om de menu-items in uw swipe-inhoud te beperken tot korte, beknopte tekstlabels. Deze acties moeten de primaire acties zijn die een gebruiker gedurende een korte periode meerdere keren wilt uitvoeren.

Het instellen van een swipe-opdracht om te werken in een verzameling of ListView is precies hetzelfde als het definiëren van één swipe-opdracht (eerder weergegeven), behalve dat u uw SwipeControl definieert in een DataTemplate, zodat deze wordt toegepast op elk item in de verzameling.

Hier is een ListView met de SwipeControl toegepast in de DataTemplate van het item. De eigenschappen LeftItems en RightItems verwijzen naar de swipe-items die u als resources hebt gemaakt.

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

Een aangeroepen swipe-opdracht afhandelen

Als u een swipe-opdracht wilt uitvoeren, verwerkt u de aangeroepen gebeurtenis. (Zie de sectie Hoe werkt swipen eerder in dit artikel voor meer informatie over hoe een gebruiker een opdracht kan aanroepen.) Normaal gesproken bevindt een swipe-opdracht zich in een ListView- of lijstachtig scenario. In dat geval wilt u, wanneer een opdracht wordt aangeroepen, een actie uitvoeren op dat geveegde item.

U kunt als volgt de aangeroepen gebeurtenis afhandelen op het swipe-item verwijderen dat u eerder hebt gemaakt.

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

Het gegevensitem is de DataContext van SwipeControl. In uw code hebt u toegang tot het item dat is geveegd door de eigenschap SwipeControl.DataContext op te halen uit de gebeurtenisargumenten, zoals hier wordt weergegeven.

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

Opmerking

Hier zijn de items rechtstreeks toegevoegd aan de verzameling ListView.Items, zodat het item ook op dezelfde manier wordt verwijderd. Als u in plaats daarvan ListView.ItemsSource instelt op een verzameling, wat gebruikelijker is, moet u het item uit de bronverzameling verwijderen.

In dit specifieke geval hebt u het item uit de lijst verwijderd, zodat de uiteindelijke visuele status van het geveegde item niet belangrijk is. In situaties waarin u gewoon een actie wilt uitvoeren en vervolgens de swipe opnieuw wilt samenvouwen, kunt u de eigenschap BehaviorOnInvoked instellen op een van de SwipeBehaviorOnInvoked-enumwaarden.

  • Auto
    • In de modus Uitvoeren blijft het geopende swipe-item geopend wanneer het wordt aangeroepen.
    • In de Reveal-modus wordt het geopende swipe-item samengevouwen wanneer het wordt geactiveerd.
  • sluiten
    • Wanneer het item wordt aangeroepen, klapt de swipebesturing altijd in en keert naar de normale staat terug, ongeacht de modus.
  • BlijfOpen
    • Wanneer het item wordt aangeroepen, blijft het swipe-besturingselement altijd geopend, ongeacht de modus.

Hier is een swipe-item voor antwoorden ingesteld om te sluiten nadat het item is aangeroepen.

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

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

SwipeControl voor UWP-apps is opgenomen als onderdeel van WinUI 2. Zie WinUI 2 voor meer informatie, inclusief installatie-instructies. API's voor dit besturingselement zijn beschikbaar in de Windows.UI.Xaml.Controls (UWP) en Microsoft.UI.Xaml.Controls (WinUI) namespaces.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen, sjablonen en functies voor alle besturingselementen te verkrijgen.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

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

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