Menambahkan pengenal gerakan seret dan lepas

Artikel
04/14/2021

Gerakan seret dan letakkan memungkinkan item, dan paket data terkait, untuk diseret dari satu lokasi di layar ke lokasi lain menggunakan gerakan berkelanjutan. Seret dan letakkan dapat terjadi dalam satu aplikasi, atau dapat dimulai dalam satu aplikasi dan berakhir di aplikasi lain.

Penting

Pengenalan gerakan seret dan lepas didukung di iOS, Android, dan Platform Windows Universal (UWP). Namun, pada iOS diperlukan platform minimum iOS 11.

Sumber seret, yang merupakan elemen tempat gerakan seret dimulai, dapat menyediakan data untuk ditransfer dengan mengisi objek paket data. Saat sumber seret dilepaskan, penurunan terjadi. Target drop, yang merupakan elemen di bawah sumber seret, lalu memproses paket data.

Proses untuk mengaktifkan seret dan letakkan dalam aplikasi adalah sebagai berikut:

Aktifkan seret pada elemen dengan menambahkan DragGestureRecognizer objek ke koleksinya GestureRecognizers . Untuk informasi selengkapnya, lihat Mengaktifkan seret.
[opsional] Buat paket data. Xamarin.Forms secara otomatis mengisi paket data untuk kontrol gambar dan teks, tetapi untuk konten lain Anda harus membuat paket data Anda sendiri. Untuk informasi selengkapnya, lihat Membangun paket data.
Aktifkan drop pada elemen dengan menambahkan objek koleksinya DropGestureRecognizer GestureRecognizers . Untuk informasi selengkapnya, lihat Mengaktifkan drop.
[opsional] DropGestureRecognizer.DragOver Tangani peristiwa untuk menunjukkan jenis operasi yang diizinkan oleh target penghilangan. Untuk informasi selengkapnya, lihat Menangani peristiwa DragOver.
[opsional] Proses paket data untuk menerima konten yang dihilangkan. Xamarin.Forms akan secara otomatis mengambil data gambar dan teks dari paket data, tetapi untuk konten lain Anda harus memproses paket data. Untuk informasi selengkapnya, lihat Memproses paket data.

Catatan

Menyeret item ke dan dari CollectionView saat ini tidak didukung.

Aktifkan seret

Di Xamarin.Forms, pengenalan gerakan seret disediakan oleh DragGestureRecognizer kelas . Kelas ini mendefinisikan properti berikut:

CanDrag, dari jenis bool, yang menunjukkan apakah elemen yang dilampirkan oleh pengenal gerakan dapat menjadi sumber seret. Nilai default properti ini adalah true.
DragStartingCommand, dari jenis ICommand, yang dijalankan ketika gerakan seret pertama kali dikenali.
DragStartingCommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke DragStartingCommand.
DropCompletedCommand, dari jenis ICommand, yang dijalankan ketika sumber seret dihilangkan.
DropCompletedCommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke DropCompletedCommand.

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

Kelas juga DragGestureRecognizer mendefinisikan DragStarting dan DropCompleted peristiwa yang diaktifkan asalkan CanDrag properti tersebut adalah true. DragGestureRecognizer Saat objek mendeteksi gerakan seret, objek menjalankan DragStartingCommand dan memanggil DragStarting peristiwa. Kemudian, ketika DragGestureRecognizer objek mendeteksi penyelesaian gerakan drop, objek menjalankan DropCompletedCommand dan memanggil DropCompleted peristiwa.

Objek DragStartingEventArgs yang menyertai DragStarting peristiwa menentukan properti berikut:

Handled, dari jenis bool, menunjukkan apakah penanganan aktivitas telah menangani peristiwa atau apakah Xamarin.Forms harus melanjutkan pemrosesannya sendiri.
Cancel, dari jenis bool, menunjukkan apakah acara harus dibatalkan.
Data, dari jenis DataPackage, menunjukkan paket data yang menyertai sumber seret. Ini adalah properti baca-saja.

Contoh XAML berikut menunjukkan yang DragGestureRecognizer dilampirkan ke Image:

<Image Source="monkeyface.png">
    <Image.GestureRecognizers>
        <DragGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

