Przeciągnij i upuść

Przeciąganie i upuszczanie to intuicyjny sposób przesyłania danych w aplikacji lub między aplikacjami na pulpicie systemu Windows. Przeciąganie i upuszczanie umożliwia użytkownikowi transfer danych między aplikacjami lub wewnątrz aplikacji za pomocą standardowego gestu (naciśnij, przytrzymaj i przeciągnij palcem lub naciśnij i przesuń myszą lub rysikiem).

ważne interfejsy API: właściwość CanDrag, właściwość AllowDrop

Źródło przeciągania, czyli aplikacja lub obszar, w którym jest wyzwalany gest przeciągania, udostępnia dane do przesyłania, wypełniając obiekt pakietu danych, który może zawierać standardowe formaty danych, w tym tekst, RTF, HTML, mapy bitowe, elementy magazynu lub niestandardowe formaty danych. Źródło wskazuje również rodzaj operacji, które obsługuje: kopiowanie, przenoszenie lub łączenie. Po zwolnieniu wskaźnika następuje upuszczenie. Cel upuszczania, który jest aplikacją lub obszarem znajdującym się pod wskaźnikiem, przetwarza pakiet danych i zwraca rodzaj wykonanej operacji.

Podczas przeciągania i upuszczania interfejs użytkownika przeciągania zapewnia wizualne wskazanie typu operacji przeciągania i upuszczania, która ma miejsce. Ta informacja zwrotna wizualna jest początkowo dostarczana przez źródło, ale może zostać zmieniona przez elementy docelowe, gdy wskaźnik przemieszcza się nad nimi.

Nowoczesne przeciąganie i upuszczanie jest dostępne na wszystkich urządzeniach obsługujących platformę UWP. Umożliwia przesyłanie danych między dowolnymi aplikacjami lub w ich obrębie, w tym klasyczne aplikacje systemu Windows, chociaż ten artykuł koncentruje się na interfejsie API XAML, który służy do nowoczesnego przeciągania i upuszczania. Po zaimplementowaniu przeciąganie i upuszczanie działa bezproblemowo we wszystkich kierunkach, w tym z aplikacji do aplikacji, z aplikacji na pulpit, oraz z pulpitu do aplikacji.

Oto omówienie tego, co należy zrobić, aby włączyć przeciąganie i upuszczanie w aplikacji:

1. Włącz przeciąganie elementu, ustawiając właściwość CanDrag na true.
2. Skompiluj pakiet danych. System automatycznie obsługuje obrazy i tekst, ale w przypadku innej zawartości należy obsługiwać zdarzenia DragStarting i DropCompleted i używać tych zdarzeń do konstruowania własnego pakietu danych.
3. Włącz możliwość upuszczania, ustawiając właściwość AllowDrop na wartość true na wszystkich elementach, które mogą odbierać upuszczoną zawartość.
4. Obsłuż zdarzenie DragOver, aby poinformować system, jakie typy operacji przeciągania może przyjąć element.
5. Przetwórz zdarzenie Drop, aby odebrać upuszczoną zawartość.

Włącz przeciąganie

Aby włączyć przeciąganie elementu, ustaw jego właściwość CanDrag na true. Spowoduje to, że element — i zawarte w nim elementy — w przypadku kolekcji takich jak ListView — można przeciągać.

Określ, co można przeciągać. Użytkownicy nie będą chcieli przeciągać wszystkiego w aplikacji, tylko niektórych elementów, takich jak obrazy lub tekst.

Poniżej przedstawiono sposób ustawiania CanDrag.

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

Nie musisz wykonywać żadnej innej pracy, aby umożliwić przeciąganie, chyba że chcesz dostosować interfejs użytkownika (który został omówiony w dalszej części tego artykułu). Upuszczanie wymaga wykonania kilku dodatkowych kroków.

Konstruowanie pakietu danych

W większości przypadków system utworzy pakiet danych. System automatycznie obsługuje:

• Obrazy
• Tekst

W przypadku innej zawartości należy obsługiwać zdarzenia DragStarting i DropCompleted i wykorzystywać je do tworzenia własnych DataPackage.

Włącz funkcję upuszczania

Poniższy znacznik pokazuje, jak właściwość AllowDrop może służyć do określenia, że obszar aplikacji jest prawidłowym celem upuszczania dla przeciąganego elementu (określony obszar nie może mieć tła o wartości null, musi być w stanie odbierać dane wejściowe wskaźnika, a element nie może zostać porzucony w dowolnym miejscu niż określony obszar).

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

Obsługa zdarzenia DragOver

Zdarzenie DragOver wyzwalane jest, gdy użytkownik przeciągnął element nad aplikację, ale jeszcze go nie upuścił. W tej procedurze obsługi należy określić, jakiego rodzaju operacje obsługuje aplikacja przy użyciu właściwości AcceptedOperation. Kopiowanie jest najbardziej typowe.

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

Przetwarzanie zdarzenia upuszczania

Zdarzenie Drop występuje, gdy użytkownik upuszcza elementy w prawidłowym obszarze, w którym można upuszczać. Przetwarzaj je przy użyciu właściwości DataView.

Dla uproszczenia w poniższym przykładzie przyjęto założenie, że użytkownik przeciągnął pojedyncze zdjęcie i uzyskuje do niego bezpośredni dostęp. W rzeczywistości użytkownicy mogą jednocześnie usuwać wiele elementów o różnych formatach. Aplikacja powinna obsługiwać tę możliwość, sprawdzając, jakie typy plików zostały porzucone i ile istnieje, i odpowiednio przetworzyć poszczególne typy. Należy również rozważyć powiadomienie użytkownika, jeśli próbuje wykonać coś, czego aplikacja nie obsługuje.

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;
        }
    }
}

Dostosowywanie interfejsu użytkownika

System udostępnia domyślny interfejs użytkownika do przeciągania i upuszczania. Można jednak również dostosować różne części interfejsu użytkownika, ustawiając napisy niestandardowe i glyphs lub nie wyświetlając w ogóle interfejsu użytkownika. Aby dostosować interfejs użytkownika, użyj właściwości 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
}

Otwieranie menu kontekstowego na elemencie, który można przeciągać za pomocą dotyku

W przypadku korzystania z dotyku przeciąganie elementu UIElement i otwieranie jego menu kontekstowego korzystają z podobnych gestów dotykowych; każdy gest zaczyna się od naciśnięcia i przytrzymania. Poniżej przedstawiono sposób, w jaki system rozróżnia między dwiema akcjami dla elementów w aplikacji, które obsługują obie te akcje.

• Jeśli użytkownik naciska i przechowuje element i zaczyna przeciągać go w ciągu 500 milisekund, element jest przeciągany, a menu kontekstowe nie jest wyświetlane.
• Jeśli użytkownik naciska i trzyma, ale nie przeciąga w ciągu 500 milisekund, zostanie otwarte menu kontekstowe.
• Po otwarciu menu kontekstowego, jeśli użytkownik spróbuje przeciągnąć element (bez podnoszenia palca), menu kontekstowe zostanie odrzucone, a przeciągnięcie zostanie uruchomione.

Oznacz element w ListView lub GridView jako folder

Jako folder można określić ListViewItem lub GridViewItem. Jest to szczególnie przydatne w przypadku scenariuszy TreeView i Eksploratora plików. Aby to zrobić, jawnie ustaw właściwość AllowDrop na wartość True dla tego elementu.

System automatycznie wyświetli odpowiednie animacje do upuszczania do folderu w porównaniu z elementem niebędącym folderem. Kod aplikacji musi nadal obsługiwać zdarzenie Drop w elemencie folderu (a także w elemencie niebędącym folderem), aby zaktualizować źródło danych i dodać porzucony element do folderu docelowego.

Włącz możliwość zmiany kolejności metodą przeciągnij i upuść w widokach listy

ListViewobsługuje zmienianie kolejności przeciągania na podstawie przeciągania, używając interfejsu API bardzo podobnego do interfejsu API CanDrop API opisanego w tym artykule. Należy co najmniej dodać właściwości AllowDrop i CanReorderItems.

Aby uzyskać więcej informacji, zobacz ListViewBase.CanReorderItems.

Implementowanie niestandardowego przeciągania i upuszczania

Klasa UIElement wykonuje większość zadań związanych z implementacją przeciągania i upuszczania. Jeśli jednak chcesz, możesz zaimplementować własną wersję przy użyciu poniższych interfejsów API.

Zobacz także

• Komunikacja między aplikacjami
• AllowDrop
• MożnaPrzeciągnąć
• PrzeciągnijNad
• ZaakceptowanaOperacja
• Widok danych
• DragUIOverride
• Upuść
• JestŹródłemPrzeciągania
• Rozpoczęcie przeciągania
• DropCompleted