Edit this page

Getting Started

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

In order to use DragDropManager you have to add reference to Telerik.Windows.Controls assembly.

Firstly, 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:

public class ApplicationInfo
    public Double Price
    public String IconPath
    public String Name
    public String Author
    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";
        ApplicationInfo info2 = new ApplicationInfo();
        info2.Name = "Paintbrush";
        info2.Author = "Imagine Inc.";
        info2.IconPath = @"img/Brush.png";
        ApplicationInfo info3 = new ApplicationInfo();
        info3.Name = "Lively Calendar";
        info3.Author = "Control AG";
        info3.IconPath = @"img/CalendarEvents.png";
        ApplicationInfo info4 = new ApplicationInfo();
        info4.Name = "Fire Burning ROM";
        info4.Author = "The CD Factory";
        info4.IconPath = @"img/CDBurn.png";
        ApplicationInfo info5 = new ApplicationInfo();
        info5.Name = "Fav Explorer";
        info5.Author = "Star Factory";
        info5.IconPath = @"img/favorites.png";
        ApplicationInfo info6 = new ApplicationInfo();
        info6.Name = "IE Fox";
        info6.Author = "Open Org";
        info6.IconPath = @"img/Connected.png";
        ApplicationInfo info7 = new ApplicationInfo();
        info7.Name = "Charting";
        info7.Author = "AA-AZ inc";
        info7.IconPath = @"img/ChartDot.png";
        ApplicationInfo info8 = new ApplicationInfo();
        info8.Name = "SuperPlay";
        info8.Author = "EB Games";
        info8.IconPath = @"img/Games.png";
        return result;
Public Class ApplicationInfo
 Public Property Price() As [Double]
   Return m_Price
  End Get
   m_Price = Value
  End Set
 End Property
 Private m_Price As [Double]
 Public Property IconPath() As [String]
   Return m_IconPath
  End Get
   m_IconPath = Value
  End Set
 End Property
 Private m_IconPath As [String]
 Public Property Name() As [String]
   Return m_Name
  End Get
   m_Name = Value
  End Set
 End Property
 Private m_Name As [String]
 Public Property Author() As [String]
   Return m_Author
  End Get
   m_Author = Value
  End Set
 End Property
 Private m_Author As [String]
 Public Shared Function GenerateApplicationInfos() As ObservableCollection(Of ApplicationInfo)
  Dim result As New ObservableCollection(Of ApplicationInfo)()
  Dim info1 As New ApplicationInfo()
  info1.Name = "Large Collider"
  info1.Author = "C.E.R.N."
  info1.IconPath = "img/Atom.png"
  Dim info2 As New ApplicationInfo()
  info2.Name = "Paintbrush"
  info2.Author = "Imagine Inc."
  info2.IconPath = "img/Brush.png"
  Dim info3 As New ApplicationInfo()
  info3.Name = "Lively Calendar"
  info3.Author = "Control AG"
  info3.IconPath = "img/CalendarEvents.png"
  Dim info4 As New ApplicationInfo()
  info4.Name = "Fire Burning ROM"
  info4.Author = "The CD Factory"
  info4.IconPath = "img/CDBurn.png"
  Dim info5 As New ApplicationInfo()
  info5.Name = "Fav Explorer"
  info5.Author = "Star Factory"
  info5.IconPath = "img/favorites.png"
  Dim info6 As New ApplicationInfo()
  info6.Name = "IE Fox"
  info6.Author = "Open Org"
  info6.IconPath = "img/Connected.png"
  Dim info7 As New ApplicationInfo()
  info7.Name = "Charting"
  info7.Author = "AA-AZ inc"
  info7.IconPath = "img/ChartDot.png"
  Dim info8 As New ApplicationInfo()
  info8.Name = "SuperPlay"
  info8.Author = "EB Games"
  info8.IconPath = "img/Games.png"
  Return result
 End Function
End Class

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):

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

To use the DragDropManager and its components in XAML you have to declare the following namespace:

Afterwards we need to set the ItemsSource of the controls:

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

Now, we need to 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);  
DragDropManager.AddDragInitializeHandler(ApplicationList, New DragInitializeEventHandler(AddressOf OnDragInitialize))
DragDropManager.AddDragInitializeHandler(MyAppList, New DragInitializeEventHandler(AddressOf OnDragInitialize))

DragDropManager.AddGiveFeedbackHandler(ApplicationList, New GiveFeedbackEventHandler(AddressOf OnGiveFeedback))
DragDropManager.AddGiveFeedbackHandler(MyAppList, New GiveFeedbackEventHandler(AddressOf OnGiveFeedback))

DragDropManager.AddDragDropCompletedHandler(ApplicationList, New DragDropCompletedEventHandler(AddressOf OnDragDropCompleted))
DragDropManager.AddDragDropCompletedHandler(MyAppList, New DragDropCompletedEventHandler(AddressOf OnDragDropCompleted))

DragDropManager.AddDropHandler(ApplicationList, New DragEventHandler(AddressOf OnDrop))
DragDropManager.AddDropHandler(MyAppList, New DragEventHandler(AddressOf OnDrop))   

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.

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 };
Private Sub OnDragInitialize(ByVal sender As Object, ByVal args As DragInitializeEventArgs)
    args.AllowedEffects = DragDropEffects.All
    Dim payload = DragDropPayloadManager.GeneratePayload(Nothing)
    Dim data = CType(args.OriginalSource, FrameworkElement).DataContext
    payload.SetData("DragData", data)
    args.Data = payload
    args.DragVisual = New ContentControl With {.Content = data, .ContentTemplate = TryCast(LayoutRoot.Resources("ApplicationTemplate"), DataTemplate)}
End Sub

We also set mouse cursor to be arrow:

private void OnGiveFeedback(object sender, Telerik.Windows.DragDrop.GiveFeedbackEventArgs args)
    args.Handled = true;
Private Sub OnGiveFeedback(sender As Object, args As Telerik.Windows.DragDrop.GiveFeedbackEventArgs)
 args.Handled = True
End Sub

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

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);
Private Sub OnDrop(ByVal sender As Object, ByVal args As Telerik.Windows.DragDrop.DragEventArgs)
    Dim data = CType(args.Data, DataObject).GetData("DragData")
    CType((TryCast(sender, ListBox)).ItemsSource, IList).Add(data)
End Sub

Public Sub OnDragCompleted(ByVal sender As Object, ByVal args As Telerik.Windows.DragDrop.DragDropCompletedEventArgs)
    Dim data = DragDropPayloadManager.GetDataFromObject(args.Data, "DragData")
    CType((TryCast(sender, ListBox)).ItemsSource, IList).Remove(data)
End Sub