Xamarin.Forms SwipeView
SwipeView
adalah kontrol kontainer yang membungkus item konten, dan menyediakan item menu konteks yang diungkapkan oleh gerakan gesek:
SwipeView
menentukan properti berikut:
LeftItems
, dari jenisSwipeItems
, yang mewakili item gesek yang dapat dipanggil ketika kontrol disusutkan dari sisi kiri.RightItems
, dari jenisSwipeItems
, yang mewakili item gesek yang dapat dipanggil ketika kontrol di gesek dari sisi kanan.TopItems
, dari jenisSwipeItems
, yang mewakili item gesek yang dapat dipanggil saat kontrol disapkan dari atas ke bawah.BottomItems
, dari jenisSwipeItems
, yang mewakili item gesek yang dapat dipanggil saat kontrol disapkan dari bawah ke atas.Threshold
, dari jenisdouble
, 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
diaktifkan ketika gesek dimulai. ObjekSwipeStartedEventArgs
yang menyertai peristiwa ini memilikiSwipeDirection
properti, berjenisSwipeDirection
.SwipeChanging
diaktifkan saat gesek bergerak. ObjekSwipeChangingEventArgs
yang menyertai peristiwa ini memilikiSwipeDirection
properti, jenisSwipeDirection
, danOffset
properti jenisdouble
.SwipeEnded
diaktifkan ketika gesek berakhir. ObjekSwipeEndedEventArgs
yang menyertai peristiwa ini memilikiSwipeDirection
properti, jenisSwipeDirection
, danIsOpen
properti jenisbool
.
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 iOS dan Mode Transisi Gesek 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
, TopItems
atau 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 = Color.LightGreen
};
favoriteSwipeItem.Invoked += OnFavoriteSwipeItemInvoked;
SwipeItem deleteSwipeItem = new SwipeItem
{
Text = "Delete",
IconImageSource = "delete.png",
BackgroundColor = Color.LightPink
};
deleteSwipeItem.Invoked += OnDeleteSwipeItemInvoked;
List<SwipeItem> swipeItems = new List<SwipeItem>() { favoriteSwipeItem, deleteSwipeItem };
// SwipeView content
Grid grid = new Grid
{
HeightRequest = 60,
WidthRequest = 300,
BackgroundColor = Color.LightGray
};
grid.Children.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
:
Item gesek digunakan untuk melakukan tindakan pada SwipeView
konten, dan terungkap saat kontrol disusutkan dari sisi kiri:
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 jenisSwipeMode
, yang menunjukkan efek interaksi gesek. Untuk informasi selengkapnya tentang mode gesek, lihat Mode gesek.SwipeBehaviorOnInvoked
, dari jenisSwipeBehaviorOnInvoked
, yang menunjukkan bagaimana perilakuSwipeView
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
, jenisColor
, yang menentukan warna latar belakang item gesek. Properti ini didukung oleh properti yang dapat diikat. - Peristiwa
Invoked
, yang diaktifkan saat item geser dijalankan.
Penting
Kelas MenuItem
mendefinisikan beberapa properti, termasuk Command
, , CommandParameter
IconImageSource
, 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 Xamarin.Forms MenuItem.
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
, , IconImageSource
dan BackgroundColor
:
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
SwipeView
mendukung 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
SwipeView
Threshold
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.
Catatan
Saat ini, Threshold
properti hanya diimplementasikan di iOS dan Android.
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 nilaiSwipeItems.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 modeSwipeView
ungkap penutupan setelah item gesek dipanggil, dan dalam modeSwipeView
eksekusi tetap terbuka setelah item gesek dipanggil. Ini adalah nilaiSwipeItems.SwipeBehaviorOnInvoked
default properti.Close
menunjukkan bahwa menutupSwipeView
setelah item geser dipanggil.RemainOpen
menunjukkan bahwaSwipeView
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 jenisICommand
, yang dijalankan ketika item gesek diketuk.CommandParameter
, dari jenisobject
, yang merupakan parameter yang diteruskan keCommand
.
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 diaktifkan 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 bahwaSwipeView
akan dibuka dari kiri, untuk mengungkapkan item gesek dalamLeftItems
koleksi.TopItems
, yang menunjukkan bahwaSwipeView
akan dibuka dari bagian atas, untuk mengungkapkan item gesek dalamTopItems
koleksi.RightItems
, yang menunjukkan bahwaSwipeView
akan dibuka dari kanan, untuk mengungkapkan item gesek dalamRightItems
koleksi.BottomItems
, yang menunjukkan bahwaSwipeView
akan dibuka dari bawah, untuk mengungkapkan item gesek dalamBottomItems
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.