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: