Dela via

Swipe

Svepkommandon är en accelerator för snabbmenyer som gör att användarna enkelt kan komma åt vanliga menyåtgärder genom att trycka, utan att behöva ändra tillstånd i appen.

Kör och visa ljust tema

Är det här rätt kontroll?

Svepkommandon sparar utrymme. Det är användbart i situationer där användaren kan utföra samma åtgärd på flera objekt i snabb följd. Och den innehåller "snabbåtgärder" för objekt som inte behöver en fullständig popup- eller tillståndsändring på sidan.

Du bör använda svepkommandon när du har en potentiellt stor grupp objekt och varje objekt har 1–3 åtgärder som en användare kanske vill utföra regelbundet. Dessa åtgärder kan omfatta, men är inte begränsade till:

  • Tas bort
  • Märkning eller arkivering
  • Spara eller ladda ned
  • Svara

Hur fungerar Swipe?

UWP-svepkommandon har två lägen: Visa och kör. Den stöder också fyra olika svepriktningar: uppåt, nedåt, vänster och höger.

Avslöja läge

I Läget Visa sveper användaren ett objekt för att öppna en meny med ett eller flera kommandon och måste uttryckligen trycka på ett kommando för att köra det. När användaren sveper och släpper ett objekt förblir menyn öppen tills antingen ett kommando har valts, eller så stängs menyn igen genom att svepa tillbaka, trycka av eller rulla det öppnade svepobjektet från skärmen.

Svep för att visa

Visningsläget är ett säkrare och mer mångsidigt svepläge och kan användas för de flesta typer av menyåtgärder, till och med potentiellt destruktiva åtgärder, till exempel borttagning.

När användaren väljer något av menyalternativen som visas i avslöjandets öppna och vilande tillstånd anropas kommandot för objektet och svepkontrollen stängs.

Kör läge

I körläge sveper användaren ett objekt öppet för att visa och köra ett enda kommando med det svepet. Om användaren släpper objektet som sveps innan de sveper förbi ett tröskelvärde stängs menyn och kommandot körs inte. Om användaren sveper förbi tröskelvärdet och sedan släpper objektet körs kommandot omedelbart.

Svep för att köra

Om användaren inte släpper fingret efter att tröskelvärdet har nåtts och istället drar svepobjektet tillbaka igen, körs inte kommandot och ingen åtgärd utförs på svepobjektet.

Utförandeläge ger mer visuell feedback via färg och etikettens orientering medan ett objekt sveps.

Kör används bäst när den åtgärd som användaren utför är vanligast.

Det kan också användas för mer destruktiva åtgärder som att ta bort ett objekt. Tänk dock på att Kör endast kräver en enkel svepning i en riktning, tvärtemot Reveal, som kräver att användaren uttryckligen klickar på en knapp.

Svepriktningar

Svep fungerar i alla kardinalriktningar: uppåt, nedåt, vänster och höger. Varje svepriktning kan innehålla sina egna svepobjekt eller innehåll, men endast en instans av en riktning kan anges åt gången på ett enda svepbart objekt.

Du kan till exempel inte ha två LeftItems-definitioner på samma SwipeControl.

Saker man ska och inte ska göra

  • Använd inte svep i FlipViews eller Hubs. Kombinationen kan vara förvirrande för användaren på grund av motstridiga svepriktningar.
  • Kombinera inte vågrät svep med vågrät navigering eller lodrät svepning med lodrät navigering.
  • Kontrollera att det som användaren sveper är samma åtgärd och är konsekvent för alla relaterade objekt som kan svepas.
  • Använd svep för de viktigaste åtgärder som en användare vill utföra.
  • Använd svep på objekt där samma åtgärd upprepas många gånger.
  • Använd vågrät svepning på bredare objekt och lodrät svepning på högre objekt.
  • Använd korta, koncisa textetiketter.

Skapa ett svepkommando

Öppna WinUI 3-galleriappen och se SwipeControl i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Svepkommandon har två komponenter som du behöver definiera:

Swipe-innehåll kan placeras infogat eller definieras i avsnittet Resurser på din sida eller i din app.

Här är ett enkelt exempel på en SwipeControl som omsluter text. Den visar hierarkin för XAML-element som krävs för att skapa ett svepkommando.

