Swipe

Příkaz potáhnutí prstem je akcelerátor pro místní nabídky, který umožňuje uživatelům snadno zpřístupnit běžné funkce nabídky dotykem, aniž by museli měnit stavy aplikace.

Je to správná kontrola?

Potáhnutím prstem ušetříte místo. Je užitečné v situacích, kdy uživatel může provést stejnou operaci s více položkami v rychlém sledu. A poskytuje "rychlé akce" u položek, které nepotřebují úplnou změnu automaticky otevíraných oken nebo stavu na stránce.

Pokud máte potenciálně velkou skupinu položek, měli byste použít příkaz potáhnutí prstem a každá položka má 1–3 akce, které může uživatel chtít provádět pravidelně. Tyto akce můžou zahrnovat, ale nejsou omezené na:

• Odstranit
• Označení nebo archivace
• Ukládání nebo stahování
• Odpovídání

Jak funguje potáhnutí prstem?

Příkaz potáhnutí prstem pro UPW má dva režimy: Zobrazit a Spustit. Podporuje také čtyři různé směry potáhnutí prstem: nahoru, dolů, doleva a doprava.

Režim zobrazení

V režimu zobrazit uživatel potáhnutím prstem potáhne položku, aby otevřel nabídku jednoho nebo více příkazů a musí explicitně klepnout na příkaz, který chcete spustit. Když uživatel potáhne prstem a uvolní položku, nabídka zůstane otevřená, dokud není vybraný příkaz, nebo se nabídka znovu zavře potáhnutím prstem zpět, klepnutím na tlačítko nebo posouváním otevřené položky potáhnutím prstem mimo obrazovku.

Režim odhalování je bezpečnější a všestrannější způsob přejetí prstem, který lze použít pro většinu typů akcí v nabídce, včetně potenciálně destruktivních akcí, jako je odstranění.

Když uživatel vybere jednu z možností nabídky zobrazených ve stavu otevření a odpočinku, vyvolá se příkaz pro danou položku a ovládací prvek potáhnutí prstem se zavře.

Režim spuštění

V režimu spuštění uživatel potáhnutím prstem potáhne otevřenou položku, aby se zobrazila a spustila jeden příkaz s jedním potáhnutím prstem. Pokud uživatel uvolní položku dříve, než prahovou hodnotu potáhne prstem, nabídka se zavře, aniž by se příkaz spustil. Pokud uživatel potáhne prstem za prahovou hodnotu a pak položku uvolní, příkaz se spustí okamžitě.

Pokud uživatel po dosažení prahové hodnoty neuvolní prst a znovu zavře položku potáhnutí prstem, příkaz se nespustí a u položky se neprovede žádná akce.

Režim spuštění poskytuje více vizuální zpětné vazby prostřednictvím orientace barev a popisků při potáhnutí položky.

Provádění se nejlépe používá, když je akce, která uživatel provádí, nejběžnější.

Může se také použít pro destruktivnější akce, jako je odstranění položky. Mějte však na paměti, že provedení vyžaduje pouze jednu akci potáhnutí prstem ve směru, na rozdíl od funkce Zobrazit, což vyžaduje, aby uživatel explicitně klikl na tlačítko.

Směry potáhnutí prstem

Gesto potáhnutím prstem funguje ve všech hlavních směrech: nahoru, dolů, doleva a doprava. Každý směr potáhnutí může obsahovat vlastní položky potáhnutí prstem nebo obsah, ale u jednoho prvku s možností potáhnutí prstem lze nastavit vždy jenom jednu instanci směru.

Například nelze mít dvě LeftItems definice ve stejném SwipeControl.

Co dělat a co nedělat

• V FlipViews nebo Hubs nepoužívejte potáhnutí prstem. Kombinace může být pro uživatele matoucí z důvodu konfliktních pokynů potáhnutí prstem.
• Nekombinujte vodorovné potáhnutí prstem s vodorovnou navigaci nebo svislým potáhnutím prstem pomocí svislé navigace.
• Ujistěte se, že akce, kterou uživatel provádí potáhnutím prstem, je stejná a konzistentní napříč všemi souvisejícími položkami, které se dají potáhnout prstem.
• Pro hlavní akce, které chce uživatel provést, použijte potáhnutí prstem.
• Potahujte prstem na položkách, u kterých se stejná akce opakuje mnohokrát.
• Používejte vodorovné potáhnutí prstem u širších položek a svislé u vyšších položek.
• Používejte krátké a stručné textové popisky.

Vytvoření příkazu potáhnutí prstem

