Previous month:
August 2010
Next month:
October 2010

September 2010

Silverlight TreeMap

One of the Silverlight charting controls is the TreeMap. TreeMap is defined in the namespace System.Windows.Controls.DataVisualization in the assembly System.Windows.Controls.DataVisualization.Toolkit.

This is an interesting control to size its children based on a value. I’ve used this to size Formula 1 teams based on the current points they have in the championship as can be shown in the following figure. With the current standings in the Formula 1 championship, Red Bull leads with 383 points. McLaren has 359 points, Ferrari 319, and Mercedes 168.


The TreeMap control is bound to a list of Team objects. The Team class defines the properties Name, Points, and Color. The ValuePath property of the TreeMapItemDefinition links to the Points property. The value of this property is used to calculate the areas of the items in the TreeMap.

How the data is displayed is defined by a DataTemplate. The DataTemplate used here just displays the Name property of the Team object to display it with a TextBlock. The background color of the Border element is taken from the Color property from the team.

<toolkit:TreeMap ItemsSource="{Binding}"> <toolkit:TreeMap.ItemDefinition> <toolkit:TreeMapItemDefinition ValuePath="Points"> <DataTemplate> <Border BorderBrush="Black" Background="{Binding Color}" BorderThickness="2"> <StackPanel VerticalAlignment="Center"> <TextBlock Text="{Binding Name}" TextAlignment="Center" /> </StackPanel> </Border> </DataTemplate> </toolkit:TreeMapItemDefinition> </toolkit:TreeMap.ItemDefinition> </toolkit:TreeMap>

With this simple TreeMap configuration the Window can be resized, and the size of the items is always calculated depending of the points of each team.





CN innovation