Latest News

  • Super Tower Defense Game
    Mar 10, 2010

    New to the games section is the new Super Tower Defense game. Defend your base from the ever advancing army of tanks, buggies...

  • New Rich Text Editor User Control
    Feb 19, 2010

    By popular request, here we present a re-usable User Control containing the Liquid RichTextBox along with the most common formatting functions included.

  • Silverlight 3 Controls V5.2.7 Released
    Feb 19, 2010

    This release includes several fixes for issues raised in the forum. The main improvement is to the RichTextBox which now provides access and methods to the document elements allowing...

  • Super Shoot Em Up Game
    Feb 04, 2010

    Added to the games section is the new Super Shoot 'Em Up game. Take control of a tank with your aim being to blow up your opposing tanks and collect all the powerups.

  • Silverlight 3 Controls V5.2.6 Released
    Feb 04, 2010

    This release includes some minor fixes for several forum posts. Please see the notes on the download page for full details on what has changed.

Tree View Control

This free Tree view control developed by vectorlight.net for Microsoft's Silverlight technology is a dynamic and highly customizable control for displaying and navigating tree structures, such as a file system, web site, or any other nested structure both client-side or server-side.

To use the TreeView control you will need to add a reference to Liquid.TreeView.dll in your project.

If you are using Silverlight 4 there is an example demonstrating how to use the TreeView to display a client-side file system treeview.

Login or Register to Download these controlsYou need to login to Download the TreeView XAML Population example, If you do not have a login you can register for free!


How to Use the Tree Control In XAML Only

In your XAML ensure you have a reference to the Liquid.TreeView.dll in the UserControl tag at the top.  To use the tree control on your Silverlight page and have it be populated completely in XAML:

<UserControl x:Class="TreeViewXAML.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquidTreeView="clr-namespace:Liquid;assembly=Liquid.TreeView"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Top" HorizontalAlignment="Left">
        <liquidTreeView:Tree x:Name="officeTree" Canvas.Top="295" Canvas.Left="200" EnableCheckboxes="true" EnableDragAndDrop="false" Width="300" Height="151" Margin="4">
            <liquidTreeView:Node ID="0" Title="Offices" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
                <liquidTreeView:Node ID="1" Title="Cheshire" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
                    <liquidTreeView:Node ID="10" Title="Chester" Icon="images/doc.png" />
                    <liquidTreeView:Node ID="11" Title="Stockport" Icon="images/doc.png" />
                </liquidTreeView:Node>
                <liquidTreeView:Node ID="2" Title="Dorset" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
                    <liquidTreeView:Node ID="20" Title="Bournemouth" Icon="images/doc.png" />
                    <liquidTreeView:Node ID="21" Title="Poole" Icon="images/doc.png" />
                    <liquidTreeView:Node ID="21" Title="Weymouth" Icon="images/doc.png" />
                </liquidTreeView:Node>
                <liquidTreeView:Node ID="3" Title="Devon" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
                    <liquidTreeView:Node ID="30" Title="Plymouth" Icon="images/doc.png" />
                </liquidTreeView:Node>
                <liquidTreeView:Node ID="4" Title="Hampshire" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
                    <liquidTreeView:Node ID="40" Title="Portsmouth" Icon="images/doc.png" />
                    <liquidTreeView:Node ID="41" Title="Southampton" Icon="images/doc.png" />
                </liquidTreeView:Node>
                <liquidTreeView:Node ID="5" Title="Lancashire" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
                    <liquidTreeView:Node ID="50" Title="Blackburn" Icon="images/doc.png" />
                    <liquidTreeView:Node ID="51" Title="Lancaster" Icon="images/doc.png" />
                </liquidTreeView:Node>
            </liquidTreeView:Node>
        </liquidTreeView:Tree>
    </Grid>
</UserControl>


As you can see from above the tree and all it's child nodes are defined in the XAML which is great for simple, non-dynamic trees but what about displaying a structure from a web-service?  That's where populating using C# comes in.

Login or Register to Download these controlsYou need to login to Download the TreeView C# Population example, If you do not have a login you can register for free!


Populating a Tree Using C#

This method of populating a treeview control using C# is used for more advanced structures, such as those whose nodes cannot be determined at design time.

As before, ensure you have a reference to the Liquid.dll in the UserControl tag at the top, in our XAML we only declare the tree object:

<UserControl x:Class="TreeViewProgrammatic.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquidTreeView="clr-namespace:Liquid;assembly=Liquid.TreeView"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Top" HorizontalAlignment="Left">
        <liquidTreeView:Tree x:Name="testTree" Canvas.Top="295" Canvas.Left="200" EnableCheckboxes="true" EnableDragAndDrop="false" Width="200" Height="151" Margin="4" Populate="Tree_Populate" Drop="Tree_Drop" NodeClick="Tree_NodeClick" />
    </Grid>
</UserControl>


In your C# code behind file you can refer to your Tree using testTree.  The Silverlight Tree has several properties for controlling its behaviour, these can be found on the Tree Properties reference page.

using System;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

using Liquid;

namespace TreeViewProgrammatic
{
    public partial class Page : UserControl
    {
        private bool _rootBuilding = true;

        public Page()
        {
            InitializeComponent();

            testTree.BuildRoot();
        }

        void testTree_NodeCheckChanged(object sender, TreeEventArgs e)
        {
        }

        private void Tree_NodeClick(object sender, EventArgs e)
        {
            // TODO: Do something here when a node has been selected
        }

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

