Channels ▼
RSS

.NET

The Silverlight Toolkit


TreeView Control

Nearly every time I've given a talk or taught a workshop on Silverlight 2 I've been asked if a TreeView control was available to use. I've always had to say "no" up until now since Silverlight 2 doesn't ship with a TreeView control out of the box. That's changed with the release of the Silverlight Toolkit since it does contain a TreeView control that can be used to display a hierarchy of data. The TreeView controls looks and acts much like any standard tree view that you've seen although it can be styled and customized just about anyway you'd like in Silverlight. An example of using the TreeView control is shown next:


<controls:TreeView Margin="5">
    <controls:TreeViewItem Header="ACME Corporation Employees">
        <controls:TreeViewItem Header="Mike James">
            <controls:TreeViewItem Header="Fred Stel" />
            <controls:TreeViewItem Header="Heedy Taft" />
            <controls:TreeViewItem Header="Seth Johnson" />
            <controls:TreeViewItem Header="Dan Williams" />
            <controls:TreeViewItem Header="Ted Thompson">
                <controls:TreeViewItem Header="Daine Rivers" />
                <controls:TreeViewItem Header="Gillian Pierson" />
            </controls:TreeViewItem>
        </controls:TreeViewItem>
    </controls:TreeViewItem>
</controls:TreeView>

Here's what the TreeView looks like once rendered in Silverlight:

The sample code included in the Silverlight Toolkit also provides an example of binding a TreeView to an ObjectCollection instance (a new object also available in the toolkit) to display a hierarchy. Here's what the ObjectCollection looks like. The Domain, Kingdom, and other related elements are based on custom classes included in the toolkit samples. They can of course be substituted with your own data classes and built-up dynamically.


< controls:ObjectCollection x:Key="TreeOfLife" xmlns="http://schemas.microsoft.com/client/2007">
    <common:Domain Classification="Bacteria">
        <common:Kingdom Classification="Eubacteria" />
    </common:Domain>
    <common:Domain Classification="Archaea">
        <common:Kingdom Classification="Archaebacteria" />
    </common:Domain>
    <common:Domain Classification="Eukarya">
        <common:Kingdom Classification="Protista" />
        <common:Kingdom Classification="Fungi" />
        <common:Kingdom Classification="Plantae" />
        <common:Kingdom Classification="Animalia">
            <common:Phylum Classification="Arthropoda">
                <common:Class Classification="Insecta">
                    <common:Order Classification="Diptera">
                        <common:Family Classification="Drosophilidae">
                            <common:Genus Classification="Drosophila">
                                <common:Species Classification="D. melanogaster" />
                            </common:Genus>
                        </common:Family>
                    </common:Order>
                </common:Class>
            </common:Phylum>
            <common:Phylum Classification="Chordata">
                <common:Class Classification="Mammalia">
                    <common:Order Classification="Primates">
                        <common:Family Classification="Hominidae">
                            <common:Genus Classification="Homo">
                                <common:Species Classification="H. sapiens" />
                            </common:Genus>
                        </common:Family>
                    </common:Order>
                </common:Class>
            </common:Phylum>
            <common:Phylum Classification="Ctenophora" />
            <common:Phylum Classification="Porifera" />
            <common:Phylum Classification="Placozoa" />
        </common:Kingdom>
    </common:Domain>
</controls:ObjectCollection>

The TreeView can be bound to the TreeOfLife ObjectCollection using the TreeView's temsSource property as shown next:


<controls:TreeView x:Name="tvTreeOfLife" Margin="5" ItemsSource="{StaticResource TreeOfLife}" >
    <controls:TreeView.ItemTemplate>
        <controls:HierarchicalDataTemplate ItemsSource="{Binding Subclasses}">
            <StackPanel>
                <TextBlock Text="{Binding Rank}" FontSize="8" FontStyle="Italic" Foreground="Gray" Margin="0 0 0 -5" />
                <TextBlock Text="{Binding Classification}" />
            </StackPanel>
        </controls:HierarchicalDataTemplate>
    </controls:TreeView.ItemTemplate>
</controls:TreeView>

Notice that the ItemsSource property is bound to the "TreeOfLife" key defined on the ObjectCollection and that each value in the tree view is generated by using a HierarchicalDataTemplate that binds to Rank and Classification properties and displays them using a StackPanel.

Here's what the TreeView looks like once the different life classifications are rendered:


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video