Dalam contoh ini, gerakan seret dapat dimulai pada Image.

Tip

Di iOS, Android, dan UWP, gerakan seret dimulai dengan tekan lama diikuti dengan seret.

Membangun paket data

Xamarin.Forms akan secara otomatis membuat paket data untuk Anda, saat seret dimulai, untuk kontrol berikut:

Kontrol teks. Nilai teks dapat diseret dari CheckBoxobjek , , DatePicker, EntryEditor, Label, RadioButton, Switch, dan TimePicker .
Kontrol gambar. Gambar dapat diseret dari Buttonkontrol , Image, dan ImageButton .

Tabel berikut ini memperlihatkan properti yang dibaca, dan konversi apa pun yang dicoba, saat seret dimulai pada kontrol teks:

Menguasai	Properti	Konversi
`CheckBox`	`IsChecked`	`bool` dikonversi ke `string`.
`DatePicker`	`Date`	`DateTime` dikonversi ke `string`.
`Editor`	`Text`
`Entry`	`Text`
`Label`	`Text`
`RadioButton`	`IsChecked`	`bool` dikonversi ke `string`.
`Switch`	`IsToggled`	`bool` dikonversi ke `string`.
`TimePicker`	`Time`	`TimeSpan` dikonversi ke `string`.

Untuk konten selain teks dan gambar, Anda harus membuat paket data sendiri.

Paket data diwakili oleh DataPackage kelas , yang menentukan properti berikut:

Properties, dari jenis DataPackagePropertySet, yang merupakan kumpulan properti yang terdiri dari data yang terkandung dalam DataPackage. Properti ini adalah properti baca-saja.
Image, dari jenis ImageSource, yang merupakan gambar yang terkandung dalam DataPackage.
Text, dari jenis string, yang merupakan teks yang terkandung dalam DataPackage.
View, dari jenis DataPackageView, yang merupakan versi baca-saja dari DataPackage.

Kelas DataPackagePropertySet mewakili tas properti yang disimpan sebagai Dictionary<string,object>. Untuk informasi tentang DataPackageView kelas , lihat Memproses paket data.

Menyimpan data gambar atau teks

Data gambar atau teks dapat dikaitkan dengan sumber seret dengan menyimpan data di DataPackage.Image properti atau DataPackage.Text . Ini dapat dicapai di handler untuk peristiwa tersebut DragStarting .

Contoh XAML berikut menunjukkan DragGestureRecognizer yang mendaftarkan handler untuk peristiwa:DragStarting

<Path Stroke="Black"
      StrokeThickness="4">
    <Path.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Path.GestureRecognizers>
    <Path.Data>
        <!-- PathGeometry goes here -->
    </Path.Data>
</Path>

Dalam contoh ini, DragGestureRecognizer dilampirkan ke Path objek. Peristiwa DragStarting diaktifkan ketika gerakan seret terdeteksi pada Path, yang menjalankan penanganan OnDragStarting aktivitas:

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    e.Data.Text = "My text data goes here";
}

Objek DragStartingEventArgs yang menyertai DragStarting peristiwa memiliki Data properti, jenis DataPackage. Dalam contoh ini, Text properti DataPackage objek diatur ke string. kemudian DataPackage dapat diakses saat dihilangkan, untuk mengambil string.

Menyimpan data di tas properti

Data apa pun, termasuk gambar dan teks, dapat dikaitkan dengan sumber seret dengan menyimpan data dalam DataPackage.Properties koleksi. Ini dapat dicapai di handler untuk peristiwa tersebut DragStarting .

Contoh XAML berikut menunjukkan DragGestureRecognizer yang mendaftarkan handler untuk peristiwa:DragStarting

<Rectangle Stroke="Red"
           Fill="DarkBlue"
           StrokeThickness="4"
           HeightRequest="200"
           WidthRequest="200">
    <Rectangle.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Rectangle.GestureRecognizers>
</Rectangle>

Dalam contoh ini, DragGestureRecognizer dilampirkan ke Rectangle objek. Peristiwa DragStarting diaktifkan ketika gerakan seret terdeteksi pada Rectangle, yang menjalankan penanganan OnDragStarting aktivitas:

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    Shape shape = (sender as Element).Parent as Shape;
    e.Data.Properties.Add("Square", new Square(shape.Width, shape.Height));
}

