Seret dan letakkan

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 drop, yang merupakan aplikasi atau area di bawah pointer, memproses data paket dan mengembalikan jenis operasi yang telah dilakukan.

Selama operasi drag-and-drop, antarmuka seret memberikan indikasi visual tentang jenis operasi yang sedang berlangsung. Umpan balik visual ini awalnya disediakan oleh sumber tetapi dapat diubah oleh target saat penunjuk bergerak di atasnya.

Seret dan lepas memungkinkan transfer data antar atau dalam berbagai jenis aplikasi, termasuk aplikasi Windows klasik, meskipun artikel ini berfokus pada API XAML untuk fitur seret dan lepas yang modern. Setelah diimplementasikan, drag-and-drop 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 event DragOver untuk memberi tahu sistem tentang jenis operasi seret yang dapat diterima oleh elemen.
Proses peristiwa Hilangkan untuk menerima konten yang dihilangkan.

Aktifkan penyeretan

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

Jelaskan dengan spesifik apa yang bisa di-drag. 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"/>

Anda tidak perlu melakukan pekerjaan lain untuk mengizinkan fungsi drag-and-drop, kecuali jika Anda ingin menyesuaikan antarmuka pengguna (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 fitur tarik dan lepas

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).

Nota

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>

Tangani acara 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. Menyalin adalah hal yang paling umum.

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

Memproses peristiwa Drop

Peristiwa Drop terjadi saat pengguna merilis item di area drop yang valid. Proses mereka 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, seret 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 memindahkan ke dalam folder atau 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 pengurutan ulang drag-and-drop pada ListViews

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

Lihat ListViewBase.CanReorderItems untuk informasi selengkapnya.

Menerapkan fitur drag and drop khusus

Kelas UIElement menangani sebagian besar implementasi fitur drag-and-drop untuk Anda. Tetapi jika mau, Anda dapat menerapkan versi Anda sendiri dengan menggunakan API di bawah ini.

Fungsionalitas	Windows App SDK namespace Microsoft.UI.Input.DragDrop
DragPrimitive	Operasi Seret
Membuat paket data	DataPackage
Serahkan kendali ke shell	DragOperation.StartAsync
Menerima objek yang dijatuhkan dari shell	DragDropManager.TargetRequested ICoreDropOperationTarget

Lihat juga

Komunikasi aplikasi ke aplikasi
AllowDrop
CanDrag
DragOver
OperasiDiterima
DataView
DragUIOverride
Drop
ApakahSumberSeret
DragStarting
DropCompleted

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-04-04