Bagikan melalui

SwipeView

  • Artikel

Browse sample. Telusuri sampel

UI Aplikasi Multi-platform .NET (.NET MAUI) SwipeView adalah kontrol kontainer yang membungkus item konten, dan menyediakan item menu konteks yang diungkapkan oleh gerakan gesek:

Screenshot of SwipeView swipe items in a CollectionView.

Penting

SwipeView dirancang untuk antarmuka sentuh. Pada Windows hanya dapat di-swiped dalam antarmuka sentuh dan tidak akan berfungsi dengan perangkat penunjuk seperti mouse.

SwipeView menentukan properti berikut:

  • LeftItems, dari jenis SwipeItems, yang mewakili item gesek yang dapat dipanggil ketika kontrol disusutkan dari sisi kiri.
  • RightItems, dari jenis SwipeItems, yang mewakili item gesek yang dapat dipanggil ketika kontrol di gesek dari sisi kanan.
  • TopItems, dari jenis SwipeItems, yang mewakili item gesek yang dapat dipanggil saat kontrol disapkan dari atas ke bawah.
  • BottomItems, dari jenis SwipeItems, yang mewakili item gesek yang dapat dipanggil saat kontrol disapkan dari bawah ke atas.
  • Threshold, dari jenis double, yang mewakili jumlah unit independen perangkat yang memicu gerakan gesek untuk sepenuhnya mengungkapkan item gesek.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Selain itu, mewarisi SwipeView Content properti dari ContentView kelas . Properti Content adalah properti konten kelas SwipeView , dan oleh karena itu tidak perlu diatur secara eksplisit.

Kelas ini SwipeView juga mendefinisikan tiga peristiwa:

  • SwipeStarted dinaikkan saat gesek dimulai. Objek SwipeStartedEventArgs yang menyertai peristiwa ini memiliki SwipeDirection properti, berjenis SwipeDirection.
  • SwipeChanging dinaikkan saat gesek bergerak. Objek SwipeChangingEventArgs yang menyertai peristiwa ini memiliki SwipeDirection properti, jenis SwipeDirection, dan Offset properti jenis double.
  • SwipeEnded dinaikkan ketika gesek berakhir. Objek SwipeEndedEventArgs yang menyertai peristiwa ini memiliki SwipeDirection properti, jenis SwipeDirection, dan IsOpen properti jenis bool.

Selain itu, SwipeView mencakup Open metode dan Close , yang secara terprogram membuka dan menutup item gesek, masing-masing.

Catatan

SwipeView memiliki platform khusus di iOS dan Android, yang mengontrol transisi yang digunakan saat membuka SwipeView. Untuk informasi selengkapnya, lihat Mode transisi gesek SwipeView di mode transisi swipe iOS dan SwipeView di Android.

Membuat SwipeView

SwipeView harus menentukan konten yang dibungkusSwipeView, dan item gesek yang diungkapkan oleh gerakan gesek. Item gesek adalah satu atau beberapa SwipeItem objek yang ditempatkan di salah satu dari empat SwipeView koleksi arah - LeftItems, , RightItems, TopItemsatau BottomItems.

Contoh berikut menunjukkan cara membuat SwipeView instans di XAML:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
    <Grid HeightRequest="60"
          WidthRequest="300"
          BackgroundColor="LightGray">
        <Label Text="Swipe right"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Grid>
</SwipeView>

Kode C# yang setara adalah:

// SwipeItems
SwipeItem favoriteSwipeItem = new SwipeItem
{
    Text = "Favorite",
    IconImageSource = "favorite.png",
    BackgroundColor = Colors.LightGreen
};
favoriteSwipeItem.Invoked += OnFavoriteSwipeItemInvoked;

SwipeItem deleteSwipeItem = new SwipeItem
{
    Text = "Delete",
    IconImageSource = "delete.png",
    BackgroundColor = Colors.LightPink
};
deleteSwipeItem.Invoked += OnDeleteSwipeItemInvoked;

