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 antaraplikasi maupun di dalam aplikasi apa pun, termasuk aplikasi desktop Win32, meskipun artikel ini berfokus pada API XAML untuk fungsionalitas seret dan lepas modern. Setelah diimplementasikan, seret dan letakkan berfungsi di 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:

  1. Aktifkan penyeretan pada elemen dengan mengatur properti CanDrag-nya ke true.
  2. 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.
  3. Aktifkan penghapusan dengan mengatur properti AllowDrop ke true pada semua elemen yang dapat menerima konten yang dihilangkan.
  4. Tangani event DragOver untuk memberi tahu sistem tentang jenis operasi seret yang dapat diterima oleh elemen.
  5. 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.

Nota

Peristiwa DragStarting yang dijelaskan di sini adalah bagian dari UIElement dan merupakan peristiwa yang benar untuk membangun kustom DataPackage. Ini berbeda dari kejadian DragStarted pada kontrol Thumb, yang digunakan untuk operasi seret pada penggeser, bukan untuk transfer data.

Menangani peristiwa DragStarting

Peristiwa DragStarting diaktifkan saat sistem memulai operasi seret pada elemen yang memiliki CanDrag="True". Di penanganan aktivitas, Anda menggunakan DragStartingEventArgs untuk mengisi properti Data -nya ( DataPackage) dengan konten yang ingin Anda transfer, dan mengatur RequestedOperation untuk menunjukkan apakah operasi tersebut adalah salinan, pemindahan, atau tautan.

Pertama, siapkan elemen XAML dengan penangan peristiwa DragStarting dan DropCompleted:

<TextBlock x:Name="DraggableText" CanDrag="True"
           DragStarting="DraggableText_DragStarting"
           DropCompleted="DraggableText_DropCompleted"
           Text="Drag this text to another location"/>

Kemudian, di code-behind, tangani peristiwa DragStarting untuk mengisi paket data:

private void DraggableText_DragStarting(UIElement sender, DragStartingEventArgs args)
{
    // Add the text content to the data package
    args.Data.SetText(((TextBlock)sender).Text);

    // Indicate that both Copy and Move are acceptable
    args.Data.RequestedOperation = DataPackageOperation.Copy | DataPackageOperation.Move;
}

Jika Anda perlu melakukan pekerjaan asinkron saat membuat paket data (misalnya, membaca file), gunakan metode GetDeferral untuk menjaga peristiwa tetap aktif hingga pekerjaan selesai:

private async void DraggableText_DragStarting(UIElement sender, DragStartingEventArgs args)
{
    var deferral = args.GetDeferral();
    try
    {
        // Perform async work here, for example loading file content
        string content = await LoadCustomTextAsync();
        args.Data.SetText(content);
        args.Data.RequestedOperation = DataPackageOperation.Copy;
    }
    finally
    {
        deferral.Complete();
    }
}

Menangani peristiwa DropCompleted

Peristiwa DropCompleted dipicu pada sumber drag setelah operasi drag-and-drop selesai—baik item berhasil diletakkan maupun drag dibatalkan. Gunakan properti DropCompletedEventArgs.DropResult untuk menentukan hasil dan mengambil tindakan, seperti menghapus item sumber jika Pemindahan dilakukan:

private void DraggableText_DropCompleted(UIElement sender, DropCompletedEventArgs args)
{
    if (args.DropResult == DataPackageOperation.Move)
    {
        // The target accepted the data as a Move, so clear the source
        ((TextBlock)sender).Text = string.Empty;
    }
}

Untuk contoh lengkap yang berfungsi tentang seret dan lepas kustom dengan paket data, lihat sampel XAML drag-and-drop di GitHub.

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
}

Membuka menu konteks pada item yang dapat Anda seret dengan sentuhan

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 SDK Aplikasi Windows
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
IDropOperationTarget

Lihat juga

  • Last updated on