Megosztás a következőn keresztül:

Ellop

A pöccintéssel történő parancsolás a helyi menük gyorsítója, amely lehetővé teszi, hogy a felhasználók érintéssel egyszerűen access a gyakori menüműveleteket, anélkül, hogy módosítaniuk kellene az állapotokat az alkalmazásban.

A világos téma végrehajtása és megjelenítése

Ez a megfelelő vezérlő?

A pöccintés parancsával helyet takaríthat meg. Olyan helyzetekben hasznos, amikor a felhasználó ugyanazt a műveletet több elemen is végrehajthatja gyors egymás után. Emellett "gyorsműveleteket" is biztosít az olyan elemekhez, amelyekhez nincs szükség teljes előugró ablakra vagy állapotváltozásra az oldalon belül.

Pöccintsen parancsot akkor kell használnia, ha egy potenciálisan nagy elemcsoporttal rendelkezik, és minden elem 1-3 műveletet tartalmaz, amelyeket a felhasználó rendszeresen végre szeretne hajtani. Ezek a műveletek magukban foglalhatják, de nem korlátozódnak a következőkre:

  • Törlés
  • Megjelölés vagy archiválás
  • Mentés vagy letöltés
  • Válaszolás

Hogyan működik a pöccintés?

Az UWP pöccintés parancsának két módja van: Megjelenítés és Végrehajtás. Emellett négy különböző pöccintésirányt támogat: fel, le, balra és jobbra.

Megjelenítési mód

A Felfedés módban a felhasználó pöccint egy elemet egy vagy több parancs menüjének megnyitásához, és explicit módon egy parancsra kell koppintania a végrehajtásához. Amikor a felhasználó pöccint és elenged egy elemet, a menü nyitva marad, amíg ki nem választ egy parancsot, vagy a menü újra bezárul visszafelé pöccintéssel, a képernyő üres részére koppintással, vagy a megnyitott pöccintési elem elgörgetésével a képernyőről.

pöccintéssel jelenítheti meg a

A megjelenítési mód biztonságosabb, sokoldalúbb pöccintési mód, és a legtöbb menüművelethez használható, akár romboló műveletekhez is, például törléshez.

Amikor a felhasználó kiválasztja a megnyitási és resting állapotban megjelenő menübeállítások egyikét, a rendszer meghívja az elem parancsát, és bezárja a pöccintési vezérlőt.

Végrehajtási mód

Végrehajtás módban a felhasználó megnyitva pöccint egy elemet, hogy egyetlen parancsot jelenítsen meg és hajtson végre az adott pöccintéssel. Ha a felhasználó felengedi a pöccintendő elemet, mielőtt átlép egy küszöbértéket, a menü bezárul, és a parancs nem lesz végrehajtva. Ha a felhasználó pöccint a küszöbérték felett, majd felengedi az elemet, a parancs azonnal végrehajtásra kerül.

pöccintéssel hajthatja végre a

Ha a felhasználó nem oldja fel az ujját a küszöbérték elérése után, és ismét bezárja a pöccintés elemet, a parancs nem lesz végrehajtva, és nem hajtja végre a műveletet az elemen.

A végrehajtás módja több vizuális visszajelzést biztosít a színek és a címkék iránya révén, amikor egy elemet elhúzunk.

A végrehajtás akkor ajánlott, ha a felhasználó által végrehajtott művelet a leggyakoribb.

Destruktívabb műveletekhez is használható, például egy elem törléséhez. Ne feledje azonban, hogy a Végrehajtás csak egy műveletet igényel egy irányban történő pöccintéshez, szemben a Reveal funkcióval, amely megköveteli, hogy a felhasználó explicit módon kattintson egy gombra.

Pöccintés irányai

A pöccintés minden tájolási irányban működik: fel, le, balra és jobbra. Minden pöccintés iránya megtarthatja a saját pöccintő elemeit vagy tartalmát, de egyszerre csak egy iránypéldány állítható be egyetlen pöccinthető elemen.

Nem lehet például két LeftItems definíció ugyanazon a SwipeControlon.

Amit szabad és amit nem

  • Ne pöccintsen a FlipViewsban vagy a Hubsban. A kombináció zavaró lehet a felhasználó számára az ütköző pöccintési irányok miatt.
  • Ne egyesítse a vízszintes pöccintés és a vízszintes navigáció, illetve a függőleges pöccintés és a függőleges navigáció együttesét.
  • Győződjön meg arról, hogy a felhasználó ugyanazt a műveletet hajtja végre, és konzisztens minden olyan kapcsolódó elemnél, amely pöccinthető.
  • Pöccintsen azokhoz a fő műveletekhez, amelyeket a felhasználó végre szeretne hajtani.
  • Pöccintsen olyan elemeken, ahol ugyanazt a műveletet többször is megismételjük.
  • Használjon vízszintes pöccintést szélesebb elemeken, és függőlegesen pöccintsen a magasabb elemeken.
  • Használjon rövid, tömör szövegfeliratokat.

