Share via

Babatan

  • Artikel

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

Jalankan dan Ungkap tema cahaya

Apakah ini kontrol yang tepat?

Perintah geser menghemat ruang. Ini berguna dalam situasi di mana pengguna dapat melakukan operasi yang sama pada beberapa item berturut-turut cepat. Dan menyediakan "tindakan cepat" pada item yang tidak memerlukan popup penuh atau perubahan status di 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 dapat mencakup, tetapi tidak terbatas pada:

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

Bagaimana cara kerja Geser?

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

Mode ungkap

Dalam mode Ungkap, 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 geser yang terbuka dari layar.

Geser 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 disusap sebelum mereka menggesek melewati ambang batas, menu ditutup dan perintah tidak dijalankan. Jika pengguna menggesek melewati ambang lalu melepaskan item, perintah segera dijalankan.

Geser ke Eksekusi

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 jalankan memberikan lebih banyak umpan balik visual melalui orientasi warna dan label saat item sedang disusupkan.

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

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

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

Lakukan dan jangan lakukan

  • Jangan gunakan geser di FlipViews atau Hubs. Kombinasi mungkin membingungkan bagi pengguna karena arah geser yang bertentangan.
  • Jangan gabungkan gesek horizontal dengan navigasi horizontal, atau usap vertikal dengan navigasi vertikal.
  • Pastikan apa yang di geser pengguna adalah tindakan yang sama, dan konsisten di semua item terkait yang dapat disusutkan.
  • Gunakan gesek untuk tindakan utama yang ingin dilakukan pengguna.
  • Gunakan geser pada item di mana tindakan yang sama diulang berkali-kali.
  • Gunakan menggesek horizontal pada item yang lebih lebar, dan menggesek vertikal pada item yang lebih tinggi.
  • Gunakan label teks pendek 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 Pustaka UI Windows 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat Pustaka Windows UI. 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 WinUI 3 Gallery mencakup contoh interaktif 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:

Konten geser 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 geser.

<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 geser ke item dalam ListView.

Pertama, buat item geser, 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 menjaga item menu dalam konten geser Anda menjadi pendek, label teks ringkas. 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 menentukan satu perintah geser (diperlihatkan 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 geser 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 geser, Anda menangani peristiwa Dipanggil . (Untuk informasi selengkapnya tentang bagaimana pengguna dapat memanggil perintah, tinjau bagian Bagaimana cara kerja geser? sebelumnya di 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 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 dapat mengakses item yang digesek dengan mendapatkan properti SwipeControl.DataContext dari argumen 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 umum, Anda perlu menghapus item dari koleksi sumber.

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

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

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

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

Dapatkan kode sampel