Glisser-déplacer

Article
12/06/2023

Le glisser-déplacer est un moyen intuitif de transférer des données au sein d’une application ou entre des applications sur le bureau Windows. Le glisser-déplacer permet à l’utilisateur de transférer des données entre des applications ou au sein d’une application à l’aide d’un mouvement standard (appui prolongé et mouvement panoramique avec le doigt, ou appui et mouvement panoramique avec une souris ou un stylet).

API importantes : propriété CanDrag, propriété AllowDrop

La source de glissement, qui est l’application ou la zone dans laquelle le mouvement de glissement est déclenché, fournit les données à transférer en remplissant un objet de package de données qui peut contenir des formats de données standard, notamment texte, RTF, HTML, bitmaps, éléments de stockage ou formats de données personnalisés. La source indique également le genre d’opérations qu’elle prend en charge : copier, déplacer ou lier. Lorsque le pointeur est relâché, le déplacement se produit. La cible de déplacement, qui est l’application ou la zone sous le pointeur, traite le package de données et retourne le type d’opération effectué.

Pendant le glisser-déplacer, l’interface utilisateur de glissement fournit une indication visuelle du type d’opération glisser-déplacer en cours. Ce retour visuel est initialement fourni par la source, mais peut être modifié par les cibles à mesure que le pointeur se déplace sur celles-ci.

Le glisser-déplacer moderne est disponible sur tous les appareils qui prennent en charge UWP. Il autorise le transfert de données entre ou au sein de n’importe quel genre d’application, notamment les applications Windows classiques, bien que cet article soit axé sur l’API XAML pour le glisser-déplacer moderne. Une fois implémenté, le glisser-déplacer fonctionne parfaitement dans toutes les directions, notamment d’application à application, d’application à bureau et de bureau à application.

Voici une vue d’ensemble de ce que vous devez faire pour activer le glisser-déplacer dans votre application :

Activez le glissement sur un élément en affectant la valeur true à sa propriété CanDrag.
Générez le package de données. Le système gère automatiquement les images et le texte, mais pour d’autres contenus, vous devez gérer les événements DragStarting et DropCompleted et les utiliser afin de construire votre propre package de données.
Activez le déplacement en affectant la valeur true à la propriété AllowDrop sur tous les éléments pouvant recevoir du contenu déplacé.
Gérez l’événement DragOver pour indiquer au système quel type d’opérations de glissement l’élément peut recevoir.
Traitez l’événement Drop pour recevoir le contenu déplacé.

Activer le glissement

Pour activer le glissement sur un élément, affectez la valeur true à sa propriété CanDrag. Cela rend l’élément et les éléments qu’il contient, dans le cas de collections telles que ListView, compatibles avec le glissement.

Soyez spécifique sur ce qui peut être soumis à un glissement. Les utilisateurs ne souhaiteront pas faire glisser tout ce qui se trouve dans votre application, mais uniquement certains éléments, tels que des images ou du texte.

Voici comment définir CanDrag.

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

Vous n’avez pas besoin d’effectuer d’autres tâches pour autoriser le glissement, sauf si vous souhaitez personnaliser l’interface utilisateur (ce qui est abordé plus loin dans cet article). Le déplacement nécessite quelques étapes supplémentaires.

Construire un package de données

Dans la plupart des cas, le système construit un package de données pour vous. Le système gère automatiquement :

Images
Texte

Pour d’autres contenus, vous devez gérer les événements DragStarting et DropCompleted, et les utiliser afin de construire votre propre DataPackage.

Activer le déplacement

Le balisage suivant montre comment définir une zone spécifique de l’application comme valide pour le déplacement au moyen d’AllowDrop en XAML. Si un utilisateur tente d’effectuer un déplacement vers une autre destination, le système ne lui permettra pas. Si vous souhaitez que les utilisateurs puissent déplacer des éléments n’importe où sur votre application, définissez l’arrière-plan entier comme cible de déplacement.

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

Gérer l’événement DragOver

