[WPF] Drag 'n' Drop

    • C#
    • .NET (FX) 4.0

    Es gibt 1 Antwort in diesem Thema. Der letzte Beitrag () ist von ErfinderDesRades.

      [WPF] Drag 'n' Drop

      Moin,

      nachdem ich festgestellt habe was man alles mit Behaviors machen kann und ich bereits mehrmals drüber gestolpert bin, dass Drag 'n' Drop in WPF nicht ganz so einfach, und vor allem MVVM verträglich, zu realisieren ist, hab ich mal versucht das Ganze in Behaviors schön aufgeräumt und vor allem wiederverwertbar zu gestalten.
      Vorneweg: Wer keine Ahnung von Drag 'n' Drop im .NET Framework sollte sich Dieses aneignen bevor er weiterliest. Hier reicht auch WinForms-Wissen aus!
      Wichtig ist, dass die Lösung so in dieser Form nur für .NET 4.0 oder höher funktioniert. Es gibt das notwendige Assembly auch für 3.5. Hier heißt es Microsoft.Expression.Interactivity und wird mit dem Blend SDK verteilt.

      Also zuerst der Code für eine DragSource, also FrameworkElement aus dem sich Daten ziehen lassen sollen:
      DragSource

      C#-Quellcode

      1. public class DragSourceBehavior : Behavior<FrameworkElement>
      2. {
      4. public static readonly DependencyProperty DragDataProperty =
      5. DependencyProperty.Register("DragData", typeof(object), typeof(DragSourceBehavior));
      6. public static readonly DependencyProperty DragDataObjectProperty =
      7. DependencyProperty.Register("DragDataObject", typeof(IDataObject), typeof(DragSourceBehavior));
      8. public static readonly DependencyProperty DragTypeProperty =
      9. DependencyProperty.Register("DragType", typeof(string), typeof(DragSourceBehavior));
      10. public static readonly DependencyProperty DragEffectsProperty =
      11. DependencyProperty.Register("DragEffects", typeof(DragDropEffects), typeof(DragSourceBehavior), new PropertyMetadata(DragDropEffects.All));
      13. public static readonly DependencyProperty isEnabledProperty =
      14. DependencyProperty.Register("isEnabled", typeof(bool), typeof(DragSourceBehavior), new PropertyMetadata(true));
      16. public object DragData
      17. {
      18. get { return GetValue(DragDataProperty); }
      19. set { SetValue(DragDataProperty, value); }
      20. }
      22. public IDataObject DragDataObject
      23. {
      24. get { return (IDataObject)GetValue(DragDataObjectProperty); }
      25. set { SetValue(DragDataObjectProperty, value); }
      26. }
      28. public string DragType
      29. {
      30. get { return (string)GetValue(DragTypeProperty); }
      31. set { SetValue(DragTypeProperty, value); }
      32. }
      34. public DragDropEffects DragEffects
      35. {
      36. get { return (DragDropEffects)GetValue(DragEffectsProperty); }
      37. set { SetValue(DragEffectsProperty, value); }
      38. }
      40. public bool isEnabled
      41. {
      42. get { return (bool)GetValue(isEnabledProperty); }
      43. set { SetValue(isEnabledProperty, value); }
      44. }
      46. protected override void OnAttached()
      47. {
      48. AssociatedObject.MouseMove += (s, e) =>
      49. {
      50. if (isEnabled && e.LeftButton == System.Windows.Input.MouseButtonState.Pressed)
      51. {
      52. var data = getDataObject();
      53. if (data != null)
      54. DragDrop.DoDragDrop(AssociatedObject, getDataObject(), DragEffects);
      55. }
      56. };
      57. }
      59. protected IDataObject getDataObject()
      60. {
      61. if (DragDataObject != null) return DragDataObject;
      62. if (DragData == null) return null;
      63. DataObject dobj = new DataObject();
      64. if (!String.IsNullOrWhiteSpace(DragType))
      65. dobj.SetData(DragType, DragData);
      66. else
      67. dobj.SetData(DragData);
      68. return dobj;
      69. }
      71. protected override void OnDetaching()
      72. {
      73. isEnabled = false;
      74. base.OnDetaching();
      75. }
      76. }


      Das Ganze sieht im XAML in etwa so aus:
      DragSource XAML

      XML-Quellcode

      1. <ListView x:Name="liste">
      2. <i:Interaction.Behaviors>
      3. <Behaviors:DragSourceBehavior DragData="{Binding SelectedItem, ElementName=liste}" />
      4. </i:Interaction.Behaviors>
      5. <sys:Int32>0</sys:Int32>
      6. <sys:Int32>1</sys:Int32>
      7. <sys:Int32>2</sys:Int32>
      8. <sys:Int32>3</sys:Int32>
      9. <sys:Int32>4</sys:Int32>
      10. <sys:Int32>5</sys:Int32>
      11. <sys:String>Hallo Welt</sys:String>
      12. </ListView>





      Der einfachste Weg, um das Draggen zu ermöglichen ist, an DragData zu binden. DragDataObject erlaubt direkt an ein IDataObject zu binden.
      Die restlichen DependencyProperties erklären sich eigentlich mehr oder weniger von selbst.

      Das Behavior um Daten zu empfangen (es ist hierbei ob die Daten aus einer eigenen WPF Anwendung stammen oder zum Beispiel aus dem Explorer) sieht so aus:
      DropTarget

      C#-Quellcode

      1. public class DragTargetBehavior : Behavior<FrameworkElement>
      2. {
      4. public static readonly DependencyProperty DropDataProperty =
      5. DependencyProperty.Register("DropData", typeof(object), typeof(DragTargetBehavior), new FrameworkPropertyMetadata(null) { BindsTwoWayByDefault = true });
      6. public static readonly DependencyProperty DropTypeProperty =
      7. DependencyProperty.Register("DropType", typeof(string), typeof(DragTargetBehavior), new FrameworkPropertyMetadata("") { BindsTwoWayByDefault = true });
      8. public static readonly DependencyProperty DropEffectProperty =
      9. DependencyProperty.Register("DropEffect", typeof(DragDropEffects), typeof(DragTargetBehavior), new FrameworkPropertyMetadata(null) { BindsTwoWayByDefault = true });
      10. public static readonly DependencyProperty DropPositionProperty =
      11. DependencyProperty.Register("DropPosition", typeof(Point), typeof(DragTargetBehavior), new FrameworkPropertyMetadata(new Point(0, 0)) { BindsTwoWayByDefault = true });
      14. public static readonly DependencyProperty AcceptedDataTypesProperty =
      15. DependencyProperty.Register("AcceptedDataTypes", typeof(List<string>), typeof(DragTargetBehavior), new PropertyMetadata(new List<string>()));
      16. public static readonly DependencyProperty AcceptedEffectsProperty =
      17. DependencyProperty.Register("AcceptedEffects", typeof(DragDropEffects), typeof(DragTargetBehavior), new PropertyMetadata(DragDropEffects.All));
      19. public static readonly DependencyProperty DropCompletedCallbackProperty =
      20. DependencyProperty.Register("DropCompletedCallback", typeof(Action<object>), typeof(DragTargetBehavior), new PropertyMetadata(null));
      22. public static readonly DependencyProperty isEnabledProperty =
      23. DependencyProperty.Register("isEnabled", typeof(bool), typeof(DragTargetBehavior), new PropertyMetadata(true));
      25. public static readonly DependencyProperty DropDataObjectProperty =
      26. DependencyProperty.Register("DropDataObject", typeof(IDataObject), typeof(DragTargetBehavior), new PropertyMetadata(null));
      28. public object DropData
      29. {
      30. get { return GetValue(DropDataProperty); }
      31. set { SetValue(DropDataProperty, value); }
      32. }
      34. public string DropType
      35. {
      36. get { return (string)GetValue(DropTypeProperty); }
      37. set { SetValue(DropTypeProperty, value); }
      38. }
      40. public DragDropEffects DropEffect
      41. {
      42. get { return (DragDropEffects)GetValue(DropEffectProperty); }
      43. set { SetValue(DropEffectProperty, value); }
      44. }
      46. public Point DropPosition
      47. {
      48. get { return (Point)GetValue(DropPositionProperty); }
      49. set { SetValue(DropPositionProperty, value); }
      50. }
      52. public List<string> AcceptedDataTypes
      53. {
      54. get { return (List<string>)GetValue(AcceptedDataTypesProperty); }
      55. set { SetValue(AcceptedDataTypesProperty, value); }
      56. }
      58. public DragDropEffects AcceptedEffects
      59. {
      60. get { return (DragDropEffects)GetValue(AcceptedEffectsProperty); }
      61. set { SetValue(AcceptedEffectsProperty, value); }
      62. }
      64. public Action<object> DropCompletedCallback
      65. {
      66. get { return (Action<object>)GetValue(DropCompletedCallbackProperty); }
      67. set { SetValue(DropCompletedCallbackProperty, value); }
      68. }
      71. public bool isEnabled
      72. {
      73. get { return (bool)GetValue(isEnabledProperty); }
      74. set { SetValue(isEnabledProperty, value); }
      75. }
      77. public IDataObject DropDataObject
      78. {
      79. get { return (IDataObject)GetValue(DropDataObjectProperty); }
      80. set { SetValue(DropDataObjectProperty, value); }
      81. }
      83. public DragTargetBehavior()
      84. : base()
      85. {
      86. AcceptedDataTypes = new List<string>();
      87. }
      89. protected override void OnAttached()
      90. {
      91. AssociatedObject.AllowDrop = true;
      93. AssociatedObject.PreviewDragOver += (s, e) =>
      94. {
      95. e.Effects = DragDropEffects.None;
      96. if (isEnabled && AcceptedDataTypes.Count() == 0 || AcceptedDataTypes.Any(x => e.Data.GetFormats().Contains(x)))
      97. {
      98. e.Effects = AcceptedEffects;
      99. }
      100. e.Handled = true;
      101. };
      103. AssociatedObject.Drop += (s, e) =>
      104. {
      105. if (!isEnabled) return;
      106. DropEffect = e.Effects;
      107. DropPosition = e.GetPosition(AssociatedObject);
      108. if (AcceptedDataTypes.Count() == 0)
      109. DropType = e.Data.GetFormats()[0];
      110. else
      111. DropType = e.Data.GetFormats().First(x => AcceptedDataTypes.Contains(x));
      112. DropData = e.Data.GetData(DropType);
      113. DropDataObject = e.Data;
      114. e.Handled = true;
      115. if (DropCompletedCallback != null)
      116. DropCompletedCallback(DropData);
      118. };
      119. }
      121. protected override void OnDetaching()
      122. {
      123. AssociatedObject.AllowDrop = false;
      124. isEnabled = false;
      125. base.OnDetaching();
      126. }
      127. }



      DropData ist hierbei nicht das gesamte DatenObjekt sondern nur das erste Objekt, auf das ein in AcceptedDataTypes angegebener Daten Type zutrifft. Dies macht es leichter direkt an Dieses zu binden. Das vollständige DatenObjekt findet man in DropDataObject (zum Beispiel zum binden an das ViewModel).
      Die weiteren Properties sollten selbsterklärend sein, mit Ausnahme von DropCompletedCallback. An dieses kann eine Action<object> gebunden werden, die ausgeführt wird, wenn ein Drop abgeschlossen wurde. Ich verwende sie in dem Beispiel Projekt zum Beispiel dafür, das gedroppte Bild zu laden.

      Das Ganze sieht in XAML so aus:
      DropTarget XAML

      XML-Quellcode

      1. <TextBlock Text="{Binding DropType, ElementName=dragTargetBehavior}">
      2. <i:Interaction.Behaviors>
      3. <Behaviors:DragTargetBehavior x:Name="dragTargetBehavior">
      4. <Behaviors:DragTargetBehavior.AcceptedDataTypes>
      5. <sys:String>System.Int32</sys:String>
      6. <sys:String>System.String</sys:String>
      7. </Behaviors:DragTargetBehavior.AcceptedDataTypes>
      8. </Behaviors:DragTargetBehavior>
      9. </i:Interaction.Behaviors>
      10. </TextBlock>


      Da es einige Controls gibt, die Drag 'n' Drop nicht unterstützen (z.B. Grid und alle weiteren Pannels und Image) hab ich auch noch einen einfachen Container geschrieben, der die Drop Funktionalität für alle Children bereitstelt.
      DropPanel

      C#-Quellcode

      1. public class DropPanel : Panel
      2. {
      3. private Brush transparentBrush = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
      4. public DropPanel()
      5. : base()
      6. {
      7. this.AllowDrop = true;
      8. this.Background = transparentBrush;
      9. }
      12. protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize)
      13. {
      14. return availableSize;
      15. }
      17. protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)
      18. {
      19. foreach (UIElement child in InternalChildren)
      20. child.Arrange(new Rect(finalSize));
      22. return finalSize;
      23. }
      24. }


      Das DropPanel mag in der einen oder andere Situation hilfreich sein, ist aber ausdrücklich nicht ausgiebig von mir getestet worden!

      Wichtig: Damit die Behaviors funktionieren, muss ein Verweis auf System.Windows.Interactivity gesetzt werden und ein xml Namespace. Hierfür oben im <Window> die Zeile xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" hinzufügen. Für die Drag and Drop Behaviors sowie das DropPanel müssen ebenfalls xml Namespaces hinzugefügt werden.

      Anbei ist ein Demo Project in dem das Ganze mal in Aktion sehen kann.
      Ich hoffe jemandem ist damit geholfen, oder mein Codeerguss dient als Basis für etwas Ausgefeielteres.

      Gruß
      Zakath
      Dateien

      • WPFDragnDrop.zip

        (27,61 kB, 207 mal heruntergeladen, zuletzt: )

      Zakath schrieb:

      Da es einige Controls gibt, die Drag 'n' Drop nicht unterstützen (z.B. Grid und alle weiteren Pannels und Image) hab ich auch noch einen einfachen Container geschrieben, der die Drop Funktionalität für alle Children bereitstelt.
      Hmm - afaik unterstützen die Controls schon D&D.
      Hab dein DropPanel auch gleichmal runtergeschmissen, und ging ebenso gut.
      Spoiler anzeigen

      XML-Quellcode

      1. <Grid>
      2. <Grid.ColumnDefinitions>
      3. <ColumnDefinition Width="*" />
      4. <ColumnDefinition Width="*" />
      5. <ColumnDefinition Width="*" />
      6. </Grid.ColumnDefinitions>
      7. <ListView x:Name="liste" Grid.Column="0">
      8. <i:Interaction.Behaviors>
      9. <Behaviors:DragSourceBehavior DragData="{Binding SelectedItem, ElementName=liste}" />
      10. </i:Interaction.Behaviors>
      11. <sys:Int32>0</sys:Int32>
      12. <sys:Int32>1</sys:Int32>
      13. <sys:Int32>2</sys:Int32>
      14. <sys:Int32>3</sys:Int32>
      15. <sys:Int32>4</sys:Int32>
      16. <sys:Int32>5</sys:Int32>
      17. <sys:String>Hallo Welt</sys:String>
      18. </ListView>
      19. <StackPanel Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
      20. <i:Interaction.Behaviors>
      21. <Behaviors:DragTargetBehavior x:Name="dragTargetBehavior">
      22. <Behaviors:DragTargetBehavior.AcceptedDataTypes>
      23. <sys:String>System.Int32</sys:String>
      24. <sys:String>System.String</sys:String>
      25. </Behaviors:DragTargetBehavior.AcceptedDataTypes>
      26. </Behaviors:DragTargetBehavior>
      27. </i:Interaction.Behaviors>
      28. <StackPanel Orientation="Horizontal">
      29. <TextBlock Margin="0,0,5,0">Data:</TextBlock>
      30. <TextBox HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Text="{Binding DropData, ElementName=dragTargetBehavior}" />
      31. </StackPanel>
      32. <StackPanel Orientation="Horizontal">
      33. <TextBlock Margin="0,0,5,0">Type:</TextBlock>
      34. <TextBlock Text="{Binding DropType, ElementName=dragTargetBehavior}" />
      35. </StackPanel>
      36. </StackPanel>
      37. </Grid>
      Ich hab mich übrigens auch mit Wpf-D&D beschäftigt, fand aber, dass es bei D&D irrsinnig viele unterschiedliche Anforderungen gibt, dass man einen Vogel kriegt, wenn man mit Behaviors versucht, das alles abzudecken.
      Etwa in meinen Augen ist eine Standard-Anforderung an D&D, dass man Item in Listen einfügen kann. Und dabei muss während des Draggens auch markiert werden, wo das Item hin-droppen wird.
      Nächste Forderung geht dann an Treeview, da gibt es 2 Möglichkeiten zu droppen: Entweder einfach in den Ziel-Node hinein, das ist sinnvoll, wenn der TV seine Nodes selbst sortiert (wies etwa bei FileBrowsern sinnvoll ist).
      Oder dass man auch in TV ein DropItem gezielt zwischen 2 Nodes einfügen kann.
      Und dann will man vlt. noch Scroll-Verhalten, damit man während des Draggens noch hinscrollen kann, wo eingefügt werden soll, oder Treenodes sollen expandieren beim Drag-Over-Hover.
      Und bei meine letzten Übung damit musste auch individuell rückgefragt werden ins Viewmodel, ob auf diesen Node gedropt werden durfte oder nicht.
      und und und...

    Facebook
    Telefonspende