Slepen en neerzetten

Slepen en neerzetten is een intuïtieve manier om gegevens over te dragen binnen een toepassing of tussen toepassingen op het Windows-bureaublad. Met slepen en neerzetten kan de gebruiker gegevens overbrengen tussen toepassingen of binnen een toepassing met behulp van een standaardbeweging (met de vinger ingedrukt houden en verschuiven of klikken en verschuiven met een muis of stylus).

Belangrijke API's: eigenschap CanDrag, eigenschap AllowDrop

De sleepbron, de toepassing of het gebied waar de sleepbeweging wordt geactiveerd, biedt de gegevens die moeten worden overgedragen door een gegevenspakketobject te vullen. Dit object kan standaard gegevensformaten bevatten, waaronder tekst, RTF, HTML, bitmaps, opslagitems of aangepaste gegevensformaten. De bron geeft ook het type bewerkingen aan dat wordt ondersteund: kopiëren, verplaatsen of koppelen. Wanneer de aanwijzer wordt vrijgegeven, vindt de drop plaats. De doellocatie, die de toepassing of het gebied onder de aanwijzer is, verwerkt het gegevenspakket en retourneert het type bewerking dat het heeft uitgevoerd.

Tijdens slepen en neerzetten biedt de gebruikersinterface voor slepen een visuele indicatie van het type slepen-en-neerzetten dat plaatsvindt. Deze visuele feedback wordt aanvankelijk door de bron verstrekt, maar kan door de doelobjecten worden gewijzigd wanneer de aanwijzer eroverheen beweegt.

De moderne functie voor slepen en neerzetten is beschikbaar op alle apparaten die ondersteuning bieden voor UWP. Het maakt gegevensoverdracht mogelijk tussen of binnen elk soort toepassing, waaronder klassieke Windows-apps, hoewel dit artikel is gericht op de XAML-API voor moderne slepen en neerzetten. Zodra de app is geïmplementeerd, werkt slepen en neerzetten naadloos in alle richtingen, waaronder app-naar-app, app-naar-desktop en bureaublad-naar-app.

Hier volgt een overzicht van wat u moet doen om slepen en neerzetten in uw app in te schakelen:

1. Schakel slepen op een element in door de eigenschap CanDrag in te stellen op juist.
2. Bouw het gegevenspakket. Het systeem verwerkt afbeeldingen en tekst automatisch, maar voor andere inhoud moet u de gebeurtenissen DragStarting en DropCompleted afhandelen en deze gebruiken om uw eigen gegevenspakket te maken.
3. Schakel neerzetten in door de eigenschap AllowDrop in te stellen op true op alle elementen die verwijderde inhoud kunnen ontvangen.
4. Behanteer de DragOver gebeurtenis om het systeem te informeren welk type sleepbewerkingen het element kan ontvangen.
5. De drop gebeurtenis verwerken om de verwijderde inhoud te ontvangen.

Slepen inschakelen

Als u slepen op een element wilt inschakelen, stelt u de CanDrag eigenschap in op true. Dit maakt het element, evenals de elementen die het bevat in het geval van collecties zoals ListView, sleepbaar.

Wees specifiek over wat er kan worden gesleept. Gebruikers willen niet alles in uw app slepen, alleen bepaalde items, zoals afbeeldingen of tekst.

U kunt CanDrag als volgt instellen.

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

U hoeft geen ander werk te doen om slepen toe te staan, tenzij u de gebruikersinterface wilt aanpassen (die verderop in dit artikel wordt besproken). Voor het verwijderen zijn nog enkele stappen vereist.

Een gegevenspakket maken

In de meeste gevallen maakt het systeem een gegevenspakket voor u. Het systeem verwerkt het volgende automatisch:

• Afbeeldingen
• Tekst

Voor andere inhoud moet u de DragStarting-gebeurtenissen en DropCompleted-gebeurtenissen afhandelen en deze gebruiken om je eigen DataPackagete maken.

Verwijderen inschakelen

