Menyeret dan Melepaskan

Artikel
07/17/2024

Seret dan letakkan adalah cara intuitif untuk mentransfer data dalam aplikasi atau antar aplikasi di desktop Windows. Seret dan letakkan memungkinkan pengguna mentransfer data antar aplikasi atau dalam aplikasi menggunakan gerakan standar (tekan-tahan-dan-geser dengan jari atau tekan-dan-geser dengan mouse atau stylus).

API Penting: Properti CanDrag, properti AllowDrop

Sumber seret, yang merupakan aplikasi atau area tempat gerakan seret dipicu, menyediakan data yang akan ditransfer dengan mengisi objek paket data yang dapat berisi format data standar, termasuk teks, RTF, HTML, bitmap, item penyimpanan, atau format data kustom. Sumber juga menunjukkan jenis operasi yang didukungnya: salin, pindahkan, atau tautkan. Saat pointer dilepaskan, penurunan terjadi. Target penurunan, yang merupakan aplikasi atau area di bawah pointer, memproses paket data dan mengembalikan jenis operasi yang dilakukannya.

Selama seret dan letakkan, UI seret menyediakan indikasi visual dari jenis operasi seret dan letakkan yang sedang berlangsung. Umpan balik visual ini awalnya disediakan oleh sumber tetapi dapat diubah oleh target saat penunjuk bergerak di atasnya.

Seret dan letakkan modern tersedia di semua perangkat yang mendukung UWP. Ini memungkinkan transfer data antara atau dalam segala jenis aplikasi, termasuk aplikasi Windows Klasik, meskipun artikel ini berfokus pada API XAML untuk seret dan letakkan modern. Setelah diimplementasikan, seret dan letakkan berfungsi dengan mulus ke semua arah, termasuk aplikasi-ke-aplikasi, aplikasi-ke-desktop, dan desktop-ke-aplikasi.

Berikut adalah gambaran umum tentang apa yang perlu Anda lakukan untuk mengaktifkan seret dan letakkan di aplikasi Anda:

Aktifkan penyeretan pada elemen dengan mengatur properti CanDrag-nya ke true.
Buat paket data. Sistem menangani gambar dan teks secara otomatis, tetapi untuk konten lain, Anda harus menangani peristiwa DragStarting dan DropCompleted dan menggunakannya untuk membuat paket data Anda sendiri.
Aktifkan penghapusan dengan mengatur properti AllowDrop ke true pada semua elemen yang dapat menerima konten yang dihilangkan.
Tangani peristiwa DragOver untuk memberi tahu sistem jenis operasi seret apa yang dapat diterima elemen.
Proses peristiwa Hilangkan untuk menerima konten yang dihilangkan.

Aktifkan penyeretan

Untuk mengaktifkan penyeretan pada elemen, atur properti CanDrag-nya ke true. Ini membuat elemen —dan elemen yang dikandungnya, dalam kasus koleksi seperti ListView—dapat diseret.

Jadilah spesifik tentang apa yang dapat diseret. Pengguna tidak ingin menyeret semuanya di aplikasi Anda, hanya item tertentu, seperti gambar atau teks.

Berikut cara mengatur CanDrag.

<Image x:Name="Image" CanDrag="True" Margin="10,292,10,0" Height="338"></Image>

Anda tidak perlu melakukan pekerjaan lain untuk mengizinkan penyeretan, kecuali Anda ingin menyesuaikan UI (yang dibahas nanti dalam artikel ini). Menjatuhkan memerlukan beberapa langkah lagi.

Membuat paket data

Dalam kebanyakan kasus, sistem akan membuat paket data untuk Anda. Sistem secara otomatis menangani:

Gambar
Teks

Untuk konten lain, Anda harus menangani peristiwa DragStarting dan DropCompleted dan menggunakannya untuk membuat DataPackage Anda sendiri.

Aktifkan penghilangan

Markup berikut menunjukkan bagaimana properti AllowDrop dapat digunakan untuk menentukan bahwa area aplikasi adalah target drop yang valid untuk item yang diseret (area yang ditentukan tidak boleh memiliki latar belakang null, harus dapat menerima input pointer, dan item tidak dapat dihilangkan di mana saja selain area yang ditentukan).

Catatan

Biasanya, elemen UI memiliki latar belakang null secara default. Jika Anda ingin pengguna dapat menghilangkan item di mana saja dalam aplikasi Anda, latar belakang aplikasi tidak boleh null (diatur Background="Transparent" jika latar belakang tidak boleh terlihat).

<Grid AllowDrop="True" DragOver="Grid_DragOver" Drop="Grid_Drop"
      Background="LightBlue" Margin="10,10,10,353">
    <TextBlock>Drop anywhere in the blue area</TextBlock>
</Grid>

Menangani peristiwa DragOver

Peristiwa DragOver diaktifkan saat pengguna telah menyeret item di atas aplikasi Anda, tetapi belum menghilangkannya. Dalam handler ini, Anda perlu menentukan jenis operasi apa yang didukung aplikasi Anda dengan menggunakan properti AcceptedOperation. Salin adalah yang paling umum.