Objek DragStartingEventArgs yang menyertai DragStarting peristiwa memiliki Data properti, jenis DataPackage. Kumpulan Properties DataPackage objek, yang merupakan Dictionary<string, object> koleksi, dapat dimodifikasi untuk menyimpan data yang diperlukan. Dalam contoh ini, Properties kamus dimodifikasi untuk menyimpan Square objek, yang mewakili ukuran Rectangle, terhadap kunci "Persegi".

Aktifkan penghilangan

Di Xamarin.Forms, hilangkan pengenalan gerakan disediakan oleh DropGestureRecognizer kelas . Kelas ini mendefinisikan properti berikut:

AllowDrop, dari jenis bool, yang menunjukkan apakah elemen yang dilampirkan oleh pengenal gerakan dapat menjadi target penurunan. Nilai default properti ini adalah true.
DragOverCommand, dari jenis ICommand, yang dijalankan ketika sumber seret diseret ke target drop.
DragOverCommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke DragOverCommand.
DragLeaveCommand, dari jenis ICommand, yang dijalankan ketika sumber seret diseret dari target pengantaran.
DragLeaveCommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke DragLeaveCommand.
DropCommand, dari jenis ICommand, yang dijalankan ketika sumber seret dihilangkan di atas target drop.
DropCommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke DropCommand.

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

Kelas juga DropGestureRecognizer mendefinisikan DragOver, DragLeave, dan Drop peristiwa yang diaktifkan asalkan AllowDrop properti adalah true. DropGestureRecognizer Saat mengenali sumber seret di atas target penghilanganDragOverCommand, sumber tersebut menjalankan dan memanggil DragOver peristiwa. Kemudian, jika sumber seret diseret dari target pengantaran, menjalankan DropGestureRecognizer DragLeaveCommand dan memanggil DragLeave peristiwa. Akhirnya, ketika DropGestureRecognizer mengenali gerakan jatuh di atas target drop, ia menjalankan DropCommand dan memanggil Drop peristiwa.

Kelas DragEventArgs , yang menyertai DragOver peristiwa dan DragLeave , menentukan properti berikut:

Data, dari jenis DataPackage, yang berisi data yang terkait dengan sumber seret. Properti ini bersifat hanya baca.
AcceptedOperation, dari jenis DataPackageOperation, yang menentukan operasi mana yang diizinkan oleh target penurunan.

Untuk informasi tentang DataPackageOperation enumerasi, lihat Menangani peristiwa DragOver.

Kelas DropEventArgs yang menyertai Drop peristiwa menentukan properti berikut:

Data, dari jenis DataPackageView, yang merupakan versi baca-saja dari paket data.
Handled, dari jenis bool, menunjukkan apakah penanganan aktivitas telah menangani peristiwa atau apakah Xamarin.Forms harus melanjutkan pemrosesannya sendiri.

Contoh XAML berikut menunjukkan yang DropGestureRecognizer dilampirkan ke Image:

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

Dalam contoh ini, ketika sumber seret dihilangkan pada Image target drop, sumber seret akan disalin ke target drop, asalkan sumber seret adalah ImageSource. Ini terjadi karena Xamarin.Forms secara otomatis menyalin gambar yang diseret, dan teks, ke target penurunan yang kompatibel.

Menangani peristiwa DragOver

Peristiwa DropGestureRecognizer.DragOver dapat ditangani secara opsional untuk menunjukkan jenis operasi mana yang diizinkan oleh target penghilangan. Ini dapat dicapai dengan mengatur AcceptedOperation properti, jenis DataPackageOperation, objek DragEventArgs yang menyertai DragOver peristiwa.

Enumerasi DataPackageOperation menentukan anggota berikut:

None, menunjukkan bahwa tidak ada tindakan yang akan dilakukan.
Copy, menunjukkan bahwa konten sumber seret akan disalin ke target drop.

Penting

DragEventArgs Saat objek dibuat, AcceptedOperation properti default ke DataPackageOperation.Copy.

