Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / XAML

How to Drag and Drop between ListBox using Silverlight 4 Toolkit?

Rate me:
Please Sign up or sign in to vote.
4.93/5 (12 votes)
15 May 2010CPOL4 min read 157.4K   1.9K   19   40
In this article, I will show you how to create an Drag and Drop ListBox using the Silverlight 4 ToolKit. Here you will learn how to drag and drop between two ListBoxes as well as in the same ListBox.

Introduction

In this article, I am going to discuss the Drag and Drop functionality inside a Silverlight ListBox control. This article will also cover the Drag and Drop operation between two ListBox controls. Here, we will use the Silverlight 4 Toolkit to implement the feature.

DragDropListBox_3.png DragDropListBox_6.png

Background

Drag & Drop functionality is not present in Silverlight ListBox by default. Hence, there was a big problem implementing the feature. We had to write a huge code for this feature. But using Silverlight Toolkit, you can do it very easily. You can download the Silverlight 4 Toolkit from the CodePlex Silverlight Toolkit site.

Using the Code

Silverlight 4 Toolkit has a control named ListBoxDragDropTarget which has the functionality for doing the Drag & Drop operation inside a ListBox control. Let us start creating our sample application with two ListBox controls and populate one of them with some dummy data. We will be able to drag the ListBox element within the same ListBox control and also be able to drop it into the second ListBox control.

  • First of all, create a Silverlight Application named "Silverlight4.DragDropListBox".
  • Now, right click on the Silverlight project and click "Add Reference". From the "Add Reference dialog, add the Silverlight Toolkit assembly reference in your project. Once you are done with adding the assembly reference, you can use it anywhere inside your application.
  • Now open the MainPage.xaml and add the Toolkit DLL reference inside it, so that we can use the toolkit controls inside the page. Once added, it will look like this:
XML
<UserControl x:Class="Silverlight4.DragDropListBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolKit="clr-namespace:System.Windows.Controls;
		assembly=System.Windows.Controls.Toolkit">
</UserControl>

Here, the line mentioned below is the reference to the Silverlight Toolkit. We prefixed the reference with “toolkit”, so that we can refer to the Silverlight toolkit using the “toolkit:” keyword.

XML
xmlns:toolKit="clr-namespace:System.Windows.Controls;
	assembly=System.Windows.Controls.Toolkit"

Let us add the ListBoxDragDropTarget inside the Grid. Set the attribute “AllowDrop” to True. Once it is set to true, it will be able to catch the drop event inside the control.

XML
<toolKit:ListBoxDragDropTarget AllowDrop="True">
</toolKit:ListBoxDragDropTarget>

Now we will add a ListBox inside the ListBoxDragDropTarget which we just added inside the XAML page. Set proper Height and Width of the ListBox control. Also, we will set the DisplayMemberPath=”Name”. This is because, we will fetch some dummy Person information and set the ItemSource of the ListBox to that data where the Person has a property named “Name”. The name of the person will be visible here in the drop down.

XML
<toolKit:ListBoxDragDropTarget AllowDrop="True">
  <ListBox x:Name="customerListBoxMain"
	Height="200" Width="200" DisplayMemberPath="Name">
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
        <StackPanel Orientation="Vertical"/>
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
  </ListBox>
</toolKit:ListBoxDragDropTarget>

Let us create another ListBox control surrounded with ListBoxDragDropTarget. Here also, we will set the same properties that we mentioned earlier.

XML
<toolKit:ListBoxDragDropTarget AllowDrop="True">
  <ListBox Height="200" Width="200" DisplayMemberPath="Name">
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
        <StackPanel Orientation="Vertical"/>
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
  </ListBox>
</toolKit:ListBoxDragDropTarget>

Once we are done creating the XAML view, we can go ahead to fetch some data and set it to the Source of the first ListBox from code behind. Here is the sample code:

C#
public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        customerListBoxMain.ItemsSource = PersonDataProvider.GetData();
    }
}

Drag and Drop between Two ListBoxes

Once our design and coding is done, we can run the Silverlight application to showcase our work. Press F5 to run the application inside a browser. Once loaded, you will see two Listbox controls available in the screen. One contains some dummy data and another is empty.

DragDropListBox_1

Now, we will drag one element from the first listbox to outside. We will see that the mouse cursor changed to “Unavailable” icon. Once you release your mouse, you will notice that the item was not dropped at the specific point. Why? Because we marked only the two Listbox controls as DropTarget.

DragDropListBox_2

Now again we will start the drag operation from the first listbox and this time we will drag it inside the second Listbox control. What happened? The mouse cursor now has a small arrow with it. This is notifying that the item can be dropped here.

DragDropListBox_3

Just release the mouse cursor and you will see that the Element has been removed from the first listbox and added to the second list.

DragDropListBox_4

