Accueil > Silverlight > Silverlight API Drag and Drop

Silverlight API Drag and Drop

Présentation

Glisser-déposer est un paradigme commun UX et une fonction haut demandé. Dans Silverlight 4 Beta, nous avons introduit un ensemble de base de l'API pour permettre le scénario le plus commun de glisser les fichiers images et en les déposant dans les applications Silverlight, et nous avons conçu l'API afin de nous permettre d'exposer plus de traînée et de fonctionnalités déroulant la route sans changement d'API , nous l'espérons.

API

Ci-dessous est le noyau de la nouvelle API:

 namespace System.Windows 
{
publique UIElement classe abstraite: DependencyObject
{
/ / Champs
public static readonly DependencyProperty AllowDropProperty;

/ / Événements
publique DragEventHandler événement DragEnter;
événement public DragEventHandler DragLeave;
publique DragEventHandler événement DragOver;
Déposer publique DragEventHandler événement;

/ / Propriétés
publique AllowDrop bool {get; jeu;}
}

sender, DragEventArgs e); publique DragEventHandler nulle délégué (object sender, DragEventArgs e);

publics fermés de classe DragEventArgs: RoutedEventArgs
{
/ / Méthodes
Point de GetPosition publique (UIElement relativeTo);

/ / Propriétés
publique IDataObject données {[SecuritySafeCritical] get;}
public bool manipulés {get; jeu;}
}
}

System.Windows.Controls namespace
{
publiques de contrôle classe abstraite: FrameworkElement
{
protected void virtuels OnDragEnter (DragEventArgs e);
protected void virtuels OnDragLeave (DragEventArgs e);
protégée OnDragOver virtual void (DragEventArgs e);
protégée onDrop virtual void (DragEventArgs e);
}
}

  • AllowDrop: c'est la propriété de dépendance, indiquant si un élément est une cible de dépôt.
  • DragEnter, DragLeave, DragOver & Drop: ces événements sont mis en déroute. Ils bouillonnent, et le feu uniquement sur les éléments mis en AllowDrop à true.
  • OnDragEnter, OnDragLeave, OnDragOver & onDrop: elles sont protégées des fonctions virtuelles pour les sous-classes d'outrepasser.
  • DragEventArgs: cette classe permet gestionnaires chute de cible de l'événement ou remplace la méthode pour accéder aux données d'être traîné ou abandonnées.

Utilisation

Il existe principalement deux façons d'utiliser le glisser Silverlight et API déposer:

  • Applications Silverlight peuvent gérer ces événements cible de dépôt et de traiter les fichiers déposés dans les gestionnaires d'événements.
  • Contrôles Silverlight peuvent remplacer ces fonctions cible de dépôt virtuel pour traiter les données étant glissés et déposés, et permettre d'être eux-mêmes cibles de dépôt.

Limitations

