Latest News

  • Silverlight Online Chat
    Jul 24, 2010

    Today we launch the new Silverlight Live Chat application demonstrating the Liquid RichTextBox and Emoticon replacements.

  • New Super Shoot Em Up 2 Game
    Jun 29, 2010

    Added to the Games section is the new Super Shoot 'Em Up 2 game. Take control of your tank with the aim to defeat the computer controlled opponents. Features all new weapons, levels and Battle Mode!

  • Silverlight 4 Controls V5.3.2 Released
    Jun 28, 2010

    This release contains several fixes raised in the forums.

  • New Sandmania Puzzle Game
    Jun 18, 2010

    Sandmania is the latest game from vectorlight, the aim of this game is to guide sand from the top of the screen to the various colored containers below.

  • New Moon Tower Defense Game
    May 29, 2010

    Added to the Games section is the new Moon Tower Defense game. Defend the Moon from the circling Aliens and Humans.

Enabling Drag and Drop

Here we have a simple tutorial to demonstrate the drag and drop functionality of the TreeView control.  In this example we have 2 folders containing 5 files.  When using the Liquid TreeView if you wish to use the drag and drop feature you must be using icons for your nodes you wish to drag.  This is essential as to drag a node you do so by clicking the node icon and drag the node to it's destination.


Implementing Drag and Drop

Here is the XAML for this demonstration:

<UserControl x:Class="TreeViewDragAndDrop.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Top" HorizontalAlignment="Left">
        <liquid:Tree x:Name="tree" EnableDragAndDrop="true" Drop="Tree_Drop" Width="300" Height="151" Margin="4">
            <liquid:Tree.Nodes>
                <liquid:Node ID="0" Title="Root" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
                    <liquid:Node.Nodes>
                        <liquid:Node ID="1" Title="Folder 1" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
                            <liquid:Node.Nodes>
                                <liquid:Node ID="10" Title="File 1.doc" Icon="images/doc.png" />
                                <liquid:Node ID="11" Title="File 2.doc" Icon="images/doc.png" />
                            </liquid:Node.Nodes>
                        </liquid:Node>
                        <liquid:Node ID="2" Title="Folder 2" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
                            <liquid:Node.Nodes>
                                <liquid:Node ID="20" Title="File 3.doc" Icon="images/doc.png" />
                                <liquid:Node ID="21" Title="File 4.doc" Icon="images/doc.png" />
                                <liquid:Node ID="21" Title="File 5.doc" Icon="images/doc.png" />
                            </liquid:Node.Nodes>
                        </liquid:Node>
                    </liquid:Node.Nodes>
                </liquid:Node>
            </liquid:Tree.Nodes>
        </liquid:Tree>
    </Grid>
</UserControl>


In the XAML we define 2 folder nodes which contain several child document nodes. The important attributes in the XAML are EnableDragAndDrop="true" and Drop="Tree_Drop".  The first ensures dragging and dropping is enabled and the second is the name of an event handler we have declared in the C# code behind file which allows you specify where the node is positioned or whether the Drop operation should be cancelled.

using System.Windows.Controls;

using Liquid;

namespace TreeViewDragAndDrop
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void Tree_Drop(object sender, TreeEventArgs e)
        {
            e.DropAction = Tree.DropActions.InsertAfter;
        }
    }
}


In this event handler you can instruct the TreeView to insert the node before or after the node under the cursor.  Or if you like the node can be appended as a child of the node under the cursor, either as the first or last child.  It is also possible to cancel the drop operation by setting e.Cancel = true, this allows for a lot of flexibility in your Silverlight apps.

Rate this page: 

1 Star 2 Star 3 Star 4 Star 5 Star
13 Ratings / 2.8 Average

Ultimate Gamers

  • 1 stig
  • 2 Gh0sT
  • 3 dhoz
  • 4 janso
  • 5 gaaslin
  • 6 RadiateLogic
  • 7 dan
  • 8 Haroldo
  • 9 bigblue531
  • 10 oussama

  • See the full chart here!

Silverlight Controls

  • Rich TextBox

    Create and edit rich content with this slick and expandable Rich TextBox...

  • TreeView

    This easy to use TreeView comes with drag and drop, sorting, searching and much more...

  • Context Menu

    You too can have cool popup context menus in your Silverlight applications...

  • Resizable Dialog

    Draggable and resizable popup dialogs are what serious Silverlight developers need...

  • Spell Checker

    Real-time spell checking in Silverlight? We did it first here...