List<SwipeItem> swipeItems = new List<SwipeItem>() { favoriteSwipeItem, deleteSwipeItem };

// SwipeView content
Grid grid = new Grid
{
    HeightRequest = 60,
    WidthRequest = 300,
    BackgroundColor = Colors.LightGray
};
grid.Add(new Label
{
    Text = "Swipe right",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
});

SwipeView swipeView = new SwipeView
{
    LeftItems = new SwipeItems(swipeItems),
    Content = grid
};

Dalam contoh ini, SwipeView kontennya adalah Grid yang berisi Label:

Screenshot of SwipeView content.

Item gesek digunakan untuk melakukan tindakan pada SwipeView konten, dan terungkap saat kontrol disusutkan dari sisi kiri:

Screenshot of SwipeView swipe items.

Secara default, item geser dijalankan saat diketuk oleh pengguna. Namun, perilaku ini dapat diubah. Untuk informasi selengkapnya, lihat Mode gesek.

Setelah item gesek dijalankan, item geser disembunyikan dan SwipeView konten ditampilkan kembali. Namun, perilaku ini dapat diubah. Untuk informasi selengkapnya, lihat Perilaku gesek.

Catatan

Gesek konten dan gesek item dapat ditempatkan sebaris, atau didefinisikan sebagai sumber daya.

Gesek item

Koleksi LeftItems, RightItems, TopItems, dan BottomItems semuanya berjenis SwipeItems. Kelas SwipeItems menentukan properti berikut:

  • Mode, dari jenis SwipeMode, yang menunjukkan efek interaksi gesek. Untuk informasi selengkapnya tentang mode gesek, lihat Mode gesek.
  • SwipeBehaviorOnInvoked, dari jenis SwipeBehaviorOnInvoked, yang menunjukkan bagaimana perilaku SwipeView setelah item gesek dipanggil. Untuk informasi selengkapnya tentang perilaku gesek, lihat Perilaku gesek.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Setiap item geser didefinisikan sebagai SwipeItem objek yang ditempatkan ke dalam salah satu dari empat SwipeItems koleksi arah. Kelas SwipeItem berasal dari MenuItem kelas , dan menambahkan anggota berikut:

  • Properti BackgroundColor , jenis Color, yang menentukan warna latar belakang item gesek. Properti ini didukung oleh properti yang dapat diikat.
  • Peristiwa Invoked , yang dinaikkan saat item gesek dijalankan.

Penting

Kelas MenuItem mendefinisikan beberapa properti, termasuk Command, , CommandParameterIconImageSource, dan Text. Properti ini dapat diatur pada SwipeItem objek untuk menentukan tampilannya, dan untuk menentukan ICommand yang dijalankan saat item gesek dipanggil. Untuk informasi selengkapnya, lihat Menampilkan item menu.

Contoh berikut menunjukkan dua SwipeItem objek dalam LeftItems kumpulan SwipeView:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Tampilan masing-masing SwipeItem didefinisikan oleh kombinasi properti Text, , IconImageSourcedan BackgroundColor :

Screenshot of SwipeView swipe items.

SwipeItem Saat diketuk, peristiwanya Invoked diaktifkan dan ditangani oleh penanganan aktivitas terdaftarnya. Selain itu, peristiwa kebakaran MenuItem.Clicked . Atau, Command properti dapat diatur ke ICommand implementasi yang akan dijalankan ketika SwipeItem dipanggil.

Catatan

Ketika tampilan didefinisikan SwipeItem hanya menggunakan Text properti atau IconImageSource , konten selalu berpusat.

Selain mendefinisikan item gesek sebagai SwipeItem objek, Anda juga dapat menentukan tampilan item gesek kustom. Untuk informasi selengkapnya, lihat Item gesek kustom.

Arah gesek

