WPF, Silverlight, Silverlight for Windows Phone und Windows Store Apps

WPF: Drag and Drop
Kommentare

In der neuen Kolumne „XAML Expertise“ des Windows Developer präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „WPF: Drag and Drop“.

In letzter Zeit erhalte ich immer häufiger die Anfrage, wie denn eine simple oder komplexe Drag-and-Drop-Unterstützung ohne großen Aufwand implementiert werden kann. Eine der einfachsten Varianten wäre ein Drag and Drop Behavior aus Expression Blend zu verwenden. Jedoch hilft dieses nur für einfache Anforderungen. Zum Beispiel für ein Steuerelement, welches über ein Grid bewegt werden kann. Wenn man dann noch zusätzlich die Mausposition ermitteln möchte, werden diese Informationen leider durch das Behavior verschluckt. Also brauchen wir eine weitere Lösung, die auch für komplexe Szenarien verwendet werden kann. Eine komplexe Anforderung wären zwei unterschiedliche TreeViews, deren TreeViewItems man untereinander austauschen möchte.

Drag and Drop in WPF – so funktioniert’s

Genau dafür eignet sich das kostenfreie Open-Source-Drag-and-Drop-Framework GongSolutions. Dieses findet man unter NuGet mit „Gong drag drop“ oder unter GitHub. Nach dem Referenzieren des Frameworks im Projekt mit der GongSolutions.Wpf.DragDrop.dll muss dessen Namespace im XML-Namespace bei der erwarteten XAML View deklariert werden:

xmlns:dd="clr-namespace:GongSolutions.Wpf.DragDrop;assembly=GongSolutions.Wpf.DragDrop"

Den beiden TreeView-Steuerelementen wird jetzt nun doch die Drag-and-Drop-Erweiterung via Attached Properties zugewiesen. Dazu stehen unterschiedliche Optionen offen. Ein TreeView-Steuerelement kann DragSource, DropTarget oder auch beides gleichzeitig unterstützen (Listing 1).


    
            
        

        

    

Die beiden Vorgänge DragOver und Drop können auch durch eigene Logik erweitert werden. Dazu einfach im ViewModel das Interface IDropTarget implementieren. Als Parameter erhält man eine Instanz von IDropInfo, womit unterschiedliche Optionen und Daten zur Verfügung stehen (Listing 2).

public class DefaultViewModel : IDropTarget
{
  public ObservableCollection Customers { get; set; }
  public ObservableCollection Employees { get; set; }

  public DefaultViewModel()
  {
    Customers = new ObservableCollection();
    Employees = new ObservableCollection();

    CreateSampleData();
  }

  private void CreateSampleData()
  {
    ...
  }

  public void DragOver(IDropInfo dropInfo)
  {
    dropInfo.Effects = DragDropEffects.Move;
  }

  public void Drop(IDropInfo dropInfo)
  {
    if (dropInfo.Data.GetType() == typeof (Person))
    {
      Person person = (Person) dropInfo.Data;
      ...
    }
    else
    {
      ...
    }
  }
}

Damit die Funktionalität auch im ViewModel ausgelöst wird, muss zudem das Attached-Property DragDrop.DropHandler auf das ViewModel gebunden werden. Listing 3 zeigt die zweite TreeView mit dessen Data Binding.


    
            
        

        
            
    
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -