Bagikan melalui

Babatan

  • Artikel

Perintah gesek adalah akselerator untuk menu konteks yang memungkinkan pengguna dengan mudah mengakses tindakan menu umum dengan sentuhan, tanpa perlu mengubah status dalam aplikasi.

Jalankan dan Ungkapkan tema cahaya

Apakah ini kontrol yang tepat?

Perintah gesek menghemat ruang. Ini berguna dalam situasi di mana pengguna dapat melakukan operasi yang sama pada beberapa item secara berturut-turut dengan cepat. Dan menyediakan "tindakan cepat" pada item yang tidak memerlukan popup penuh atau perubahan status dalam halaman.

Anda harus menggunakan perintah geser saat Anda memiliki sekelompok item yang berpotensi besar, dan setiap item memiliki 1-3 tindakan yang mungkin ingin dilakukan pengguna secara teratur. Tindakan ini mungkin termasuk, tetapi tidak terbatas pada:

  • Menghapus
  • Menandai atau mengarsipkan
  • Menyimpan atau mengunduh
  • Menjawab

Bagaimana cara kerja Geser?

Perintah gesek UWP memiliki dua mode: Ungkap dan Jalankan. Ini juga mendukung empat arah gesek yang berbeda: atas, bawah, kiri, dan kanan.

Mode Ungkap

Dalam mode Ungkapkan, pengguna menggesek item untuk membuka menu dari satu atau beberapa perintah dan harus secara eksplisit mengetuk perintah untuk menjalankannya. Saat pengguna menggesek dan merilis item, menu tetap terbuka hingga perintah dipilih, atau menu ditutup lagi melalui menggesek kembali, mengetuk, atau menggulir item gesek yang terbuka dari layar.

Gesek untuk Mengungkapkan

Mode mengungkapkan adalah mode geser yang lebih aman dan lebih serbaguna, dan dapat digunakan untuk sebagian besar jenis tindakan menu, bahkan tindakan yang berpotensi merusak, seperti penghapusan.

Saat pengguna memilih salah satu opsi menu yang ditampilkan dalam status terbuka dan istirahat, perintah untuk item tersebut dipanggil dan kontrol geser ditutup.

Mode eksekusi

Dalam mode Jalankan, pengguna menggesek item yang terbuka untuk mengungkapkan dan menjalankan satu perintah dengan satu gesek. Jika pengguna merilis item yang di-swipe sebelum mereka menggesek melewati ambang batas, menu akan ditutup dan perintah tidak dijalankan. Jika pengguna menggesek melewati ambang batas lalu melepaskan item, perintah segera dijalankan.

Geser ke Jalankan

Jika pengguna tidak melepaskan jari mereka setelah ambang tercapai, dan menarik item usap ditutup lagi, perintah tidak dijalankan dan tidak ada tindakan yang dilakukan pada item.

Mode eksekusi memberikan lebih banyak umpan balik visual melalui orientasi warna dan label saat item sedang diseka.

Jalankan paling baik digunakan ketika tindakan yang dilakukan pengguna adalah yang paling umum.

Ini juga dapat digunakan untuk tindakan yang lebih merusak seperti menghapus item. Namun, perlu diingat bahwa Jalankan hanya memerlukan satu tindakan menggesek ke arah, dibandingkan dengan Reveal, yang mengharuskan pengguna untuk mengeklik tombol secara eksplisit.

Arah gesek

Geser bekerja di semua arah kardinal: atas, bawah, kiri, dan kanan. Setiap arah gesek dapat menyimpan item atau konten geseknya sendiri, tetapi hanya satu instans arah yang dapat diatur pada satu elemen yang dapat diusap.

Misalnya, Anda tidak dapat memiliki dua definisi LeftItems pada SwipeControl yang sama.

Lakukan dan jangan lakukan

  • Jangan gunakan gesek di FlipViews atau Hubs. Kombinasi mungkin membingungkan bagi pengguna karena arah gesek yang bertentangan.
  • Jangan gabungkan gesek horizontal dengan navigasi horizontal, atau gesek vertikal dengan navigasi vertikal.
  • Pastikan apa yang disusun pengguna adalah tindakan yang sama, dan konsisten di semua item terkait yang dapat di gesek.
  • Lakukan pengusapan untuk tindakan utama yang ingin dilakukan pengguna.
  • Gunakan gesek pada item di mana tindakan yang sama diulang berkali-kali.
  • Gunakan pengusapan horizontal pada item yang lebih lebar, dan geser vertikal pada item yang lebih tinggi.
  • Gunakan label teks singkat dan ringkas.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