        private void Tree_Populate(object sender, TreeEventArgs e)
        {
            ObservableCollection<Node> nodes = (sender is Tree ? ((Tree)sender).Nodes : ((Node)sender).Nodes);

            if (_rootBuilding)
            {
                nodes.Add(new Node("0", "My Documents", true, "images/folder.png", "images/folderOpen.png"));
                _rootBuilding = false;
            }
            else
            {
                switch (e.ID)
                {
                    case "0":
                        nodes.Add(new Node("1", "My Music", true, "images/folder.png", "images/folderOpen.png") { IsEnabled = false });
                        nodes.Add(new Node("2", "My Pictures", true, "images/folder.png", "images/folderOpen.png"));
                        nodes.Add(new Node("3", "My Videos", true, "images/folder.png", "images/folderOpen.png"));
                        nodes.Add(new Node("8", "Connect.xls", false, "images/xls.png"));
                        nodes.Add(new Node("6", "Latest.doc", false, "images/doc.png"));
                        nodes.Add(new Node("7", "Light.doc", false, "images/doc.png"));
                        nodes.Add(new Node("4", "Listing.pdf", false, "images/pdf.png"));
                        nodes.Add(new Node("5", "Update.pdf", false, "images/pdf.png") { IsEnabled = false });
                        break;
                    case "1":
                        nodes.Add(new Node("10", "Downloads", true, "images/folder.png", "images/folderOpen.png"));
                        nodes.Add(new Node("11", "Favourites", true, "images/folder.png", "images/folderOpen.png"));
                        nodes.Add(new Node("12", "Recent", true, "images/folder.png", "images/folderOpen.png"));
                        nodes.Add(new Node("13", "Track 01.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("14", "Track 02.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("15", "Track 03.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("16", "Track 04.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("17", "Track 05.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("18", "Track 06.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("19", "Track 07.mp3", false, "images/mp3.png"));
                        break;
                    case "10":
                        nodes.Add(new Node("16", "Track 04.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("17", "Track 05.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("18", "Track 06.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("19", "Track 07.mp3", false, "images/mp3.png"));
                        break;
                    case "11":
                        nodes.Add(new Node("13", "Track 01.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("14", "Track 02.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("15", "Track 03.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("18", "Track 06.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("19", "Track 07.mp3", false, "images/mp3.png"));
                        break;
                    case "12":
                        nodes.Add(new Node("14", "Track 02.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("15", "Track 03.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("16", "Track 04.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("18", "Track 06.mp3", false, "images/mp3.png"));
                        nodes.Add(new Node("19", "Track 07.mp3", false, "images/mp3.png"));
                        break;
                    case "2":
                        nodes.Add(new Node("13", "Image 1.gif", false, "images/gif.png"));
                        nodes.Add(new Node("14", "Image 2.gif", false, "images/gif.png"));
                        nodes.Add(new Node("15", "Image 3.gif", false, "images/gif.png"));
                        nodes.Add(new Node("16", "Image 4.gif", false, "images/gif.png"));
                        nodes.Add(new Node("17", "Image 5.gif", false, "images/gif.png"));
                        nodes.Add(new Node("18", "Image 6.gif", false, "images/gif.png"));
                        nodes.Add(new Node("19", "Image 7.gif", false, "images/gif.png"));
                        break;
                    case "3":
                        nodes.Add(new Node("13", "Video 01.mp4", false, "images/mp4.png"));
                        nodes.Add(new Node("14", "Video 02.mp4", false, "images/mp4.png"));
                        nodes.Add(new Node("15", "Video 03.mp4", false, "images/mp4.png"));
                        nodes.Add(new Node("16", "Video 04.mp4", false, "images/mp4.png"));
                        nodes.Add(new Node("17", "Video 05.mp4", false, "images/mp4.png"));
                        nodes.Add(new Node("18", "Video 06.mp4", false, "images/mp4.png"));
                        nodes.Add(new Node("19", "Video 07.mp4", false, "images/mp4.png"));
                        break;
                }
            }
        }
    }
}


Please Note: You will need to ensure the image URL's are valid, the controls download zip contains the images you need here.

Example Silverlight Tree View:

Silverlight Tree Control

Latest Forum Posts

Here are latest posts from around the forums, if you have a question about any of the Liquid controls you can get your answers in the Forum.

bilik posted on Set selected node with the program

Hi,


I want to set the selected node in my treeview by the programm. I tried the following:


testTree.SetSelected(testTree.Selected);


So just select the selected Node again to invoke the function private void Tree_NodeClick(object sender, TreeEventArgs e)


But I get the error: Message: Unhandled Error in Silverlight 2 Application Object reference not set to an instance of an object.   at SLApp2.MainPage.Tree_NodeClick(Object sender, TreeEventArgs e)   at Liquid.Tree.RaiseEvent(TreeEventHandler handler, Object sender, TreeEventArgs args)   at Liquid.Tree.set_Selected(Node value)   at Liquid.Tree.SetSelected(Node node)


Anbody an idea how to just invoke the Tree_NodeClick function again for the selected node?


bilik

dan posted on treeview drag and drop

Hi,


Unfortunately not, the TreeView supports only drag and drop, the dragging node cannot be copied.


Thanks!

charly posted on GotFocus

GotFocus is not working...

i am doing the "node selection" event via MouseleftButtonDown, but as you knw there are many ways to have the focus. in a Node, i thing a NodeSelected event should be placed..

Greetings

charly posted on Populate??? Expand??? expanded???

The problems is that when i add a new Node to the existing node all the NodeExpand Event becames null, the workaround can be (and that's the way i am doing it now to set the NodeExpand at the end of the process, so no new nodes will be in the Nodes collection and the eventhandler will not be updated to null...

ericstremblay posted on Error with nodes name.

OK, using T.Clear() instead of T.Nodes.Clear() fixed the issue in my application.  Thank you!!

dan posted on Drag N Drop : duplicate Node

Hi,


Not at this time.  We may add some mechanism for copying only a single node, but as  nodes can contain other nodes, the process or cloning a node is too large at this time.


Thanks!

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...