Drag and drop items between 2 treeview controls in Silverlight

Bh80prk
Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 4197 red flag
Rating: 5 out of 5  
 1 vote(s)

Silverlight provides drag and drop feature between any two silverlight controls. Assume that you have requirement list of employees loaded in one treeview control (Source) and drag one of the employee from Source to destination treeview control (selected).

Introduction

Silverlight toolkit provides lot of rich controls and functionalities. We are going to learn Drag and Drop feature and usage of observable collection. 


Objective

This article will guide on how to implement drag and drop feature between 2 treeview controls and identify items being added or removed in original (source) treeview control.


Using the code


TreeViewDragDropTarget control and AllowDrop="true" attribute enables drag and drop feature to tree view control. Below code help you to understand better. 

<UserControl x:Class="TreeViewDemo.TreeViewToTreeViewControl"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="400"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="All Countries" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" />
        <toolkit:TreeViewDragDropTarget AllowDrop="True" Grid.Column="0" Grid.Row="1" VerticalAlignment="Top">
            <sdk:TreeView HorizontalAlignment="Left" Name="fromTreeView" VerticalAlignment="Top" Width="152" AllowDrop="True" Height="250">
                <sdk:TreeViewItem Header="Australia" />
                <sdk:TreeViewItem Header="Canada" />
                <sdk:TreeViewItem Header="China" />
                <sdk:TreeViewItem Header="France" />
                <sdk:TreeViewItem Header="Germany" />
                <sdk:TreeViewItem Header="India" />
            </sdk:TreeView>
        </toolkit:TreeViewDragDropTarget>

        <TextBlock Text="Selected Countries" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" />
        <toolkit:TreeViewDragDropTarget AllowDrop="True" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top">
            <sdk:TreeView HorizontalAlignment="Left" Name="treeView2" VerticalAlignment="Top" Width="152" AllowDrop="True" Height="250">
                <sdk:TreeViewItem Header="Saudi Arabia" />
            </sdk:TreeView>
        </toolkit:TreeViewDragDropTarget>
    </Grid>
</UserControl>

Sometimes we may need to know items added / removed from treeview or listbox controls. This can be achieved by using observable collection. In silverlight observable collection frequently used to bind list of data to listbox or treeview control. ObservableCollection provides CollectionChanged event to notify items added or removed from collection. items_CollectionChanged eventhandler invoked when items are added / removed from collection.  It has e.NewItems provides list of items added and e.OldItems provides list of items removed.

        List<Order> itemsAddedList = new List<Order>();
        List<Order> itemsRemovedList = new List<Order>();
        public MainPage()
        {
            InitializeComponent();
            ObservableCollection<Order> items = new ObservableCollection<Order>
            {
                new Order(){Id="1", Name="One"},
                new Order(){Id="2", Name="Two"},
                new Order(){Id="3", Name="Three"},
            };
            
            dataGrid1.DataContext = items;
            items.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(items_CollectionChanged);
            Order item4 = new Order() { Id = "4", Name = "Four" };
            Order item5 = new Order() { Id = "5", Name = "Five" };
            items.Add(item4);
            items.Add(item5);
            items.Remove(item4);
        }

        public void items_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
        {
            if (e.Action == NotifyCollectionChangedAction.Add)
            {
                foreach (Order item in e.NewItems)
                {
                    itemsAddedList.Add(item);
                }
            }
           
            if (e.Action == NotifyCollectionChangedAction.Remove)
            {
                foreach (Order item in e.OldItems)
                {
                    itemsRemovedList.Add(item);
                }
            }


        }


Conclusion

Hope this article may helps to learn drag and drop feature of Silverlight and notify changes in the observable collection. 

Please share your honest feedback to improve quality of my articles.

Reference

Referred Silverlight 4 toolkit

Page copy protected against web site content infringement by Copyscape

About the Author

Bh80prk
Full Name: Prakash Bawa Harikrishnan
Member Level: Starter
Member Status: Member
Member Since: 12/21/2012 4:38:21 AM
Country: India
Thanks, Prakash

I am very passionate in learning microsoft web technologies and share my knowledge with others.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)