Vue d’ensemble du glisser-déposer

Cette rubrique fournit une vue d’ensemble de la prise en charge des glisser-déplacer dans les applications WPF (Windows Presentation Foundation). Le glisser-déplacer fait généralement référence à une méthode de transfert de données qui implique l’utilisation d’une souris (ou d’un autre appareil pointant) pour sélectionner un ou plusieurs objets, en faisant glisser ces objets sur une cible de déplacement souhaitée dans l’interface utilisateur et en les supprimant.

Prise en charge du glisser-déposer dans WPF

Les opérations de glisser-déposer impliquent généralement deux parties : une source de glisser à partir de laquelle l’objet déplacé provient et une cible de dépôt qui reçoit l’objet déposé. La source de glissement et la cible de déplacement peuvent être des éléments d'interface utilisateur d'une même application ou d'une application différente.

Le type et le nombre d’objets qui peuvent être manipulés avec un glisser-déplacer est complètement arbitraire. Par exemple, les fichiers, les dossiers et les sélections de contenu sont quelques-uns des objets les plus courants manipulés par le biais d’opérations de glisser-déplacer.

Les actions particulières effectuées pendant une opération de glisser-déplacer sont spécifiques à l’application, et souvent déterminées par le contexte. Par exemple, le fait de faire glisser une sélection de fichiers d’un dossier vers un autre sur le même périphérique de stockage déplace les fichiers par défaut, tandis que le fait de faire glisser des fichiers d’un partage UNC (Universal Naming Convention) vers un dossier local copie les fichiers par défaut.

Les installations de glisser-déplacer fournies par WPF sont conçues pour être hautement flexibles et personnalisables pour prendre en charge un large éventail de scénarios de glisser-déplacer. Le glisser-déplacer prend en charge la manipulation d’objets au sein d’une seule application ou entre différentes applications. Le glisser-déplacer entre les applications WPF et d’autres applications Windows est également entièrement pris en charge.

Dans WPF, un(e) UIElement ou ContentElement peut participer à un glisser-déposer. Les événements et méthodes requis pour les opérations de glisser-déplacer sont définis dans la classe DragDrop. Les classes UIElement et ContentElement contiennent des alias pour les événements joints DragDrop afin que les événements apparaissent dans la liste des membres de classe lorsqu’un UIElement ou un ContentElement est hérité en tant qu’élément de base. Les gestionnaires d’événements attachés à ces événements sont attachés à l’événement sous-jacent DragDrop attaché et reçoivent la même instance de données d’événement. Pour plus d’informations, consultez l’événement UIElement.Drop.

Transfert de données

Le glisser-déplacer fait partie de la zone la plus générale du transfert de données. Le transfert de données comprend des opérations de glisser-déplacer et de copie-coller. Une opération glisser-déplacer est analogue à une opération copier-coller ou couper-coller utilisée pour transférer des données d’un objet ou d’une application vers un autre à l’aide du Presse-papiers système. Les deux types d’opérations nécessitent :

• Objet source qui fournit les données.

• Un moyen de stocker temporairement les données transférées.

• Objet cible qui reçoit les données.

Dans une opération de copier-coller, le presse-papiers du système est utilisé pour stocker temporairement les données transférées ; dans une opération de glisser-déposer, DataObject est utilisé pour stocker les données. Conceptuellement, un objet de données se compose d’une ou plusieurs paires d’un Object qui contient les données réelles et un identificateur de format de données correspondant.

La source de glisser-déposer lance une opération de glisser-déposer en appelant la méthode DragDrop.DoDragDrop statique et en lui transmettant les données transférées. La méthode DoDragDrop encapsule automatiquement les données dans un DataObject si nécessaire. Pour un meilleur contrôle du format de données, vous pouvez encapsuler les données dans un DataObject avant de les transmettre à la méthode DoDragDrop. La cible de déplacement est chargée d'extraire les données du DataObject. Pour plus d’informations sur l’utilisation d’objets de données, consultez données et objets de données.

La source et la cible d’une opération de glisser-déplacer sont des éléments d’interface utilisateur ; toutefois, les données en cours de transfert n’ont généralement pas de représentation visuelle. Vous pouvez écrire du code pour fournir une représentation visuelle des données qui sont déplacées, par exemple lors du glissement de fichiers dans l’Explorateur Windows. Par défaut, les commentaires sont fournis à l’utilisateur en modifiant le curseur pour représenter l’effet que l’opération glisser-déplacer aura sur les données, par exemple si les données seront déplacées ou copiées.

Effets de glisser-déposer

Les opérations de glisser-déplacer peuvent avoir des effets différents sur les données transférées. Par exemple, vous pouvez copier les données ou déplacer les données. WPF définit une énumération DragDropEffects que vous pouvez utiliser pour spécifier l’effet d’une opération de glisser-déplacer. Dans la source de glissement, vous pouvez spécifier les effets que la source autorisera dans la méthode DoDragDrop. Dans la cible de déplacement, vous pouvez spécifier l'effet attendu de la cible dans la propriété Effects de la classe DragEventArgs. Quand la cible de déplacement spécifie son effet prévu dans l'événement DragOver, ces informations sont passées à la source de glissement dans l'événement GiveFeedback. La source du glissement utilise ces informations pour informer l'utilisateur de l'effet prévu de la cible du déplacement sur les données. Lorsque les données sont supprimées, la cible de suppression spécifie son effet réel dans l’événement Drop. Ces informations sont renvoyées à la source d'origine du glissement en tant que valeur renvoyée par la méthode DoDragDrop. Si la cible de déplacement retourne un effet qui n’est pas dans la liste des sources de glissement de allowedEffects, l’opération de glisser-déplacer est annulée sans aucun transfert de données.

Il est important de se rappeler que dans WPF, les valeurs DragDropEffects sont utilisées uniquement pour fournir une communication entre la source de glisser-déplacer et la cible de déplacement concernant les effets de l’opération de glisser-déplacer. L’effet réel de l’opération de glisser-déplacer dépend de vous pour écrire le code approprié dans votre application.

Par exemple, la cible de dépôt peut spécifier que l’effet du dépôt de données sur elle est de déplacer les données. Toutefois, pour déplacer les données, elles doivent être ajoutées à l’élément cible et supprimées de l’élément source. L’élément source peut indiquer qu’il autorise le déplacement des données, mais si vous ne fournissez pas le code pour supprimer les données de l’élément source, le résultat final est que les données sont copiées et non déplacées.

Événements de glisser-déposer

Les opérations de glisser-déplacer prennent en charge un modèle piloté par les événements. La source du glissement et la cible du déplacement utilisent toutes deux un ensemble standard d'événements pour gérer les opérations de glisser-déplacer. Les tableaux suivants récapitulent les événements de glisser-déposer standard. Il s'agit d'événements attachés de la classe DragDrop. Pour plus d’informations sur les événements joints, consultez Vue d’ensemble des événements attachés.

Événements de la source du glissement

Supprimer les événements cibles

Pour gérer les événements glisser-déplacer pour les instances d’un objet, ajoutez des gestionnaires pour les événements répertoriés dans les tables précédentes. Pour gérer les événements de glisser-déposer au niveau de la classe, redéfinissez les méthodes virtuelles correspondantes On*Event et On*PreviewEvent.

Implémentation du glisser-déplacer

Un élément d'interface utilisateur peut être une source du glissement, une cible du déplacement ou les deux à la fois. Pour implémenter le glisser-déplacer de base, vous écrivez du code pour lancer l’opération glisser-déplacer et traiter les données supprimées. Vous pouvez améliorer le glisser-déposer en gérant les événements de glisser-déposer facultatifs.

Pour implémenter un glisser-déplacer de base, vous effectuerez les tâches suivantes :

• Identifiez l’élément qui sera une source de glissement. Une source de glissement peut être un UIElement ou un ContentElement.

• Créez un gestionnaire d’événements pour la source du glissement, qui sera chargé de lancer l’opération de glisser-déposer. L'événement est généralement un événement MouseMove.

• Dans le gestionnaire d'événements de la source de glissement, appelez la méthode DoDragDrop pour initier l'opération de glisser-déposer. Dans l’appel DoDragDrop, spécifiez la source de glissement, les données à transférer et les effets autorisés.

• Identifiez l'élément destiné à être la cible du glissement. Une cible de déplacement peut être un UIElement ou un ContentElement.