SwipeViewmendukung empat arah gesek yang berbeda, dengan arah gesek yang ditentukan oleh koleksi SwipeItem arah SwipeItems tempat objek ditambahkan. Setiap arah gesek dapat menahan item geseknya sendiri. Misalnya, contoh berikut menunjukkan SwipeView item geser yang bergantung pada arah gesek:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <SwipeView.RightItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Command="{Binding FavoriteCommand}" />
            <SwipeItem Text="Share"
                       IconImageSource="share.png"
                       BackgroundColor="LightYellow"
                       Command="{Binding ShareCommand}" />
        </SwipeItems>
    </SwipeView.RightItems>
    <!-- Content -->
</SwipeView>

Dalam contoh ini, konten dapat di-geser ke SwipeView kanan atau kiri. Menggesek ke kanan akan menampilkan item Hapus geser, sambil menggesek ke kiri akan menampilkan item Favorit dan Bagikan geser.

Peringatan

Hanya satu instans koleksi arah SwipeItems yang dapat diatur pada satu waktu pada SwipeView. Oleh karena itu, Anda tidak dapat memiliki dua LeftItems definisi pada SwipeView.

Peristiwa SwipeStarted, SwipeChanging, dan SwipeEnded melaporkan arah gesek melalui SwipeDirection properti dalam argumen peristiwa. Properti ini berjenis SwipeDirection, yang merupakan enumerasi yang terdiri dari empat anggota:

  • Right menunjukkan bahwa terjadi gesek kanan.
  • Left menunjukkan bahwa terjadi gesek kiri.
  • Up menunjukkan bahwa terjadi gesek ke atas.
  • Down menunjukkan bahwa terjadi gesek ke bawah.

Ambang gesek

SwipeViewThreshold termasuk properti, jenis double, yang mewakili jumlah unit independen perangkat yang memicu gerakan gesek untuk sepenuhnya mengungkapkan item gesek.

Contoh berikut menunjukkan SwipeView yang mengatur Threshold properti:

<SwipeView Threshold="200">
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Dalam contoh ini, SwipeView harus di-swiped untuk 200 unit independen perangkat sebelum SwipeItem sepenuhnya terungkap.

Mode gesek

Kelas SwipeItems memiliki Mode properti, yang menunjukkan efek interaksi gesek. Properti ini harus diatur ke salah SwipeMode satu anggota enumerasi:

  • Reveal menunjukkan bahwa gesek mengungkapkan item gesek. Ini adalah nilai SwipeItems.Mode default properti.
  • Execute menunjukkan bahwa gesek menjalankan item gesek.

Dalam mode mengungkapkan, pengguna menggesek untuk membuka menu yang SwipeView terdiri dari satu atau beberapa item gesek, dan harus secara eksplisit mengetuk item gesek untuk mengeksekusinya. Setelah item gesek dijalankan, item usap ditutup dan SwipeView konten ditampilkan kembali. Dalam mode eksekusi, pengguna menggesek untuk membuka menu yang terdiri dari satu item gesek SwipeView lagi, yang kemudian dijalankan secara otomatis. Setelah eksekusi, item gesek ditutup dan SwipeView konten ditampilkan kembali.

Contoh berikut menunjukkan konfigurasi SwipeView untuk menggunakan mode eksekusi:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems Mode="Execute">
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Dalam contoh ini, SwipeView konten dapat di-gesek ke kanan untuk mengungkapkan item gesek, yang segera dijalankan. Setelah eksekusi, SwipeView konten ditampilkan kembali.

Perilaku gesek

Kelas SwipeItems memiliki SwipeBehaviorOnInvoked properti, yang menunjukkan bagaimana perilaku SwipeView setelah item gesek dipanggil. Properti ini harus diatur ke salah SwipeBehaviorOnInvoked satu anggota enumerasi:

  • Auto menunjukkan bahwa dalam mode SwipeView ungkap penutupan setelah item gesek dipanggil, dan dalam mode SwipeView eksekusi tetap terbuka setelah item gesek dipanggil. Ini adalah nilai SwipeItems.SwipeBehaviorOnInvoked default properti.
  • Close menunjukkan bahwa menutup SwipeView setelah item geser dipanggil.
  • RemainOpen menunjukkan bahwa SwipeView tetap terbuka setelah item gesek dipanggil.

