TreeView in Silverlight

Silverlight TreeView Control

A TreeView control provides a hierarchical view of list items where the top level node is called a parent and the following level nodes are called children. This article demonstrates how to create and use a TreeView control in Silverlight using XAML and C#.

Note: The TreeView control is a part of Silverlight Toolkit. This article is written by using the Silverlight Toolkit November 2008 that you can download from here: Silverlight Toolkit - Release: Silverlight Toolkit November 2008. This control may be a part of Silverlight in near future versions.

Adding Silverlight Toolkit Reference

Before you can use a TreeView control, you must download the Silverlight Toolkit. After that you need to add a reference to the library.

 

To add a reference, right click the References folder of your project in Solution Explorer and select Add Reference. This action will open the Add Reference dialog as you can in the following Figure 1. On this dialog, select Browse option and browse the Microsoft.Windows.Controls.dll assembly from the folder where you installed the Silverlight Toolkit. This assembly resides in the Binaries folder.  

Figure 1

Once you add the reference, you will see the Microsoft.Windows.Controls added to your References dialog as you see in Figure 2.

Figure 2

Now, the next step is to import the Microsoft.Windows.Controls namespace to the page.  Once you type xmlns= in your page, you will see Microsoft.Windows.Controls listing in Intellisense. Select it as shown in Figure 3.

Figure 3

The final reference added to the page looks like following. As you can see here, I added name of this reference to ToolkitRef.

xmlns:ToolkitRef="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"

Now you will see ToolkitRef in your page and once you select it, you will notice TreeView added to the Intellisense. To add the TreeView control to your page, just select it as you can see in Figure 4.

Figure 4

Creating a TreeView

The TreeView element represents a Silverlight TreeView control in XAML.

 

<ToolkitRef:TreeView></ToolkitRef:TreeView>

 

Similar to the other controls, the TreeView supports most of the common properties such as Background, Foreground, fonts and so on. The code snippet in Listing 1 creates a TreeView by setting its width and height properties to 200 and 100 respectively. The code also sets the background color of the TreeView.   

<TreeView

    Width="200"

    Height="100"

    Background="LightSlateGray" />

Listing 1

A TreeView does not look like anything without its children. The TreeViewItem element represents a TreeView child in XAML. The code snippet in Listing 2 adds two items to the TreeView. The Header property of the TreeViewItem sets the text of a TreeView item. The code also sets the background, foreground, and font related properties of these items.

 

<ToolkitRef:TreeView Background="LightSlateGray">

    <ToolkitRef:TreeViewItem

        Header="Grand Pa"

        Background="Blue"

        Foreground="White"

        FontSize="16"

        FontWeight="Bold">               

    </ToolkitRef:TreeViewItem>

   

    <ToolkitRef:TreeViewItem

        Header="Grand Ma"

        Background="Green"

        Foreground="White"

        FontSize="16"

        FontWeight="Bold"

        >

 

    </ToolkitRef:TreeViewItem>

</ToolkitRef:TreeView>

Listing 2

The new output looks like Figure 5 with two root children of the TreeView.

Figure 5

Now we are going to add some children and grand children to the TreeView and set their properties. The code listed in Listing 3 adds some children and grand children to the TreeView.

<ToolkitRef:TreeView Background="LightSlateGray" x:Name="TreeView1" >

    <ToolkitRef:TreeViewItem

        Header="Grand Pa"

        Background="Blue"

        Foreground="White"

        FontSize="16"

        FontWeight="Bold">  

        <ToolkitRef:TreeViewItem

            Header="Daddy"

            FontSize="14" >

            <ToolkitRef:TreeViewItem

                Header="Son 1"

                FontSize="12" FontWeight="Normal" />

            <ToolkitRef:TreeViewItem

                Header="Son 2"

                FontSize="12" FontWeight="Normal" />

            <ToolkitRef:TreeViewItem

                Header="Son 3"

                FontSize="12" FontWeight="Normal" />

        </ToolkitRef:TreeViewItem>

    </ToolkitRef:TreeViewItem>

   

    <ToolkitRef:TreeViewItem

        Header="Grand Ma"

        Background="Green"

        Foreground="White"

        FontSize="16"

        FontWeight="Bold"

        >

        <ToolkitRef:TreeViewItem

            Header="Mommy"

            FontSize="14">

            <ToolkitRef:TreeViewItem

                Header="Doughter 1"

                FontSize="12" FontWeight="Normal" />                

        </ToolkitRef:TreeViewItem>

    </ToolkitRef:TreeViewItem>

</ToolkitRef:TreeView>

Listing 2

The new output looks like Figure 6 with three grand children of the TreeView.

Figure 6

Creating a TreeView Dynamically

Similar to any other controls, we can create a TreeView control dynamically using the code and add its items in code behind. The following code snippet adds two items to the TreeView using code.

TreeView1.Items.Add("Grand Pa");

TreeView1.Items.Add("Grand Ma");    

 

Formatting a TreeView

We can use the Background property of the TreeView to draw a TreeView with any kind of brush including a solid brush, linear gradient brush, radial gradient brush, or an image brush. The code in Listing 3 sets the background of a TreeView to a linear gradient brush.

<ToolkitRef:TreeView.Background>              

    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

        <GradientStop Color="Blue" Offset="0.1" />

        <GradientStop Color="Orange" Offset="0.25" />

        <GradientStop Color="Green" Offset="0.75" />

        <GradientStop Color="Red" Offset="1.0" />

    </LinearGradientBrush>

</ToolkitRef:TreeView.Background>

Listing 3

The new TreeView looks like Figure 7.

Figure 7

Setting Image as Background of a TreeView

To set an image as background of a TreeView, we can set an image brush as the background of the TreeView. The code in Listing 4 sets fills the TreeView with an image.   

<ToolkitRef:TreeView.Background>              

    <ImageBrush ImageSource="dock.jpg" />>

</ToolkitRef:TreeView.Background>

Listing 4

The new output looks like Figure 8.

Figure 8

Drawing a Semi-transparent TreeView

The Opacity property represents the transparency of a TreeView. The value of Opacity is between 0 and 1, where 0 is fully transparent and 1 is fully opaque. The code listed in Listing 5 generates a semi-transparent TreeView.

<ImageBrush ImageSource="dock.jpg" Opacity="0.5" />

Listing 5

The new output looks like Figure 9.

Figure 9

 

Summary

In this article, I discussed how we can create a TreeView control in Silverlight at design-time using XAML and at run-time using C#.  We also saw how we can format a TreeView by setting its fill property. After that, we saw you to set an image as the background of a TreeView. In the end, we saw how to draw a semi-transparent TreeView.