Nach der BASTA! ist vor der BASTA!
LINQ Grouping with C# and Visual Basic

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


Feed You can follow this conversation by subscribing to the comment feed for this post.

Louis Vuitton Leather

Liked you on Facebook, too. =)

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.


Post a comment

Your Information

(Name and email address are required. Email address will not be displayed with the comment.)