Contoh berikut menunjukkan konfigurasi SwipeView untuk tetap terbuka setelah item geser dipanggil:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems SwipeBehaviorOnInvoked="RemainOpen">
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Item gesek kustom

Item gesek kustom dapat ditentukan dengan jenis .SwipeItemView Kelas SwipeItemView berasal dari ContentView kelas , dan menambahkan properti berikut:

  • Command, dari jenis ICommand, yang dijalankan ketika item gesek diketuk.
  • CommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke Command.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Kelas SwipeItemView juga menentukan Invoked peristiwa yang dimunculkan saat item diketuk, setelah Command dijalankan.

Contoh berikut menunjukkan SwipeItemView objek dalam LeftItems koleksi SwipeView:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItemView Command="{Binding CheckAnswerCommand}"
                           CommandParameter="{Binding Source={x:Reference resultEntry}, Path=Text}">
                <StackLayout Margin="10"
                             WidthRequest="300">
                    <Entry x:Name="resultEntry"
                           Placeholder="Enter answer"
                           HorizontalOptions="CenterAndExpand" />
                    <Label Text="Check"
                           FontAttributes="Bold"
                           HorizontalOptions="Center" />
                </StackLayout>
            </SwipeItemView>
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Dalam contoh ini, SwipeItemView terdiri StackLayout dari yang berisi Entry dan Label. Setelah pengguna memasukkan input ke dalam Entry, sisanya SwipeViewItem dapat diketuk yang menjalankan yang ICommand ditentukan oleh SwipeItemView.Command properti .

Membuka dan menutup SwipeView secara terprogram

SwipeView termasuk Open metode dan Close , yang secara terprogram membuka dan menutup item gesek, masing-masing. Secara default, metode ini akan menganimasikan SwipeView saat dibuka atau ditutup.

Metode Open ini memerlukan OpenSwipeItem argumen, untuk menentukan arah SwipeView tempat akan dibuka. Enumerasi OpenSwipeItem memiliki empat anggota:

  • LeftItems, yang menunjukkan bahwa SwipeView akan dibuka dari kiri, untuk mengungkapkan item gesek dalam LeftItems koleksi.
  • TopItems, yang menunjukkan bahwa SwipeView akan dibuka dari bagian atas, untuk mengungkapkan item gesek dalam TopItems koleksi.
  • RightItems, yang menunjukkan bahwa SwipeView akan dibuka dari kanan, untuk mengungkapkan item gesek dalam RightItems koleksi.
  • BottomItems, yang menunjukkan bahwa SwipeView akan dibuka dari bawah, untuk mengungkapkan item gesek dalam BottomItems koleksi.

Selain itu, metode ini Open juga menerima argumen opsional bool yang menentukan apakah SwipeView akan dianimasikan saat terbuka.

SwipeView Diberi nama swipeView, contoh berikut menunjukkan cara membuka SwipeView untuk mengungkapkan item gesek dalam LeftItems koleksi:

swipeView.Open(OpenSwipeItem.LeftItems);

swipeView kemudian dapat ditutup dengan Close metode :

swipeView.Close();

Catatan

Metode ini Close juga menerima argumen opsional bool yang menentukan apakah SwipeView akan dianimasikan saat ditutup.

Menonaktifkan SwipeView

Aplikasi dapat memasukkan status di mana menggesek item konten bukan operasi yang valid. Dalam kasus seperti itu SwipeView , dapat dinonaktifkan dengan mengatur propertinya IsEnabled ke false. Ini akan mencegah pengguna untuk dapat menggesek konten untuk mengungkapkan item gesek.

Selain itu, saat menentukan Command properti SwipeItem atau SwipeItemView, CanExecute delegasi ICommand dapat ditentukan untuk mengaktifkan atau menonaktifkan item gesek.