Click here to Skip to main content
13,408,750 members (46,420 online)
Click here to Skip to main content
Add your own
alternative version


7 bookmarked
Posted 4 Dec 2009

Silverlight: Drag And Drop ListBoxItem to Canvas (using Telerik Control)

Rate this:
Please Sign up or sign in to vote.
While surfing through different forums, I noticed that lots of people are actually facing issues while trying to implement the drag and drop feature. The main problem arises while trying to drag from a ListBox to a panel like canvas.

Editorial Note

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.


While surfing through different forums, I noticed that lots of people are actually facing issues while trying to implement the drag and drop feature. The main problem arises while trying to drag from a ListBox to a panel like canvas. In this post, I will go through the steps to demonstrate such a feature. 

Here I will use Telerik control to give out the demonstration. You can download the trial version of the DLLs from Telerik Silverlight Control Page. I have implemented the demo using Silverlight 4 Beta 1. The same thing is also possible in the earlier version of Silverlight. You can download Silverlight SDK from Silverlight site. To develop apps in Silverlight 4, you need Visual Studio 2010 Beta 2 which you can download from the Microsoft site.

Use of Code

So, let's go for implementing the same. Create a Silverlight project. Let's create a ListBox and a Canvas inside the LayoutRoot:

<Grid x:Name="LayoutRoot" Background="White">
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="*"/>
    <ListBox x:Name="lstBox" Margin="10" Grid.Column="0"/>
    <Canvas x:Name="cnvDropBox" Background="Yellow" Margin="10" Grid.Column="1"/>

Now in the code behind, we have to register the Drag and Drop events for the ListBox & Canvas. Use RadDragAndDropManager class to register the same. 

RadDragAndDropManager.AddDragInfoHandler(lstBox, OnDragInfo);
RadDragAndDropManager.AddDragQueryHandler(lstBox, OnDragQuery);
RadDragAndDropManager.AddDropInfoHandler(cnvDropBox, OnDropInfo);
RadDragAndDropManager.AddDropQueryHandler(cnvDropBox, OnDropQuery);

RadDragAndDropManager.SetAllowDrop(cnvDropBox, true);

The implementation of the events will be as below:

private void OnDragQuery(object sender, DragDropQueryEventArgs e)
    if (e.Options.Status == DragStatus.DragQuery)
        var draggedListBoxItem = e.Options.Source as Image;
        e.Options.DragCue = draggedListBoxItem.Source;
        e.Options.Payload = draggedListBoxItem.Source;

    e.QueryResult = true;
    e.Handled = true;

private void OnDragInfo(object sender, DragDropEventArgs e)
    if (e.Options.Status == DragStatus.DragComplete)
        // comment this block if you are going to clone

private void OnDropInfo(object sender, DragDropEventArgs e)
    var droppablePanel = e.Options.Destination;

    if (e.Options.Status == DragStatus.DropComplete && droppablePanel is Canvas)
        FrameworkElement dragableControl = null;
        Point desiredPosition = new Point();
        Point currentDragPoint = e.Options.CurrentDragPoint;
        Point canvasPosition = cnvDropBox.TransformToVisual(null).Transform(new Point());

        if (e.Options.Source is Image)
            // create the new instance & update the necessary properties
            // this step is required if you are going to make a clone
            Image tempDragableControl = e.Options.Source as Image;
            dragableControl = new Image() { Source = tempDragableControl.Source };

        desiredPosition.X = currentDragPoint.X - canvasPosition.X;
        desiredPosition.Y = currentDragPoint.Y - canvasPosition.Y;
        dragableControl.SetValue(Canvas.LeftProperty, desiredPosition.X);
        dragableControl.SetValue(Canvas.TopProperty, desiredPosition.Y);

private void OnDropQuery(object sender, DragDropQueryEventArgs e)
    var droppablePanel = e.Options.Destination;

    if (e.Options.Status == DragStatus.DropDestinationQuery && droppablePanel is Canvas)
        e.QueryResult = true;
        e.Handled = true;

As I am using Image inside the ListBoxItem, hence OnDragQuery I am setting the Source as an Image to the DragCue & PayLoad properties. OnDragInfo I am removing item from the ListBox. If you don't want to remove the dragged image from the ListBox, then just remove that line. OnDropInfo I am just placing the Image to the appropriate position which we will get as CurrentDragPoint in the DragDropEventArgs.

This is a sample demonstration. So, you have to explore it more to fulfil your requirement.


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


About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer 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 Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Book authored:

Connect with me on:

My CodeProject Awards/Prizes:

You may also be interested in...

Comments and Discussions

QuestionNice about MVVM Light??? Pin
markbaer22-Sep-10 7:40
membermarkbaer22-Sep-10 7:40 
GeneralGreat Tutorial... Pin
rudi1206-Jan-10 4:51
memberrudi1206-Jan-10 4:51 
GeneralRe: Great Tutorial... Pin
KunalChowdhury15-Feb-10 20:22
memberKunalChowdhury15-Feb-10 20:22 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02-2016 | 2.8.180212.1 | Last Updated 4 Dec 2009
Article Copyright 2009 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid