In this article, I am going to discuss with you regarding the Drag and Drop functionality inside a Silverlight ListBox control. This article will also cover the Drag and Drop operation between two ListBox control. We will use here the Silvelright 4 Toolkit to implement the feature.
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 Silvelright 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 control 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 can 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:
<UserControl x:Class="Silverlight4.DragDropListBox.MainPage"
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 the Silverlight toolkit using the “toolkit:” keyword.
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.
<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.
<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 as we mentioned discussed earlier.
<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 forward to fetch some data and set it to the Source of the first ListBox from code behind. Here is the sample code:
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
customerListBoxMain.ItemsSource = PersonDataProvider.GetData();
}
}
Drag and Drop between two ListBox
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 the another is empty.
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.
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 drop here.
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.
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.
Release your mouse and you will see that the item has been moved to a new position.
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.
Points of Interest
This is very useful when you want to do some drag and drop operation within a tree view or between listbox control. 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.
Thank you for reading my blog.
Click Here to Download the entire Source Code