• Důležitá rozhraní API: SwipeControl, SwipeItem, ListView – třída

Otevřete aplikaci Galerie WinUI 3 a podívejte se na SwipeControl v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Příkazy potáhnutí prstem mají dvě komponenty, které potřebujete definovat:

• "SwipeControl, který obklopuje váš obsah." V rámci kolekce, jako je například ListView, se toto nachází uvnitř vaší šablony dat.
• Položky nabídky při přejetí prstem, což jsou jeden nebo více objektů SwipeItem umístěných ve směrových kontejnerech ovládacího prvku přejetí: LeftItems, RightItems, TopItemsnebo BottomItems

Obsah pro pohyb prstem můžete umístit do textu nebo ho definovat v sekci Zdroje vaší stránky nebo aplikace.

Tady je jednoduchý příklad SwipeControl, který obepíná nějaký text. Zobrazuje hierarchii elementů XAML potřebných k vytvoření příkazu potáhnutí prstem.

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

Teď se podíváme na úplnější příklad toho, jak byste obvykle používali příkazy potáhnutí prstem v seznamu. V tomto příkladu nastavíte příkaz delete, který používá režim Provádění, a nabídku dalších příkazů, které používají režim Odkryt. Obě sady příkazů jsou definovány v části Zdroje na stránce. Příkazy potáhnutí prstem použijete u položek v zobrazení ListView.

Nejprve vytvořte položky pro přejetí prstem, které představují příkazy, jako zdroje na úrovni stránky. SwipeItem používá IconSource jako svou ikonu. Vytvořte také ikony jako zdroje.

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

Nezapomeňte zachovat položky nabídky v obsahu potáhnutí prstem na krátké a stručné textové popisky. Tyto akce by měly být primárními akcemi, které uživatel může chtít provést vícekrát za krátkou dobu.

Nastavení příkazu potáhnutí prstem, aby fungoval v kolekci nebo ListView, je úplně stejné jako definování jediného příkazu potáhnutí (viz předchozí příklad), kromě toho, že svůj SwipeControl definujete v DataTemplate, aby se aplikoval na každou položku v kolekci.

Tady je ListView s funkcí SwipeControl použitou v položce DataTemplate. Vlastnosti LeftItems a RightItems odkazují na položky pro potažení prstem, které jste vytvořili jako zdroje.

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

Zpracování příkazu vyvolaného potáhnutím.

Pokud chcete pracovat s příkazem potáhnutí prstem, zpracujete jeho Vyvoláno událostí. (Další informace o tom, jak může uživatel použít příkaz, najdete výše v části Jak funguje potáhnutí prstem?.) Příkaz potáhnutí prstem je obvykle ve scénáři seznamového typu nebo ListView. V takovém případě, když je vyvolán příkaz, chcete provést akci na dané přejeté položce.

Tady je postup, jak zpracovat vyvolanou událost na odstranit položku potáhnutí prstem, kterou jste vytvořili dříve.

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

Datová položka je datovým kontextem ovládacího prvku pro potažení. V kódu můžete získat přístup k položce, která byla potažena prstem, získáním vlastnosti SwipeControl.DataContext z argumentů události, jak je ukázáno zde.

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

Poznámka:

V této části byly položky přidány přímo do kolekce ListView.Items pro zjednodušení, takže položka je také odstraněna stejným způsobem. Pokud místo toho nastavíte ListView.ItemsSource na kolekci, která je obvyklejší, je nutné odstranit položku ze zdrojové kolekce.

V tomto konkrétním případě jste odebrali položku ze seznamu, takže konečný vizuální stav přejeté položky není důležitý. V situacích, kdy jednoduše chcete provést akci a poté opět sbalit gesto potáhnutí, můžete nastavit vlastnost BehaviorOnInvoked na jednu z hodnot výčtu SwipeBehaviorOnInvoked.

• Automatické
  • V režimu spuštění zůstane otevřená položka potáhnutí otevřená i po vyvolání.
  • V režimu odhalování se při vyvolání sbalí otevřená položka potáhnutí prstem.
• Zavřít
  • Při vyvolání položky se ovládací prvek potáhnutím prstem vždy sbalí a vrátí se k normálnímu stavu bez ohledu na režim.
• Zůstat otevřeno
  • Po vyvolání položky zůstane ovládací prvek potáhnutí vždy otevřený bez ohledu na režim.

V této části je položka odpovědi potažení prstem nastavena tak, aby se po vyvolání zavřela.

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

Související články

• zobrazení seznamu a zobrazení mřížky
• kontejnery položek a šablony
• Potáhněte pro obnovení