• Sur la cible de déplacement, attribuez la valeur AllowDrop à la propriété true.

• Dans la cible de suppression, créez un gestionnaire d’événements Drop pour traiter les données supprimées.

• Dans le gestionnaire d’événements Drop, extrayez les données du DragEventArgs à l’aide des méthodes GetDataPresent et GetData.

• Dans le gestionnaire d’événements Drop, utilisez les données pour effectuer l’opération de glisser-déplacer souhaitée.

Vous pouvez améliorer votre implémentation du glisser-déposer en créant un DataObject personnalisé et en gérant des événements facultatifs de source de glissement et de cible de déplacement, comme le montrent les tâches suivantes :

• Pour transférer des données personnalisées ou plusieurs éléments de données, créez un DataObject et passez-le à la méthode DoDragDrop.

• Pour effectuer des actions supplémentaires pendant une opération de glissement, gérez les événements DragEnter, DragOver et DragLeave sur la cible de déplacement.

• Pour modifier l'apparence du pointeur de la souris, gérez l'événement GiveFeedback sur la source de glissement.

• Pour modifier la façon dont l’opération de glisser-déplacer est annulée, gérez l’événement QueryContinueDrag sur la source de glissement.

Exemple de glisser-déposer

Cette section explique comment implémenter un glisser-déplacer pour un élément Ellipse. Ellipse est à la fois une source de glissement et une cible de déplacement. Les données transférées sont la représentation sous forme de chaîne de la propriété Fill de l’ellipse. Le code XAML suivant montre l’élément Ellipse et les événements connexes de glisser-déplacer qu’il gère. Pour connaître les étapes complètes de l'implémentation du glisser-déplacer, consultez procédure pas à pas : activer le glisser-déplacer sur un contrôle utilisateur.

<Ellipse Height="50" Width="50" Fill="Green"
     MouseMove="ellipse_MouseMove"
     GiveFeedback="ellipse_GiveFeedback"
     AllowDrop="True"
     DragEnter="ellipse_DragEnter" DragLeave="ellipse_DragLeave"
     DragOver="ellipse_DragOver" Drop="ellipse_Drop" />

Activation d’un élément comme source de glissement

Un objet qui est une source de glissement est responsable des opérations suivantes :

• Identifier quand un glissement se produit.

• Lancement de l’opération de glisser-déposer.

• Identification des données à transférer.

• La spécification des effets que l’opération de glisser-déplacer est autorisée à avoir sur les données transférées.

La source de glissement peut également envoyer des commentaires à l’utilisateur concernant les actions autorisées (déplacer, copier, aucun) et annuler l’opération de glisser-déplacer en fonction d’une entrée utilisateur supplémentaire, par exemple en appuyant sur la touche ÉCHAP pendant le glissement.

Il incombe à votre application de déterminer quand un glisser-déplacer se produit, puis d’initier l’opération glisser-déplacer en appelant la méthode DoDragDrop. En règle générale, c’est lorsqu’un événement MouseMove se produit sur l’élément à glisser pendant qu’un bouton de la souris est enfoncé. L'exemple suivant montre comment initier une opération de glisser-déposer à partir du gestionnaire d'événements MouseMove d'un élément Ellipse pour en faire une source de glisser-déposer. Les données transférées sont la représentation sous forme de chaîne de la propriété Fill de l’ellipse.

private void ellipse_MouseMove(object sender, MouseEventArgs e)
{
    Ellipse ellipse = sender as Ellipse;
    if (ellipse != null && e.LeftButton == MouseButtonState.Pressed)
    {
        DragDrop.DoDragDrop( ellipse,
                             ellipse.Fill.ToString(),
                             DragDropEffects.Copy);
    }
}

