Controls / DragDropManager

New to Telerik UI for WPF? Download free 30-day trial

Getting Started with WPF DragDropManager

This article will demonstrate a basic implementation of the DragDropManager by dragging between two ListBoxes.

To learn how to use the DragDropManager in a more MVVM-friendly matter though commands, have a look at the "DragDrop Using Commands" demo from our SDK Samples Browser. The source code of the demo is also available in our GitHub repository.

Adding Telerik Assemblies Using NuGet

To use DragDropManager when working with NuGet packages, install the Telerik.Windows.Controls.for.Wpf.Xaml package. The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package article.

With the 2025 Q1 release, the Telerik UI for WPF has a new licensing mechanism. You can learn more about it here.

Adding Assembly References Manually

In order to use the DragDropManager API you need to add a reference to the following assemblies:

  • Telerik.Licensing.Runtime
  • Telerik.Windows.Controls

The required Telerik assemblies can be added using one of the available installation approaches.

Using the DragDropManager Events

For the purpose of this tutorial we will create a business object ApplicationInfo, which will expose a couple of properties as well as a sample collection for populating the ListBoxes. The structure of the class used in this example is shown on the next code snippets:

Create ApplicationInfo

public class ApplicationInfo 
{ 
    public Double Price 
    { 
        get; 
        set; 
    } 
    public String IconPath 
    { 
        get; 
        set; 
    } 
    public String Name 
    { 
        get; 
        set; 
    } 
    public String Author 
    { 
        get; 
        set; 
    } 
    public static ObservableCollection<ApplicationInfo> GenerateApplicationInfos() 
    { 
        ObservableCollection<ApplicationInfo> result = new ObservableCollection<ApplicationInfo>(); 
        ApplicationInfo info1 = new ApplicationInfo(); 
        info1.Name = "Large Collider"; 
        info1.Author = "C.E.R.N."; 
        info1.IconPath = @"img/Atom.png"; 
        result.Add(info1); 
        ApplicationInfo info2 = new ApplicationInfo(); 
        info2.Name = "Paintbrush"; 
        info2.Author = "Imagine Inc."; 
        info2.IconPath = @"img/Brush.png"; 
        result.Add(info2); 
        ApplicationInfo info3 = new ApplicationInfo(); 
        info3.Name = "Lively Calendar"; 
        info3.Author = "Control AG"; 
        info3.IconPath = @"img/CalendarEvents.png"; 
        result.Add(info3); 
        ApplicationInfo info4 = new ApplicationInfo(); 
        info4.Name = "Fire Burning ROM"; 
        info4.Author = "The CD Factory"; 
        info4.IconPath = @"img/CDBurn.png"; 
        result.Add(info4); 
        ApplicationInfo info5 = new ApplicationInfo(); 
        info5.Name = "Fav Explorer"; 
        info5.Author = "Star Factory"; 
        info5.IconPath = @"img/favorites.png"; 
        result.Add(info5); 
        ApplicationInfo info6 = new ApplicationInfo(); 
        info6.Name = "IE Fox"; 
        info6.Author = "Open Org"; 
        info6.IconPath = @"img/Connected.png"; 
        result.Add(info6); 
        ApplicationInfo info7 = new ApplicationInfo(); 
        info7.Name = "Charting"; 
        info7.Author = "AA-AZ inc"; 
        info7.IconPath = @"img/ChartDot.png"; 
        result.Add(info7); 
        ApplicationInfo info8 = new ApplicationInfo(); 
        info8.Name = "SuperPlay"; 
        info8.Author = "EB Games"; 
        info8.IconPath = @"img/Games.png"; 
        result.Add(info8); 
        return result; 
    } 
}

Then we need to define our ListBoxes with suitable ItemTemplates. We also enable dragging the ListBoxItems (through style) and allow drop to each of the ListBoxes (through setting AllowDrop property):

Define ListBoxes, style and DataTemplate

<Grid x:Name="LayoutRoot" Background="White"> 
      <Grid.Resources> 
          <Style TargetType="ListBoxItem"> 
              <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"></Setter> 
          </Style> 
          <DataTemplate x:Key="ApplicationTemplate"> 
              <StackPanel Orientation="Horizontal"> 
                  <Image Source="{Binding IconPath}"/> 
                  <TextBlock Margin="5" Text="{Binding Name}" VerticalAlignment="Center"></TextBlock> 
              </StackPanel> 
          </DataTemplate> 
       </Grid.Resources> 
       <Grid.ColumnDefinitions> 
           <ColumnDefinition></ColumnDefinition> 
           <ColumnDefinition></ColumnDefinition> 
       </Grid.ColumnDefinitions> 
       <ListBox x:Name="ApplicationList" ItemTemplate="{StaticResource ApplicationTemplate}" AllowDrop="True"/> 
       <ListBox x:Name="MyAppList" Background="Gray" Grid.Column="1"   
                ItemTemplate="{StaticResource ApplicationTemplate}" AllowDrop="True"/> 
</Grid>

To use the DragDropManager and its components in XAML you have to declare the following namespace: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Afterwards we need to set the ItemsSource of the controls:

Set ItemsSource

ApplicationList.ItemsSource = ApplicationInfo.GenerateApplicationInfos(); 
MyAppList.ItemsSource = new ObservableCollection<ApplicationInfo>();

Attach Drag-Drop event handlers

DragDropManager.AddDragInitializeHandler(ApplicationList, OnDragInitialize); 
DragDropManager.AddDragInitializeHandler(MyAppList, OnDragInitialize); 
 
DragDropManager.AddGiveFeedbackHandler(ApplicationList, OnGiveFeedback); 
DragDropManager.AddGiveFeedbackHandler(MyAppList, OnGiveFeedback); 
 
DragDropManager.AddDragDropCompletedHandler(ApplicationList, OnDragCompleted); 
DragDropManager.AddDragDropCompletedHandler(MyAppList, OnDragCompleted); 
 
DragDropManager.AddDropHandler(ApplicationList, OnDrop); 
DragDropManager.AddDropHandler(MyAppList, OnDrop);

For more information about the available events, check out the Events article.

Then on DragInitialize we define the data that will be dragged as well as the visual representation. We also set DragDropEffects to all to allow drop on all scenarios.

Implement OnDragInitialize

private void OnDragInitialize(object sender, DragInitializeEventArgs args) 
{ 
    args.AllowedEffects = DragDropEffects.All; 
    var payload = DragDropPayloadManager.GeneratePayload(null); 
    var data = ((FrameworkElement)args.OriginalSource).DataContext; 
    payload.SetData("DragData", data); 
    args.Data = payload; 
    args.DragVisual = new ContentControl { Content = data, ContentTemplate = LayoutRoot.Resources["ApplicationTemplate"] as DataTemplate }; 
}

In order for the DragInitialize method to occur, the DragDropManager.AllowCapturedDrag attached property has to be set on the source element. In this example, this is set via the Style that targets the ListBoxItem element.

We also set mouse cursor to be arrow:

Implement OnGiveFeedback

private void OnGiveFeedback(object sender, Telerik.Windows.DragDrop.GiveFeedbackEventArgs args) 
{ 
    args.SetCursor(Cursors.Arrow); 
    args.Handled = true; 
}

Finally, we add logic, that will be executed when drag and drop operations finish:

Implement OnDrop

private void OnDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs args) 
{ 
    var data = ((DataObject)args.Data).GetData("DragData"); 
    ((IList)(sender as ListBox).ItemsSource).Add(data); 
} 
 
public void OnDragCompleted(object sender, Telerik.Windows.DragDrop.DragDropCompletedEventArgs args) 
{ 
    var data = DragDropPayloadManager.GetDataFromObject(args.Data, "DragData"); 
    ((IList)(sender as ListBox).ItemsSource).Remove(data); 
}

Drag between ListBoxes

Drag between ListBoxes

By default the DragDropManager shows the drag visual in a separate window. You have the option to set the UseAdornerLayer property of the DragDropManager. After this property is set to True, the drag visual will be shown in the AdornerLayer of the MainWindow.

Telerik UI for WPF Learning Resources

In this article
Related articles
Not finding the help you need? Improve this article