Drag and Drop Within the Same ListBox

Here we will see the drag and drop operation within the same ListBox control. Start dragging any element and move it upward or downward within the same ListBox control. You will see that, the cursor has been changed to drop icon, i.e., an arrow near the cursor. Also, it will show you a line inside the ListBox. This is the place where the drag and drop operation is going to happen.

DragDropListBox_6

Release your mouse and you will see that the item has been moved to a new position.

DragDropListBox_7

If the list is too big and you want to reposition your element in a specific location down the list, just do a drag to the end. You will see the scrollbar already started the scrolling operation automatically.

DragDropListBox_8

Points of Interest

This is very useful when you want to do some drag and drop operation within a treeview or between listbox controls. You will also find it useful while rearranging a list of items by the end user.

Please drop a line with your feedbacks/suggestions/comments.

Also, don't forget to vote for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
QuestionError showing up Pin
roelliee_3-Apr-13 2:20
professionalroelliee_3-Apr-13 2:20 
AnswerRe: Error showing up Pin
Kunal Chowdhury «IN»3-Apr-13 6:11
professionalKunal Chowdhury «IN»3-Apr-13 6:11 
GeneralMy vote of 5 Pin
Ahmed Bakoodh10-Sep-12 20:01
professionalAhmed Bakoodh10-Sep-12 20:01 
Questionerror in silverlight 4 Pin
khalid_rf25-Mar-12 21:46
khalid_rf25-Mar-12 21:46 
QuestionQuery Pin
khalid_rf10-Mar-12 22:20
khalid_rf10-Mar-12 22:20 
QuestionGood Pin
Ujjai22-Aug-11 1:51
Ujjai22-Aug-11 1:51 
GeneralMy vote of 4 Pin
Costy_8311-Jan-11 21:25
Costy_8311-Jan-11 21:25 
GeneralHave you tried this with ViewModel collection Pin
Rasika Sherman11-Dec-10 2:27
Rasika Sherman11-Dec-10 2:27 
GeneralMy vote of 5 Pin
Member 740954115-Oct-10 2:07
Member 740954115-Oct-10 2:07 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»24-Oct-10 16:38
professionalKunal Chowdhury «IN»24-Oct-10 16:38 
GeneralThis ia good article Pin
Member 46143011-Oct-10 14:21
Member 46143011-Oct-10 14:21 
GeneralRe: This ia good article Pin
Kunal Chowdhury «IN»11-Oct-10 15:32
professionalKunal Chowdhury «IN»11-Oct-10 15:32 
GeneralMy vote of 4 Pin
chavahgr10-Aug-10 11:44
chavahgr10-Aug-10 11:44 
GeneralRe: My vote of 4 Pin
Kunal Chowdhury «IN»21-Aug-10 0:13
professionalKunal Chowdhury «IN»21-Aug-10 0:13 
GeneralDoes Not Work in a ChildWindow Pin
Rudy Chavez2-Jul-10 4:10
Rudy Chavez2-Jul-10 4:10 
GeneralRe: Does Not Work in a ChildWindow Pin
chavahgr10-Aug-10 12:14
chavahgr10-Aug-10 12:14 
GeneralRe: Does Not Work in a ChildWindow Pin
x_vanish5-Apr-11 3:39
x_vanish5-Apr-11 3:39 
GeneralRe: Does Not Work in a ChildWindow Pin
x_vanish5-Apr-11 2:15
x_vanish5-Apr-11 2:15 
GeneralMy vote of 2 Pin
Sacha Barber16-May-10 0:57
Sacha Barber16-May-10 0:57 
GeneralRe: My vote of 2 Pin
Kunal Chowdhury «IN»18-May-10 22:45
professionalKunal Chowdhury «IN»18-May-10 22:45 
GeneralRe: My vote of 2 Pin
Sacha Barber18-May-10 23:12
Sacha Barber18-May-10 23:12 
GeneralRe: My vote of 2 Pin
Kunal Chowdhury «IN»19-May-10 1:59
professionalKunal Chowdhury «IN»19-May-10 1:59 
QuestionPictures [modified] Pin
ziopino7015-May-10 10:14
ziopino7015-May-10 10:14 
AnswerRe: Pictures Pin
Kunal Chowdhury «IN»15-May-10 17:54
professionalKunal Chowdhury «IN»15-May-10 17:54 
GeneralRe: Pictures Pin
Kunal Chowdhury «IN»15-May-10 17:57
professionalKunal Chowdhury «IN»15-May-10 17:57 
Ahhh... One thing I missed to say... Remember to remove the DisplayMemberPath from the ListBox as you are implementing the DataTemplate of the ListBox itself.
Regards - Kunal Chowdhury | Software Developer | Chennai | India | My Blog | My Tweets | Silverlight Tutorial

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.