Private Sub Ellipse_MouseMove(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
    Dim ellipse = TryCast(sender, Ellipse)
    If ellipse IsNot Nothing AndAlso e.LeftButton = MouseButtonState.Pressed Then
        DragDrop.DoDragDrop(ellipse, ellipse.Fill.ToString(), DragDropEffects.Copy)
    End If
End Sub

À l’intérieur du gestionnaire d’événements MouseMove, appelez la méthode DoDragDrop pour lancer l’opération glisser-déplacer. La méthode DoDragDrop prend trois paramètres :

• dragSource : référence à l’objet de dépendance qui est la source des données transférées ; il s’agit généralement de la source de l’événement MouseMove.

• data : objet qui contient les données transférées, encapsulées dans un DataObject.

• allowedEffects : l’une des valeurs d’énumération DragDropEffects qui spécifie les effets autorisés de l’opération de glisser-déplacer.

Tout objet sérialisable peut être transmis dans le paramètre data. Si les données ne sont pas déjà encapsulées dans un DataObject, elles sont automatiquement encapsulées dans une nouvelle DataObject. Pour passer plusieurs éléments de données, vous devez créer le DataObject vous-même et le transmettre à la méthode DoDragDrop. Pour plus d’informations, consultez données et objets de données.

Le paramètre allowedEffects est utilisé pour spécifier ce que la source de déplacement autorisera la cible de dépôt à faire avec les données transférées. Les valeurs courantes d’une source de glissement sont Copy, Moveet All.

Une source de glissement peut éventuellement gérer les événements GiveFeedback et QueryContinueDrag. Ces événements ont des gestionnaires par défaut qui sont utilisés, sauf si vous marquez les événements comme gérés. Vous ignorez généralement ces événements, sauf si vous avez besoin de modifier leur comportement par défaut.

L'événement GiveFeedback est déclenché en continu pendant l'opération de glissement de la source. Le gestionnaire par défaut de cet événement vérifie si la source de glissement se trouve sur une cible de déplacement valide. Si c’est le cas, il vérifie les effets autorisés de la cible de dépôt. Il fournit ensuite des commentaires à l’utilisateur final concernant les effets de suppression autorisés. Cette rétroaction visuelle se traduit généralement par le changement du curseur de la souris en curseur ne permettant ni copie, ni déplacement. Vous devez gérer cet événement uniquement si vous devez utiliser des curseurs personnalisés pour fournir des commentaires à l’utilisateur. Si vous gérez cet événement, veillez à le marquer comme géré afin que le gestionnaire par défaut ne remplace pas votre gestionnaire.

L'événement QueryContinueDrag est déclenché en continu pendant l'opération de glissement de la source. Vous pouvez gérer cet événement pour déterminer l’action qui doit terminer l’opération de glisser-déposer, en fonction de l’état des touches Échap, Maj, Ctrl et Alt, ainsi que de l’état des boutons de la souris. Le gestionnaire par défaut de cet événement annule l’opération de glisser-déplacer si la touche ÉCHAP est enfoncée et supprime les données si le bouton de la souris est libéré.

Activation d’un élément en tant que cible de dépôt

Un objet qui devient cible de déplacement est chargé des opérations suivantes :

• Confirmation qu’il s’agit d’une cible de déplacement valide.

• Réaction à la source de glissement lorsqu'elle passe au-dessus de la cible.

• Vérifiez que les données transférées sont dans un format qu’elles peuvent recevoir.

• Traitement des données abandonnées.

Pour spécifier qu’un élément est une cible drop, vous définissez sa propriété AllowDrop sur true. Les événements de cible de déplacement seront ensuite déclenchés sur cet élément pour que vous puissiez les gérer.

Lorsqu’une cible de dépôt est évaluée, un test d'impact est effectué pour identifier si le curseur se trouve sur l’élément visuel. Certains contrôles, tels que le Canvas, n’ont pas de visuel et ne peuvent pas être utilisés comme cible de suppression, sauf si un visuel est ajouté. Définissez la propriété Canvas.Background sur n’importe quelle couleur pour créer un visuel qui remplit les Canvas de couleur. Pour conserver la Canvas transparente, mais l’activer en tant que cible déroulante, définissez la propriété Background sur Transparent.

Pendant une opération de glisser-déposer, la séquence d’événements suivante se produit sur la cible de dépôt :

1. DragEnter

2. DragOver

3. DragLeave ou Drop

L'événement DragEnter se produit quand les données sont glissées dans les limites de la cible de déplacement. Vous gérez généralement cet événement pour fournir un aperçu des effets de l’opération de glisser-déposer, si c'est approprié pour votre application. Ne définissez pas la propriété DragEventArgs.Effects dans l’événement DragEnter, car elle sera remplacée dans l’événement DragOver.

L’exemple suivant montre le gestionnaire d’événements DragEnter pour un élément Ellipse. Ce code permet d'obtenir un aperçu des effets de l'opération de glisser-déposer en enregistrant le pinceau Fill actif. Il utilise ensuite la méthode GetDataPresent pour vérifier si la DataObject déplacée sur l’ellipse contient des données de chaîne qui peuvent être converties en Brush. Dans ce cas, les données sont extraites à l’aide de la méthode GetData. Elle est ensuite convertie en Brush et appliquée à l’ellipse. La modification est rétablie dans le gestionnaire d’événements DragLeave. Si les données ne peuvent pas être converties en Brush, aucune action n’est effectuée.

private Brush _previousFill = null;
private void ellipse_DragEnter(object sender, DragEventArgs e)
{
    Ellipse ellipse = sender as Ellipse;
    if (ellipse != null)
    {
        // Save the current Fill brush so that you can revert back to this value in DragLeave.
        _previousFill = ellipse.Fill;

        // If the DataObject contains string data, extract it.
        if (e.Data.GetDataPresent(DataFormats.StringFormat))
        {
            string dataString = (string)e.Data.GetData(DataFormats.StringFormat);

            // If the string can be converted into a Brush, convert it.
            BrushConverter converter = new BrushConverter();
            if (converter.IsValid(dataString))
            {
                Brush newFill = (Brush)converter.ConvertFromString(dataString);
                ellipse.Fill = newFill;
            }
        }
    }
}

Private _previousFill As Brush = Nothing
Private Sub Ellipse_DragEnter(ByVal sender As System.Object, ByVal e As System.Windows.DragEventArgs)
    Dim ellipse = TryCast(sender, Ellipse)
    If ellipse IsNot Nothing Then
        ' Save the current Fill brush so that you can revert back to this value in DragLeave.
        _previousFill = ellipse.Fill

        ' If the DataObject contains string data, extract it.
        If e.Data.GetDataPresent(DataFormats.StringFormat) Then
            Dim dataString = e.Data.GetData(DataFormats.StringFormat)

            ' If the string can be converted into a Brush, convert it.
            Dim converter As New BrushConverter()
            If converter.IsValid(dataString) Then
                Dim newFill As Brush = CType(converter.ConvertFromString(dataString), Brush)
                ellipse.Fill = newFill
            End If
        End If
    End If
End Sub

L'événement DragOver se produit en continu pendant le déplacement des données sur la cible de déplacement. Cet événement est couplé à l'événement GiveFeedback sur la source de glissement. Dans le gestionnaire d’événements DragOver, vous utilisez généralement les méthodes GetDataPresent et GetData pour vérifier si les données transférées sont dans un format que la cible de suppression peut traiter. Vous pouvez également vérifier si les touches de modification sont enfoncées, ce qui indique généralement si l’utilisateur a l’intention d’effectuer un déplacement ou une action de copie. Une fois ces vérifications effectuées, définissez la propriété DragEventArgs.Effects pour notifier la source de glissement de l’effet prévu du dépôt des données. La source de glissement reçoit ces informations dans les arguments d’événement GiveFeedback et peut définir un curseur approprié pour envoyer des commentaires à l’utilisateur.

L’exemple suivant montre le gestionnaire d’événements DragOver pour un élément Ellipse. Ce code vérifie si la DataObject déplacée sur l’ellipse contient des données de chaîne qui peuvent être converties en Brush. Si c’est le cas, elle attribue la propriété DragEventArgs.Effects à Copy. Cela indique à la source du glissement que les données peuvent être copiées vers l'ellipse. Si les données ne peuvent pas être converties en Brush, la propriété DragEventArgs.Effects est définie sur None. Cela indique à la source de glissement que l'ellipse n'est pas une cible de dépôt valide pour les données.

private void ellipse_DragOver(object sender, DragEventArgs e)
{
    e.Effects = DragDropEffects.None;

    // If the DataObject contains string data, extract it.
    if (e.Data.GetDataPresent(DataFormats.StringFormat))
    {
        string dataString = (string)e.Data.GetData(DataFormats.StringFormat);

        // If the string can be converted into a Brush, allow copying.
        BrushConverter converter = new BrushConverter();
        if (converter.IsValid(dataString))
        {
            e.Effects = DragDropEffects.Copy | DragDropEffects.Move;
        }
    }
}

Private Sub Ellipse_DragOver(ByVal sender As System.Object, ByVal e As System.Windows.DragEventArgs)
    e.Effects = DragDropEffects.None

    ' If the DataObject contains string data, extract it.
    If e.Data.GetDataPresent(DataFormats.StringFormat) Then
        Dim dataString = e.Data.GetData(DataFormats.StringFormat)

        ' If the string can be converted into a Brush, convert it.
        Dim converter As New BrushConverter()
        If converter.IsValid(dataString) Then
            e.Effects = DragDropEffects.Copy Or DragDropEffects.Move
        End If
    End If
End Sub

L’événement DragLeave se produit lorsque les données sont déplacées hors de la limite de la cible sans être supprimées. Vous gérez cet événement pour annuler tout ce que vous avez fait dans le gestionnaire d’événements DragEnter.

L’exemple suivant montre le gestionnaire d’événements DragLeave pour un élément Ellipse. Ce code annule l’aperçu effectué dans le gestionnaire d’événements DragEnter en appliquant le Brush enregistré à l’ellipse.

private void ellipse_DragLeave(object sender, DragEventArgs e)
{
    Ellipse ellipse = sender as Ellipse;
    if (ellipse != null)
    {
        ellipse.Fill = _previousFill;
    }
}

Private Sub Ellipse_DragLeave(ByVal sender As System.Object, ByVal e As System.Windows.DragEventArgs)
    Dim ellipse = TryCast(sender, Ellipse)
    If ellipse IsNot Nothing Then
        ellipse.Fill = _previousFill
    End If
End Sub

L’événement Drop se produit lorsque les données sont supprimées sur la cible de suppression ; par défaut, cela se produit lorsque le bouton de la souris est libéré. Dans le gestionnaire d’événements Drop, vous utilisez la méthode GetData pour extraire les données transférées de l'DataObject et effectuer tout traitement des données requis par votre application. L'événement Drop met fin à l'opération de glisser-déposer.

L’exemple suivant montre le gestionnaire d’événements Drop pour un élément Ellipse. Ce code applique les effets de l’opération de glisser-déplacer et est similaire au code du gestionnaire d’événements DragEnter. Il vérifie si le DataObject en cours de déplacement sur l’ellipse contient des données de chaîne qui peuvent être converties en Brush. Dans ce cas, la Brush est appliquée à l’ellipse. Si les données ne peuvent pas être converties en Brush, aucune action n’est effectuée.

private void ellipse_Drop(object sender, DragEventArgs e)
{
    Ellipse ellipse = sender as Ellipse;
    if (ellipse != null)
    {
        // If the DataObject contains string data, extract it.
        if (e.Data.GetDataPresent(DataFormats.StringFormat))
        {
            string dataString = (string)e.Data.GetData(DataFormats.StringFormat);

            // If the string can be converted into a Brush,
            // convert it and apply it to the ellipse.
            BrushConverter converter = new BrushConverter();
            if (converter.IsValid(dataString))
            {
                Brush newFill = (Brush)converter.ConvertFromString(dataString);
                ellipse.Fill = newFill;
            }
        }
    }
}

Private Sub Ellipse_Drop(ByVal sender As System.Object, ByVal e As System.Windows.DragEventArgs)
    Dim ellipse = TryCast(sender, Ellipse)
    If ellipse IsNot Nothing Then

        ' If the DataObject contains string data, extract it.
        If e.Data.GetDataPresent(DataFormats.StringFormat) Then
            Dim dataString = e.Data.GetData(DataFormats.StringFormat)

            ' If the string can be converted into a Brush, convert it.
            Dim converter As New BrushConverter()
            If converter.IsValid(dataString) Then
                Dim newFill As Brush = CType(converter.ConvertFromString(dataString), Brush)
                ellipse.Fill = newFill
            End If
        End If
    End If
End Sub

Voir aussi

• Clipboard
• Procédure Pas à Pas : Activation du Glisser-Déplacer sur un Contrôle d'Utilisateur
• Sujets de type "comment faire"
• Glisser-déposer