La fonctionnalité de glisser-déposer expédiés dans Silverlight 4 Beta permet seulement le scénario le plus courant: plugin Silverlight comme une cible de dépôt de fichier. S'il vous plaît préavis les limitations suivantes avec la mise en œuvre actuelle:

  • il n'ya pas de support de source de chute (QueryContinueDrag & GiveFeedback).
  • il n'ya pas de DragDropEffects ou DragDropKeyStates de DragEventArgs.
  • il n'ya pas de visuel pour l'objet traîné ou DragDropEffects.
  • glisser-déposer de fichiers uniquement est pris en charge:
    • tous les événements cible de dépôt le feu que lorsque les fichiers sont glissées et déposées.
    • IDataObject, DataObject et DragEventArgs.Data soutenir un seul format: "FileDrop", et les données sont de type FileInfo [].
  • la plupart des méthodes IDataObject jettent NotImplementedException.
  • pour la faire glisser et déposer pour fonctionner sur Windows, le plugin Silverlight doit être fenêtré. Dans un autre mot, si <param name="windowless" value="true"/> est spécifiée, les événements ne se déclenche pas tomber.
  • depuis Silverlight plugin sur Mac est toujours sans fenêtre, vous devez raccorder des événements chute de JavaScript afin de déclencher des événements chute de Silverlight. Dans un autre mot, si vous voulez que votre application Silverlight pour soutenir déposer le fichier sur Mac ainsi que Windows, vous devrez ajouter le script suivant et Silverlight attributs plugin pour l'hébergement html ou aspx:
     <! - Ajouter un script qui suit avant la fin de la balise HEAD -> 
    <script type= "text/javascript">
    Fonction handleDragEnter (oEvent) {
    / / Empêcher les opérations par défaut
    oEvent.preventDefault ();

    var flag = silverlightControl.dragEnter (oEvent);

    / / Si nous avons géré avec succès puis arrêter la propagation de l'événement
    if (drapeau)
    oEvent.stopPropagation ();
    }

    Fonction handleDragLeave (oEvent) {
    / / Empêcher les opérations par défaut
    oEvent.preventDefault ();

    var flag = silverlightControl.dragLeave (oEvent);

    / / Si nous avons géré avec succès puis arrêter la propagation de l'événement
    if (drapeau)
    oEvent.stopPropagation ();
    }

    Fonction handleDragOver (oEvent) {
    / / Empêcher les opérations par défaut
    oEvent.preventDefault ();

    var flag = silverlightControl.dragOver (oEvent);

    / / Si nous avons géré avec succès puis arrêter la propagation de l'événement
    if (drapeau)
    oEvent.stopPropagation ();
    }

    Fonction handleDropEvent (oEvent) {

    / / Empêcher les opérations par défaut
    oEvent.preventDefault ();

    var flag = silverlightControl.dragDrop (oEvent);

    / / Si nous avons géré avec succès puis arrêter la propagation de l'événement
    if (drapeau)
    oEvent.stopPropagation ();
    }
    </ Script>
    <! - L'utilisation d'événements JavaScript cible de dépôt pour déclencher des événements Silverlight cible de dépôt ->

    ondragover= "handleDragOver(event)" id = "silverlightControl" OnDragEnter = "handleDragEnter (événement)" ondragover = "handleDragOver (événement)"
    > ondragleave = "handleDragLeave (événement)" ondrop = "handleDropEvent (event)">

  • DragEventArgs.Data est accessible uniquement en cas Drop. Accéder au DragEventArgs.Data DragEnter, DragOver et DragLeave peut causer SecurityException . Et d'accéder à la propriété Directory, ou DirectoryName FullName de l'objet FileInfo partir DragEventArgs.Data peut causer ArgumentNullException.

    Demo App

    Ci-dessous est une application de démo:

  • en haut à gauche des grilles imbriquées utilisent gestionnaire d'événements baisse de cibles pour afficher les infos DragEventArgs.
  • en haut à droite grilles imbriquées contenir un contrôle utilisateur ImageDropTarget, qui remplace la méthode onDrop pour rendre le fichier déposé, si c'est une image.
  • la listbox du bas montre la séquence des événements cible de dépôt, leur bouillonne, et infos DragEventArgs.

    Click to run DragDropDemo if you have Silverlight 4 Beta installed.

    vous pouvez trouver le source complet ici .

    Commentaires

    Alors que nous sommes ravis d'ajouter le glisser-déposer à Silverlight, nous savons qu'il ya beaucoup de choses à finir / améliorer, et ce que nous libérés est juste une version bêta. Comme toujours, vos commentaires sont très appréciés, et sera utilisé comme un point important de données pour nous aider à prioriser les travaux. Merci!

    Technorati Tags: ,
    1. Peter
      14 décembre 2011 à 08:53 | # 1

      J'essaie de trouver une solution à glisser-déposer à partir de Outlook à Silverlight App.
      Peut votre plug-in faire cela? J'ai essayé de courir votre source, mais il ne semble pas gérer ce droit maintenant.

      Des suggestions?
      Merci

    2. Sujit
      5 janvier 2011 à 22:27 | # 2

      Comment puis-je obtenir le DragDropTarget à travailler un seul chemin?

      Je ne veux pas les éléments pour être glissés et déposés retourner d'où ils proviennent

    3. 19 juillet 2010 à 20:41 | # 3

      @ David Leisner
      Salut David,

      Oui, le comportement est à peu près le même dans SL4 RTM: utilisateur verra le changement de curseur standard au niveau du plugin, à savoir, si il ya un contrôle avec AllDrop mis à true, le plugin toute affichera le curseur permettent de chute; mais il est pas de contrôle spécifique, et il n'est pas personnalisable, c'est à dire, le curseur ne change pas pour les contrôles avec jeu AllDrop à faux, et il n'ya pas de mettre en DragDropEffects DragEventArgs. Nous pouvons mettre en œuvre des fonctionnalités plus du MDN dans les versions futures.

      Merci,

      -Ning

    4. 22 juin 2010 à 11:35 | # 4

      Merci pour cette fonctionnalité très utile et facile à mettre en œuvre!

      Question: Dans votre article original vous avez dit que dans la version bêta de Silverlight 4 ". Il n'ya pas de visuel pour l'objet traîné ou DragDropEffects"

      Est-ce également le cas lors de la finale de Silverlight 4 libération?

      Lorsque vous faites glisser une image depuis l'Explorateur Windows pour une ListBox Silverlight, il sera extrêmement utile pour personnaliser l'apparence du curseur, et ont également un curseur style différent selon que l'élément cible a AllowDrop activée ou non.

      Merci!

    5. 15 juin 2010 à 22:10 | # 5

      Salut, merci pour le code de l'échantillon.

    6. Steven Grigoleit
      3 juin 2010 à 06:04 | # 6

      Salut,

      est-il possible d'empêcher la DataGridDragDropTarget de commencer un glisser-action?

      Ce que je veux est d'utiliser un DataGrid seulement comme DragSource et un autre seulement comme dropTarget. Et la seule dropTarget-DataGrid ne devrait pas montrer cette «StartDragShadow" en appuyant et en déplaçant la souris sur un élément.

      Merci!
      Steven

    7. Décembre 25th, 2009 at 21:47 | # 7

      @ Rudy
      Je tiens également à vous know.thank!
      ce qui concerne
      Silverlight

    8. Décembre 19th, 2009 à 11:04 | # 8

      @ Rudy
      S'il vous plaît voir mes autres réponses. Le Silverlight Toolkit a déjà ListBoxDragDropTarget , de sorte que vous pouvez faire glisser de ListBox. Vous n'avez pas besoin de mettre en œuvre vos propres glisser Toile cible de dépôt de conteneurs, pour l'instant.

    9. Décembre 19th, 2009 à 10:22 | # 9

      @ GB
      En ce moment SL4 runtime ne supporte que le plugin SL comme une cible de dépôt de fichier, et expose uniquement les propriétés cible de dépôt (AllDrop) et événements (DragEnter / Déplacer / Laissez, Drop), mais pas glisser des événements source (GiveFeedback, QueryContinueDrag). Il n'est pas totalement extensible via IDataObject soit. Si vous ne pouvez pas patienter, votre meilleure chance pour l'instant est de regarder la mise en œuvre Toolkit, qui permet de glisser-déposer vers et à partir DataGrid dans le plugin SL. Le code est dans DataGridDragDropTarget.cs sous source du projet Controls.Data.Toolkit \. Merci.

    10. GB
      13 décembre 2009 à 17:04 | # 10

      Salut, je veux savoir comment mettre en œuvre pour Drag & Drop sur datagrid?

    11. Rudy
      Novembre 29th, 2009 at 10:46 | # 11

      Je voudrais savoir s'il ya moyen d'appliquer le glisser-déposer des objets (icônes) de zone de liste à la toile?

      Cordialement

      Rudy

    12. 28 novembre 2009 à 09:59 | # 12

      @ Brice Prunier
      Oui. Jafar a mis en œuvre presque complète, WPF compatibles, fonctionnalité glisser-déplacer pour les deux Silverlight 3 et Silverlight 4. Il est livré dans le cadre de Silverlight Toolkit . Je recommande fortement vérifier ses messages blog pour plus d'informations.

      S'il vous plaît remarquez un des principales différences entre les implémentations de glisser-déposer deux: la version boîte à outils est mis en œuvre sur le dessus de l'exécution, de sorte qu'il nécessite un conteneur DragDropTarget *, et ne fonctionne que entre les éléments dans un contrôle plugin Silverlight. La mise en œuvre s'appuie Toolkit runtime API glisser-déposer quand il peut, comme dans Silverlight 4 Toolkit, qui utilise les biens Microsoft.Windows.DragDrop.AllowDrop UIElement.AllowDrop. Alors que le runtime expose les événements cible de dépôt pour tous les UIElement, la mise en œuvre Toolkit gère déjà ces événements pour les contrôles importants tels que DataGrid, ListBox et TreeView, il est donc très facile à utiliser. Nous nous sommes assurés de l'API sont aussi compatibles que possible, afin que les gens peuvent utiliser les deux ensemble pour l'instant, et de migrer vers la mise en œuvre d'exécution assez facilement que l'exécution expose plus glisser et déposer des fonctionnalités. C'est aussi l'approche générale de Silverlight Toolkit, comme je l'appelle dans tôt après les contrôles Silverlight .

    13. Brice Prunier
      28 novembre 2009 à 07:55 | # 13

      SL4 Toolkit (System.Windows.Controls.Toolkit) fournit plus élevé implémentations DragDrop niveau pour Drag & Drop Silverligth intra.
      Pas tous les cas sont actuellement pris en charge par SL 4 Toolkit, mais vous pouvez créer vos propres facilment du DragDropTarget classe abstraite.

      ce qui concerne

    1. Pas encore de trackbacks.