Pöccintés parancs létrehozása

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a SwipeControl működés közbeni

WinUI 3 Katalógus ikon A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

A pöccintő parancsoknak két összetevőt kell meghatározniuk:

  • A SwipeControl, amely körbefut a tartalom körül. Egy gyűjteményben, például a ListView-ban ez a DataTemplate-ban található.
  • A pöccintés menüelemek, amelyek egy vagy több SwipeItem objektumot helyeznek el a pöccintés vezérlő iránytárolóiban: LeftItems, RightItems, TopItemsvagy BottomItems

A pöccintő tartalom elhelyezhető beágyazottan, vagy definiálható a lap vagy alkalmazás Erőforrások szakaszában.

Íme egy egyszerű példa egy szöveg köré burkolt SwipeControlra. Megjeleníti a Pöccintés parancs létrehozásához szükséges XAML-elemek hierarchiáját.

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

Most egy teljesebb példát mutatunk be arra, hogyan használná általában a pöccintő parancsokat egy listában. Ebben a példában beállít egy Végrehajtási módot használó törlési parancsot, valamint a Megjelenítés módot használó egyéb parancsok menüjét. Mindkét parancskészlet a lap Erőforrások szakaszában van definiálva. A pöccintő parancsokat a ListView elemeire fogja alkalmazni.

Először hozza létre a parancsokat ábrázoló pöccintő elemeket lapszintű erőforrásként. A SwipeItem ikonként egy IconSource használ. Az ikonokat is erőforrásokként hozhatja létre.

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

Ne feledje, hogy a pöccintő tartalom menüelemeit rövid, tömör szövegfeliratokká kell tenni. Ezeknek a műveleteknek kell elsődlegesnek lenniük, amelyeket a felhasználó rövid idő alatt többször is végre szeretne hajtani.

Ha pöccintési parancsot állít be gyűjteményben vagy ListView-ban való működésre, az pontosan ugyanaz, mint egyetlen pöccintési parancs definiálása (korábban látható), kivéve, ha a SwipeControlt egy DataTemplate-ban definiálja, így az a gyűjtemény minden elemére vonatkozik.

Íme egy ListView, amelyen a SwipeControl a DataTemplate elemben van alkalmazva. A LeftItems és a RightItems tulajdonság az erőforrásokként létrehozott pöccintő elemekre hivatkozik.

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

Meghívott pöccintés parancs kezelése

Az érintési parancsra való reagáláshoz kezelni kell a meghívott eseményt. (Ha többet szeretne megtudni arról, hogyan hívhat meg egy felhasználó parancsot, tekintse át a Hogyan működik a pöccintés? szakasz a jelen cikk korábbi szakaszában.) A pöccintéses parancsok általában ListView- vagy listaszerű forgatókönyvben szerepelnek. Ebben az esetben egy parancs meghívásakor műveletet szeretne végrehajtani a pöccintett elemen.

Az alábbi módon kezelheti a korábban létrehozott törölt meghívott eseményt.

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

Az adatelem a SwipeControl DataContextje. A kódban hozzáférhet a pöccintett elemhez úgy, hogy lekéri a SwipeControl.DataContext tulajdonságot az esemény argumentumaiból, ahogy itt látható.

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

Megjegyzés:

Itt az elemek közvetlenül a ListView.Items gyűjteménybe lettek hozzáadva az egyszerűség kedvéért, így az elem is ugyanúgy törlődik. Ha ehelyett a ListView.ItemsSource-t egy gyűjteményre állítja, amely jellemzőbb, akkor törölnie kell az elemet a forrásgyűjteményből.

Ebben az adott esetben eltávolította az elemet a listából, így a pöccintett elem végső látványbeli állapota nem fontos. Azokban az esetekben azonban, amikor egyszerűen csak műveletet szeretne végrehajtani, majd ismét összecsukódjon a pöccintés, beállíthatja a BehaviorOnInvoked tulajdonságot az SwipeBehaviorOnInvoked enum értékek egyikére.

  • automatikus
    • Végrehajtás módban a megnyitott pöccintés elem a meghíváskor nyitva marad.
    • Felfedési módban a megnyitott eltolási elem összecsukódik, amikor aktiválva van.
  • Bezár
    • Az elem meghívásakor a pöccintés vezérlő mindig összecsukódik, és a módtól függetlenül visszatér a normál állapotba.
  • MaradNyitva
    • Az elem meghívásakor a pöccintés vezérlő mindig nyitva marad, a módtól függetlenül.

Itt egy válasz pöccintés elem van beállítva úgy, hogy bezáruljon a meghívása után.

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