private void Grid_DragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Copy;
}

Memproses peristiwa Hilangkan

Peristiwa Drop terjadi saat pengguna merilis item di area drop yang valid. Proses dengan menggunakan properti DataView .

Untuk kesederhanaan dalam contoh di bawah ini, kami akan menganggap pengguna menjatuhkan satu foto dan mengaksesnya secara langsung. Pada kenyataannya, pengguna dapat menghilangkan beberapa item dengan berbagai format secara bersamaan. Aplikasi Anda harus menangani kemungkinan ini dengan memeriksa jenis file apa yang dihilangkan dan berapa banyak, dan memproses masing-masing. Anda juga harus mempertimbangkan untuk memberi tahu pengguna jika mereka mencoba melakukan sesuatu yang tidak didukung aplikasi Anda.

private async void Grid_Drop(object sender, DragEventArgs e)
{
    if (e.DataView.Contains(StandardDataFormats.StorageItems))
    {
        var items = await e.DataView.GetStorageItemsAsync();
        if (items.Count > 0)
        {
            var storageFile = items[0] as StorageFile;
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(await storageFile.OpenAsync(FileAccessMode.Read));
            // Set the image on the main page to the dropped image
            Image.Source = bitmapImage;
        }
    }
}

Menyesuaikan UI

Sistem menyediakan UI default untuk menyeret dan menjatuhkan. Namun, Anda juga dapat memilih untuk menyesuaikan berbagai bagian UI dengan mengatur keterangan dan glyph kustom, atau dengan memilih untuk tidak menampilkan UI sama sekali. Untuk menyesuaikan UI, gunakan properti DragEventArgs.DragUIOverride.

private void Grid_DragOverCustomized(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Copy;
    e.DragUIOverride.Caption = "Custom text here"; // Sets custom UI text
    // Sets a custom glyph
    e.DragUIOverride.SetContentFromBitmapImage(
        new BitmapImage(
            new Uri("ms-appx:///Assets/CustomImage.png", UriKind.RelativeOrAbsolute)));
    e.DragUIOverride.IsCaptionVisible = true; // Sets if the caption is visible
    e.DragUIOverride.IsContentVisible = true; // Sets if the dragged content is visible
    e.DragUIOverride.IsGlyphVisible = true; // Sets if the glyph is visibile
}

Saat menggunakan sentuhan , menyeret UIElement dan membuka menu konteksnya berbagi gerakan sentuh yang sama; masing-masing dimulai dengan tekan dan tahan. Berikut adalah bagaimana sistem membedakan antara dua tindakan untuk elemen di aplikasi Anda yang mendukung keduanya:

Jika pengguna menekan dan menahan item dan mulai menyeretnya dalam 500 milidetik, item diseret dan menu konteks tidak ditampilkan.
Jika pengguna menekan dan menahan tetapi tidak menyeret dalam 500 milidetik, menu konteks dibuka.
Setelah menu konteks terbuka, jika pengguna mencoba menyeret item (tanpa mengangkat jari), menu konteks dimatikan dan seret akan dimulai.

Menunjuk item dalam ListView atau GridView sebagai folder

Anda dapat menentukan ListViewItem atau GridViewItem sebagai folder. Ini sangat berguna untuk skenario TreeView dan File Explorer. Untuk melakukannya, atur properti AllowDrop secara eksplisit ke True pada item tersebut.

Sistem akan secara otomatis menampilkan animasi yang sesuai untuk menjatuhkan ke folder versus item non-folder. Kode aplikasi Anda harus terus menangani peristiwa Jatuhkan pada item folder (serta pada item non-folder) untuk memperbarui sumber data dan menambahkan item yang dihilangkan ke folder target.

Mengaktifkan penyusunan ulang seret dan letakkan dalam ListViews

ListViewmendukung pengurutan ulang berbasis seret di luar kotak, menggunakan API yang sangat mirip dengan API CanDrop yang dijelaskan dalam artikel ini. Minimal, Anda menambahkan properti AllowDrop dan CanReorderItems .

Lihat ListViewBase.CanReorderItems untuk informasi selengkapnya.

Menerapkan seret dan letakkan kustom

Kelas UIElement melakukan sebagian besar pekerjaan menerapkan seret dan letakkan untuk Anda. Tetapi jika mau, Anda dapat menerapkan versi Anda sendiri dengan menggunakan API di bawah ini.

Fungsi	Namespace Layanan WinAppSDK API Microsoft.UI.Input.DragDrop	UWP API Namespace Layanan Windows.Applicationmodel.DataTransfer.DragDrop.Core
DragPrimitive	Pengoperasian Seret	CoreDragOperation
Membuat paket data	DataPackage	same
Seret ke shell	DragOperation.StartAsync	CoreDragOperation.StartAsync
Menerima penurunan dari shell	DragDropManager.TargetRequested ICoreDropOperationTarget	CoreDragDropManager.TargetRequested ICoreDropOperationTarget

Bagikan melalui