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.

image

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.

image

image

 

Christian

CN innovation

Comments

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

Louis Vuitton Leather

Liked you on Facebook, too. =)

The comments to this entry are closed.