Latest News

  • Super Tower Defense 2 Game
    Sep 03, 2010

    New to the games section is Super Tower Defense 2. Featuring more maps, new units and bigger explosions.

  • Super Cards Online Multiplayer Game
    Aug 13, 2010

    Released today in the games section is the new Super Cards multiplayer card game. The aim of the game is to get rid of all your playing cards before your opposition.

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

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.


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.


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.

Hi,


Firstly, great component, thanks. Exactly what I was looking for.


Except... ;o)


I have a multi-level treeview using checkboxes. When the user clicks a check box I want to ensure all parent node check boxes and all child node check boxes are set. IE. If a node is the first at that group level to be checked, ensure all parents are checked, and all children are checked.


Clearly I don't want the NodeCheckChanged event to fire while I'm manually setting state. Bad things happen. Consequently I remove the NodeCheckChanged event handler and reassign it once processing is complete. However, even though I unassign this event using "TreeView.NodeCheckChanged -= TreeView_NodeCheckChanged", the event still fires! I can only assume the TreeView code uses it internally to do something or other.


Is it possible to remove this dependency? It's possble to workaround it using global variables to indicate who fired the event but that's a pretty grubby solution.


Cheers,

I recently downloaded the Silverlight Tree Demo and the Silverlight 4 Version 5.3.2 binaries and then converted the project to run locally in VS2010, Win7 64-bit. However, the downloaded tree demo is not as stable as the online Tree Demo that is on the vectorlight.net site.  For example, in the downloaded version, when the Tree_NodeClick event fires, the Target property of TreeEventArgs is null causing an Object Reference Not Set exception. Additionally, the ‘Selected node’ text in textblock does not synch with the selected node in the tree view. Consequently, I’m wondering if there is a more current version of the tree demo and binaries.

And thanks for making available these controls and source code – much appreciated.

kakadu posted on Text effects for nodes

I'm using bold text, italic text, colored text, icons with nodes but I need more effects.  (The node represents a very large abstract object in my code and I'm looking for ways to illustrate many properties of my abstract object via Liquid.Node).


Can I add to my application some of this: strikeout(strikethogh) text, double colored titles of nodes, more the 1 icon for node, maybe some animation?

Maybe I can do all I need using Styles in xaml?


Thank you

Nathan posted on Edit on F2

Just upgraded from an older version and I can no longer select a node and press F2 to put it in edit mode. Is there a recomended workaround to get that functionality back?


Thanks,

glearn posted on LiquidTreeView Font Size

Hi !

i did the size change in runtime - while adding the items

working fine !

tnx

Hi,


The problem here is that when the node expand method is called the size of the child node collection is unknown until the layout of thie children has completed.  Have you tried to update the scroll position using the NodeExpanded event?


Thanks!

Rate this page: 

1 Star 2 Star 3 Star 4 Star 5 Star
20 Ratings / 3.6 Average

Ultimate Gamers

  • 1 Gh0sT
  • 2 stig
  • 3 dhoz
  • 4 seyhmusss
  • 5 RadiateLogic
  • 6 bigblue531
  • 7 janso
  • 8 DutchRemco
  • 9 Gendibal
  • 10 dan

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