Silverlight

Vectorlight News

Chat App Converted to HTML and JQuery
Sep 08, 2011
Converted from Silverlight to HTML and Javascript/JQuery is the Vectorlight Chat App. Login using your Vectorlight password to chat using your username and avatar.
HTML5 iPhone,Android Big Guns Tower Defense
Jul 02, 2011
Big Guns has made the leap from Windows Phone 7 (XNA) to HTML5 so you can now play it on your iPhone, Android and other HTML5 compatible devices.
HTML5 Games - Word Poppers and Batty
Jun 04, 2011
As the take-up of HTML5 quickens (74% of users currently have a browser capable of HTML5 Canvas) we present two more games for both your browser and mobile.
Big Guns Tower Defense on Windows Phone 7
May 06, 2011
Coming soon to Windows Phone 7 is an XNA port of the popular Vectorlight tower defense game Super Tower Defense. Whilst retaining many of the graphical and gameplay features of the original Silverlight game.
Wakacube WP7 Update
Apr 26, 2011
Released to the Windows Phone 7 marketplace today is Version 1.1 of Wakacube the 3D physics game of skill. Included in the update are more levels (30 in total) and new mode Wakatime which generates random crate structures to keep players entertained long after the levels have been completed.
Home Page News

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 controls You 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">

<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: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 controls You 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">

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

brandtbridges posted on TreeView.EnableCheckboxes not working

I haven't seen anything about it in these forums, but in my experience, when you build a TreeView dynamically in the code behind, it doesn't matter whether you set EnableCheckboxes to true or false, it ALWAYS shows the checkbox. Any ideas on why that would be or any possible workaround?

vinaycs123 posted on Treeview Resources

Hi All,

I am using Liquid TreeView control to create menus with Checkboxes.However, I would like to have the Style resources of it so that i can customize the look and feel of the control.Can someone please provide me with the appropriate information.

Thanks & Regards.

tjoubert posted on Databinding with the Liquid.TreeView control

I have data in the following structure:

- Object1 contains a collection of Object2 objects

- Object2 contains a collection of Object3 objects

- Object4 contains a collection of Object4 objects

I want to show this in a TreeView. In the normal SL TreeView control, I use HierarchicalDataTemplate to implement binding - basically defining a datatemplate for each level in the tree (Object1, Object2, Object3 and Object4). How do I do databinding with your Liquid.TreeView control?

Thanks

Terence

jackd posted on Expandout + focus not working when visibility changed

Doesn't anyone have a clue on this issue ?? Any ideas appriciated

davushik posted on FieldSet bug after disabling/enabling the control.

Oh fine. Its strange what nobody knows about this bug!

DurgaSri H posted on click on iconcontent property similar to nodeclick even

Hi,

i tried placing an image, following a string content and finally another image.

referring to dan's reply to one of the query in this forum, i opted the iconcontent property to get the view of all 3 controls mentioned above.

on the same hand i have another requirement like on single click of the iconcontent i should display a message.

Single click is available for Title property. But in the scenario i am avoiding the Title property i.e i give empty value to the Title.

and on double click of the iconcontent, edit mode should appear with the textbloack value. (i achieved this because NodeIconDoubleClick is working for the cioncontent property).

is there any way to get the single click on iconcontent property work??

or can i have another image control next to the Title property in the Liquid.Node.

Thanks in advance.

Rate this:

1 Star 2 Star 3 Star 4 Star 5 Star

26 Ratings / 3.9 Average

"30th anniversary ZX Spectrum - Nice one http://t.co/Xs8cu5Ji"
11:33 04 Sun via web
Follow us on Twitter

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

Silverlight

Vectorlight News

Tree View Control

How to Use the Tree Control In XAML Only

Populating a Tree Using C#

Latest Forum Posts

Silverlight Games

Silverlight Controls