Contoh XAML berikut menunjukkan DropGestureRecognizer yang mendaftarkan handler untuk peristiwa:DragOver

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer DragOver="OnDragOver" />
    </Image.GestureRecognizers>
</Image>

Dalam contoh ini, DropGestureRecognizer dilampirkan ke Image objek. Peristiwa DragOver diaktifkan saat sumber seret diseret ke atas target drop, tetapi belum dihilangkan, yang menjalankan OnDragOver penanganan aktivitas:

void OnDragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.None;
}

Dalam contoh ini, AcceptedOperation properti DragEventArgs objek diatur ke DataPackageOperation.None. Ini memastikan bahwa tidak ada tindakan yang diambil saat sumber seret dihilangkan di atas target drop.

Memproses paket data

Peristiwa Drop diaktifkan saat sumber seret dilepaskan melalui target drop. Ketika ini terjadi, Xamarin.Forms akan secara otomatis mencoba mengambil data dari paket data, ketika sumber seret dihilangkan ke kontrol berikut:

Kontrol teks. Nilai teks dapat dihilangkan ke CheckBoxobjek , , DatePicker, EditorEntry, Label, RadioButton, Switch, dan TimePicker .
Kontrol gambar. Gambar dapat dihilangkan ke Buttonkontrol , Image, dan ImageButton .

Tabel berikut ini memperlihatkan properti yang diatur, dan konversi apa pun yang dicoba, saat sumber seret berbasis teks dihilangkan pada kontrol teks:

Menguasai	Properti	Konversi
`CheckBox`	`IsChecked`	`string` dikonversi menjadi `bool`.
`DatePicker`	`Date`	`string` dikonversi menjadi `DateTime`.
`Editor`	`Text`
`Entry`	`Text`
`Label`	`Text`
`RadioButton`	`IsChecked`	`string` dikonversi menjadi `bool`.
`Switch`	`IsToggled`	`string` dikonversi menjadi `bool`.
`TimePicker`	`Time`	`string` dikonversi menjadi `TimeSpan`.

Untuk konten selain teks dan gambar, Anda harus memproses paket data sendiri.

Kelas DropEventArgs yang menyertai Drop peristiwa mendefinisikan Data properti, jenis DataPackageView. Properti ini mewakili versi baca-saja dari paket data.

Mengambil data gambar atau teks

Data gambar atau teks dapat diambil dari paket data di handler untuk Drop peristiwa, menggunakan metode yang ditentukan di DataPackageView kelas .

Kelas DataPackageView ini mencakup GetImageAsync metode dan GetTextAsync . Metode mengambil GetImageAsync gambar dari paket data, yang disimpan di DataPackage.Image properti , dan mengembalikan Task<ImageSource>. Demikian pula, metode mengambil GetTextAsync teks dari paket data, yang disimpan di DataPackage.Text properti , dan mengembalikan Task<string>.

Contoh berikut menunjukkan penanganan Drop aktivitas yang mengambil teks dari paket data untuk Path:

async void OnDrop(object sender, DropEventArgs e)
{
    string text = await e.Data.GetTextAsync();

    // Perform logic to take action based on the text value.
}

Dalam contoh ini, data teks diambil dari paket data menggunakan GetTextAsync metode . Tindakan berdasarkan nilai teks kemudian dapat diambil.

Mengambil data dari tas properti

Data apa pun dapat diambil dari paket data di handler untuk peristiwa tersebut Drop , dengan mengakses Properties pengumpulan paket data.

Kelas DataPackageView mendefinisikan Properties properti, jenis DataPackagePropertySetView. Kelas DataPackagePropertySetView mewakili tas properti baca-saja yang disimpan sebagai Dictionary<string, object>.

Contoh berikut menunjukkan penanganan Drop aktivitas yang mengambil data dari kantong properti paket data untuk Rectangle:

void OnDrop(object sender, DropEventArgs e)
{
    Square square = (Square)e.Data.Properties["Square"];

    // Perform logic to take action based on retrieved value.
}

Dalam contoh ini, Square objek diambil dari tas properti paket data, dengan menentukan kunci kamus "Persegi". Tindakan berdasarkan nilai yang diambil kemudian dapat diambil.

Bagikan melalui