SwipeControl untuk aplikasi UWP disertakan sebagai bagian dari WinUI 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat WinUI 2. API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls (UWP) dan Microsoft.UI.Xaml.Controls (WinUI).

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya, templat, dan fitur terbaru untuk semua kontrol.

Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.

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

<muxc:SwipeControl />
<muxc:SwipeItem />

Membuat perintah geser

Buka aplikasi Galeri WinUI 3 dan lihat SwipeControl beraksi.

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Perintah usap memiliki dua komponen yang perlu Anda tentukan:

Gesek konten dapat ditempatkan sebaris, atau ditentukan di bagian Sumber Daya halaman atau aplikasi Anda.

Berikut adalah contoh sederhana dari SwipeControl yang dibungkus di sekitar beberapa teks. Ini menunjukkan hierarki elemen XAML yang diperlukan untuk membuat perintah gesek.

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

Sekarang kita akan melihat contoh yang lebih lengkap tentang bagaimana Anda biasanya akan menggunakan perintah gesek dalam daftar. Dalam contoh ini, Anda akan menyiapkan perintah hapus yang menggunakan mode Jalankan, dan menu perintah lain yang menggunakan mode Ungkapkan. Kedua set perintah ditentukan di bagian Sumber Daya halaman. Anda akan menerapkan perintah gesek ke item dalam ListView.

Pertama, buat item gesek, yang mewakili perintah, sebagai sumber daya tingkat halaman. SwipeItem menggunakan IconSource sebagai ikonnya. Buat ikon sebagai sumber daya juga.

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

Ingatlah untuk menyimpan item menu di konten gesek Anda ke label teks ringkas yang singkat. Tindakan ini harus menjadi tindakan utama yang mungkin ingin dilakukan pengguna beberapa kali dalam waktu singkat.

Menyiapkan perintah geser untuk bekerja dalam koleksi atau ListView sama persis dengan mendefinisikan satu perintah gesek (ditampilkan sebelumnya), kecuali Anda menentukan SwipeControl Anda dalam DataTemplate sehingga diterapkan ke setiap item dalam koleksi.

Berikut adalah ListView dengan SwipeControl yang diterapkan dalam itemNya DataTemplate. Properti LeftItems dan RightItems mereferensikan item gesek yang Anda buat sebagai sumber daya.

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

Menangani perintah geser yang dipanggil

Untuk bertindak berdasarkan perintah gesek, Anda menangani peristiwa Yang Dipanggil . (Untuk informasi selengkapnya tentang cara pengguna dapat memanggil perintah, tinjau Bagaimana cara kerja gesek? bagian sebelumnya dalam artikel ini.) Biasanya, perintah geser ada dalam skenario ListView atau seperti daftar. Dalam hal ini, ketika perintah dipanggil, Anda ingin melakukan tindakan pada item yang diseka.

Berikut cara menangani peristiwa Yang dipanggil pada item hapus geser yang Anda buat sebelumnya.

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

Item data adalah DataContext dari SwipeControl. Dalam kode Anda, Anda dapat mengakses item yang di-swiped dengan mendapatkan properti SwipeControl.DataContext dari arg peristiwa, seperti yang ditunjukkan di sini.

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

Catatan

Di sini, item ditambahkan langsung ke koleksi ListView.Items untuk kesederhanaan, sehingga item juga dihapus dengan cara yang sama. Jika Anda mengatur ListView.ItemsSource ke koleksi, yang lebih khas, Anda perlu menghapus item dari kumpulan sumber.

Dalam instans khusus ini, Anda menghapus item dari daftar, sehingga status visual akhir item yang di-geser tidak penting. Namun, dalam situasi di mana Anda hanya ingin melakukan tindakan dan kemudian menciutkan usap lagi, Anda dapat mengatur properti BehaviorOnInvoked salah satu nilai enum SwipeBehaviorOnInvoked .

  • Auto
    • Dalam mode Jalankan, item gesek yang dibuka akan tetap terbuka saat dipanggil.
    • Dalam mode Ungkapkan, item gesek yang dibuka akan diciutkan saat dipanggil.
  • Tutup
    • Ketika item dipanggil, kontrol geser akan selalu menciut dan kembali normal, terlepas dari mode.
  • TetapBuka
    • Saat item dipanggil, kontrol geser akan selalu terbuka, terlepas dari modenya.

Di sini, item geser balasan diatur untuk ditutup setelah dipanggil.

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

Mendapatkan kode sampel

  • Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.