L’événement DragOver se déclenche quand un utilisateur a fait glisser un élément sur votre application, mais qu’il ne l’a pas encore déplacé. Dans ce gestionnaire, vous devez spécifier le genre d’opérations pris en charge par votre application à l’aide de la propriété AcceptedOperation. La copie est l’opération la plus courante.

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

Traiter l’événement Drop

L’événement Drop se produit quand l’utilisateur relâche des éléments dans une zone de déplacement valide. Traitez-les au moyen de la propriété DataView.

Par souci de simplicité dans l’exemple ci-dessous, nous partons du principe que l’utilisateur a déplacé une seule photo et nous y accédons directement. En réalité, les utilisateurs peuvent déplacer plusieurs éléments de différents formats simultanément. Votre application doit gérer cette possibilité en vérifiant quels types de fichiers ont été déplacés et combien il y en a, et traiter chacun en conséquence. Vous devez également avertir l’utilisateur s’il tente de faire quelque chose que votre application ne prend pas en charge.

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

Personnaliser l’interface utilisateur

Le système fournit une interface utilisateur par défaut pour le glisser-déplacer. Toutefois, vous pouvez également choisir de personnaliser différentes parties de l’interface utilisateur en définissant des légendes et des glyphes personnalisés, ou en choisissant de ne pas afficher du tout d’interface utilisateur. Pour personnaliser l’interface utilisateur, utilisez la propriété 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
}

Lors de l’utilisation de l’interaction tactile, le glissement d’un UIElement et l’ouverture de son menu contextuel partagent des mouvements tactiles similaires ; chacun commence par un appui prolongé. Voici comment le système élimine l’ambiguïté entre les deux actions pour les éléments de votre application qui les prennent tous deux en charge :

Si un utilisateur fait un appui prolongé sur un élément et commence à le faire glisser dans les 500 millisecondes, l’élément est déplacé et le menu contextuel n’est pas affiché.
Si un utilisateur fait un appui prolongé, mais ne fait pas glisser l’élément dans les 500 millisecondes, le menu contextuel est ouvert.
Une fois le menu contextuel ouvert, si l’utilisateur tente de faire glisser l’élément (sans lever son doigt), le menu contextuel disparaît et le glissement débute.

Désigner un élément dans un ListView ou GridView en tant que dossier

Vous pouvez spécifier un ListViewItem ou GridViewItem en tant que dossier. Ceci est particulièrement utile pour les scénarios TreeView et Explorateur de fichiers. Pour ce faire, affectez explicitement la valeur True à la propriété AllowDrop sur cet élément.

Le système affichera automatiquement les animations appropriées pour le déplacement dans un dossier, par opposition à un élément autre qu’un dossier. Le code de votre application doit continuer à gérer l’événement Drop sur l’élément de dossier (ainsi que sur l’élément autre qu’un dossier) afin de mettre à jour la source de données et d’ajouter l’élément déplacé dans le dossier cible.

Activer la réorganisation par glisser-déplacer dans des ListViews

Les ListView prennent en charge par défaut la réorganisation basée sur le glissement, à l’aide d’une API très similaire à l’API CanDrop décrite dans cet article. Au minimum, vous ajoutez les propriétés AllowDrop et CanReorderItems.

Pour plus d’informations, consultez ListViewBase.CanReorderItems.

Implémentation du glisser-déplacer personnalisé

La classe UIElement effectue la majeure partie du travail d’implémentation du glisser-déplacer pour vous. Toutefois, si vous le souhaitez, vous pouvez implémenter votre propre version au moyen des API ci-dessous.

Fonctionnalités	API WinAppSDK Espace de noms Microsoft.UI.Input.DragDrop	API UWP Espace de noms Windows.Applicationmodel.DataTransfer.DragDrop.Core
DragPrimitive	DragOperation	CoreDragOperation
Créer un package de données	DataPackage	identique
Transférer le déplacement à l’interpréteur de commandes	DragOperation.StartAsync	CoreDragOperation.StartAsync
Recevoir le déplacement à partir de l’interpréteur de commandes	DragDropManager.TargetRequested ICoreDropOperationTarget	CoreDragDropManager.TargetRequested ICoreDropOperationTarget