<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 ska vi ta en titt på ett mer komplett exempel på hur du vanligtvis använder svepkommandon i en lista. I det här exemplet konfigurerar du ett borttagningskommando som använder körläge och en meny med andra kommandon som använder Reveal-läge. Kommandouppsättningarna definieras båda i avsnittet Resurser på sidan. Du använder svepkommandona på objekten i en ListView.

Skapa först svepobjekten, som representerar kommandona, som resurser på sidnivå. SwipeItem använder en IconSource som ikon. Skapa ikonerna som resurser också.

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

Kom ihåg att behålla menyalternativen i ditt svepinnehåll till korta, koncisa textetiketter. Dessa åtgärder bör vara de primära som en användare kanske vill utföra flera gånger under en kort period.

Att konfigurera ett svepkommando för att fungera i en samling eller ListView är exakt detsamma som att definiera ett enda svepkommando (visas tidigare), förutom att du definierar din SwipeControl i en DataTemplate så att den tillämpas på varje objekt i samlingen.

Här är en ListView med SwipeControl som används i objektet DataTemplate. Egenskaperna LeftItems och RightItems refererar till de svepobjekt som du skapade som resurser.

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

Hantera ett aktiverat svepkommando

Om du vill agera på ett svepkommando hanterar du dess anropade händelse. (Mer information om hur en användare kan anropa ett kommando finns i avsnittet Hur fungerar svep? tidigare i den här artikeln.) Vanligtvis finns ett svepkommando i ett ListView- eller listliknande scenario. I så fall, när ett kommando anropas, vill du utföra en åtgärd på det svepda objektet.

Så här hanterar du den anropade händelsen på det borttagningssvepobjekt som du skapade tidigare.

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

Dataobjektet är DataContext för SwipeControl. I koden kan du komma åt det objekt som svepts genom att hämta egenskapen SwipeControl.DataContext från händelsen args, som du ser här.

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

Anmärkning

Här har objekten lagts till direkt i samlingen ListView.Items för enkelhetens skull, så objektet tas också bort på samma sätt. Om du i stället anger ListView.ItemsSource till en samling, vilket är mer typiskt, måste du ta bort objektet från källsamlingen.

I det här fallet har du tagit bort elementet från listan, så det slutliga visuella tillståndet för det borttagna elementet är inte viktigt. Men i situationer där du bara vill utföra en åtgärd och sedan få svepkollapsen igen kan du ange egenskapen BehaviorOnInvoked som ett av uppräkningsvärdena SwipeBehaviorOnInvoked .

  • Automatisk
    • I körläge förblir det öppnade svepobjektet öppet när det anropas.
    • I Reveal-läget fälls det öppnade svepobjektet ihop när det anropas.
  • Stänga
    • När objektet anropas komprimeras alltid svepkontrollen och återgår till det normala, oavsett läge.
  • Förbli öppen
    • När objektet anropas förblir svepkontrollen alltid öppen, oavsett läge.

Här är ett svarssvepobjekt inställt på att stängas efter att det har anropats.

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

UWP och WinUI 2

Viktigt!

Informationen och exemplen i den här artikeln är optimerade för appar som använder Windows App SDK och WinUI 3, men som är allmänt tillämpliga för UWP-appar som använder WinUI 2. Se UWP API-referensen för plattformsspecifik information och exempel.

Det här avsnittet innehåller information som du behöver för att använda kontrollen i en UWP- eller WinUI 2-app.

SwipeControl för UWP-appar ingår som en del av WinUI 2. Mer information, inklusive installationsinstruktioner, finns i WinUI 2. API:er för den här kontrollen finns i namnrymderna Windows.UI.Xaml.Controls (UWP) och Microsoft.UI.Xaml.Controls (WinUI).

Vi rekommenderar att du använder det senaste WinUI 2 för att få de senaste formaten, mallarna och funktionerna för alla kontroller.

Om du vill använda koden i den här artikeln med WinUI 2 använder du ett alias i XAML (vi använder muxc) för att representera Api:erna för Windows UI-bibliotek som ingår i projektet. Mer information finns i Komma igång med WinUI 2 .

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

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