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.

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.

inexcon posted on Icon not found raise an error from the broswer

Hi! If you have TreeView and a node that have the Icon set to an image that does not exist, Internet Explorer is raising an error like:


Line: 453

Erreur : Sys.InvalidOperationException: ImageError error #4001 in control 'SilverlightControl': AG_E_NETWORK_ERROR


Is there a way to trap this error before it got raised by Internet Explorer?

panibond2002 posted on problem with NodeCheckChanged

Hi Dan,


I am using 5.2.5.0 version. I will try with 5.2.7 version before i come back to you if any error occurs. and once again i will verify my code.


Thanks!

dan posted on populating treeview

Hi,


The main demo (which you can download) demonstrates how to populate the treeview.  You must be logged in to be able to download this.  The PopulateChildren() method in the demo populates the tree based on the XML results passed in.


Thanks!

eng_s posted on FileUploadServer in vb instead c#

Dear All,


I want to convert the FileUploadServer project to vb.net instead of C#, as well as integrating it in my project

as i want the file uploader to be displayed in a border on user click on a button

i already made the conversion to vb.net but i have error

so if any one can help me i'd apprciate it

Regards

Sahar

dan posted on FieldSet Programatically Can't Add StackPanal as Child

Hi Lyrical,


Thanks for your comments!  To add content to the Fieldset assign your StackPanel to the Content property:


myFieldset.Content = myStackPanel;


Thats all you need.


Thanks!

dan posted on How to bind Nodes dynamically to a Treeview?

Hi,


The main reason is time.  I maintain this library myself and do not have the time required to implement this.  The source code is available so if anyone would like to implement data binding.  As an alternative to your problem you could use the standard Silverlight TreeView if you want databinding support.


Thanks!

Rate this page: 

1 Star 2 Star 3 Star 4 Star 5 Star
17 Ratings / 3.3 Average

Ultimate Gamers

  • 1 stig
  • 2 Gh0sT
  • 3 dhoz
  • 4 janso
  • 5 RadiateLogic
  • 6 dan
  • 7 bigblue531
  • 8 k4si
  • 9 gaaslin
  • 10 Haroldo
  • 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...