DataBinding in Treeview with Drag and Drop Features in Silverlight

Introduction

In this article, i will show you how to implement databinding to treeview with drag and drop features in silverlight.The silverlight is now days is used in most web application. because this look and feel is great.But there are some limitation in implementation vise.Through this article, i will explain how we could implement drag and drop features within treeview,when we are bind data to treeview.

Final Output

Implementation

 Step 1

Let's create a silverlight project using visual studio 2010.

Step 2

Now we have to add class to write code to get the data from database and implement other necessary functions.my class name is "Layer.cs", if you want to you can choice any name for this class. 

The Layer.cs class will like following,

Layer.cs 

Step 3

Now navigate to Main.axml design surface and add treeview control and made design like followings,

Note:As you see in above screen shot, i have added a StackPanel within the two TreeViewDragDropTarget.More about TreeViewDragDropTarget here. Now add TreeView and TreeviewTemplate within the TreeViewDragDropTarget as like following. 

This is first treeview have a checkbox and label in order to display Layer object properties.I need to add one more Treeview to display images with drag and drop features. 

Now design is ready, next navigate to code behind and write code.

Now here is important points we have to handle in our code, when you are bind images to control in silverlight, you can't do this. because silverlight image binding using ImageSource to bind images source in to control.So Microsoft made easy , we can do use the Converter to do this easily.

Note:Here more about Converter in Sillverlight

http://msdn.microsoft.com/en-us/library/98bbex99%28VS.95%29.aspx

http://msdn.microsoft.com/en-us/library/cc645047%28VS.95%29.aspx

Now we write simple code to Convert Image to Bind Control, 

That's all we have done, let's run the code and check or uncheck the checkbox and see how is working, then you able to drag and drop the left side or right side portion to within bi-direction.

Download Sample Project

Download source files -4740 kb

Summary

Through this article, you have learned In this article,how to implement databinding to treeview with drag and drop features in silverlight.I hope this helps.