In de volgende markeringen ziet u hoe de eigenschap AllowDrop kan worden gebruikt om op te geven dat een gebied van de app een geldig drop-doel is voor een gesleept item (het opgegeven gebied mag geen null-achtergrond hebben, moet de aanwijzerinvoer kunnen ontvangen en het item kan nergens anders dan het opgegeven gebied worden verwijderd).

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

De DragOver-gebeurtenis afhandelen

De DragOver gebeurtenis wordt geactiveerd wanneer een gebruiker een item boven uw app heeft gesleept, maar nog niet heeft neergezet. In deze handler moet u opgeven welk type bewerkingen uw app ondersteunt met behulp van de eigenschap AcceptedOperation . Kopiëren is het meest gebruikelijk.

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

De drop-gebeurtenis verwerken

De gebeurtenis Drop vindt plaats wanneer de gebruiker items in een geldige dropzone loslaat. Verwerk ze met behulp van de eigenschap DataView .

Voor het gemak in het onderstaande voorbeeld gaan we ervan uit dat de gebruiker één foto heeft verwijderd en deze rechtstreeks opent. In werkelijkheid kunnen gebruikers meerdere items met verschillende indelingen tegelijk verwijderen. Uw app moet deze mogelijkheid afhandelen door te controleren welke typen bestanden zijn verwijderd en hoeveel er zijn en om dienovereenkomstig te verwerken. U moet ook overwegen de gebruiker op de hoogte te stellen als deze iets probeert te doen wat uw app niet ondersteunt.

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

De gebruikersinterface aanpassen

Het systeem biedt een standaardgebruikersinterface voor slepen en neerzetten. U kunt er echter ook voor kiezen om verschillende onderdelen van de gebruikersinterface aan te passen door aangepaste bijschriften en glyphs in te stellen, of door ervoor te kiezen om helemaal geen gebruikersinterface weer te geven. Als u de gebruikersinterface wilt aanpassen, gebruikt u de eigenschap 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
}

Een snelmenu openen op een item dat u met aanraken kunt slepen

Wanneer u aanraking gebruikt, lijken het slepen van een UIElement en het openen van zijn contextmenu op vergelijkbare aanraakgebaren; elk begint met een indrukken en vasthouden. Hier ziet u hoe het systeem onderscheid maakt tussen de twee acties voor elementen in uw app die beide ondersteunen:

• Als een gebruiker een item ingedrukt houdt en het binnen 500 milliseconden sleept, wordt het item gesleept en wordt het contextmenu niet weergegeven.
• Als de gebruiker ingedrukt houdt maar niet sleept gedurende 500 milliseconden, wordt het contextmenu geopend.
• Nadat het contextmenu is geopend, wordt het contextmenu gesloten als de gebruiker het item probeert te slepen (zonder zijn vinger op te tillen) en wordt het slepen gestart.

Een item in een ListView of GridView aanwijzen als map

U kunt een ListViewItem of GridViewItem opgeven als map. Dit is met name handig voor TreeView- en Verkenner-scenario's. Hiervoor stelt u de eigenschap AllowDrop expliciet in op True voor dat item.

Het systeem toont automatisch de juiste animaties voor het neerzetten in een map versus een item zonder map. Uw app-code moet de gebeurtenis Neerzetten blijven verwerken op het mapitem (en op het item zonder map) om de gegevensbron bij te werken en het verwijderde item toe te voegen aan de doelmap.

Volgorde van slepen en neerzetten in ListViews inschakelen

ListView-ondersteunt op slepen gebaseerd herordenen direct uit de doos door gebruik te maken van een API die zeer vergelijkbaar is met de CanDrop-API die in dit artikel wordt beschreven. U voegt minimaal de eigenschappen AllowDrop en CanReorderItems toe.

Zie ListViewBase.CanReorderItems voor meer informatie.

Implementatie van aangepast slepen en neerzetten

De UIElement klasse neemt het grootste deel van de implementatie van slepen en neerzetten voor je op zich. Maar als u wilt, kunt u uw eigen versie implementeren met behulp van de onderstaande API's.

Zie ook

• App-naar-app-communicatie
• AllowDrop
• CanDrag
• DragOver
• AcceptedOperation-
• DataView
• DragUIOverride
• laten vallen
• IsDragSource
• DragStarting
• DropCompleted