As Silverlight 3 has just released, a new version of the Silverlight Toolkit is now available.  Microsoft’s Global Product Development - Europe team is delighted to have contributed the Silverlight Treemap to this release.  The Treemap allows hierarchical data to be visualised as a set of nested rectangles, where the size of each rectangle is related to a selected value within the node.  The Treemap also allows other visual properties, such as background colour, opacity and font size to be related to values within the node.  The image below shows a Treemap containing 3 sub-trees; one red, one green and one blue. This example, which is part of the Silverlight Toolkit samples (SL2, SL3), allows us to explore the capabilities of the Treemap.

Segmented Silverlight Treemap

 

The rectangles representing the data are defined using a TreeMapItemDefinition (see the XAML below).  In this example, the item definition contains a TextBlock inside a Border.  The item definition specifies which of the node’s values determines the size of the rectangle (via ValueBinding) and which property contains the child nodes (via ItemsSource).

 

           <datavis:TreeMapItemDefinition ItemsSource="{Binding Children}"

                                                                       ValueBinding="{Binding Value}">

                  <DataTemplate>

                                   <Border  ...  ToolTipService.ToolTip="{Binding ToolTip}">

                                  <TextBlock Text="{Binding Name}" ...  />

                             </Border>

                   </DataTemplate>

          </datavis:TreeMapItemDefinition>

 

The Treemap contains a list of Interpolators, which can control the background colour (using a SolidColorBrushInterpolator) or properties such as font size (using a DoubleInterpolator).  The interpolator’s TargetName and TargetProperty specify which control and what property is modified by the interpolator and the DataRangeBinding specifies which of the node’s values is used to determine the interpolation point.

 

          <datavis:TreeMap.Interpolators>

                   <datavis:SolidColorBrushInterpolator TargetName="Segment1Border"

                                                                                         TargetProperty="Background"

                                                                                         DataRangeBinding="{Binding Value2}"

                                                                                         From="White" To="DarkRed" />

                   ...

          </datavis:TreeMap.Interpolators>

 

So how do we get different colours on the different sub-trees?  Well, we use a number of different item definitions, each with its own interpolator.  An ItemDefinitionSelector is used to select the item definition (and associated interpolator) to be used for each node.  A custom item definition selector, implemented in SegmentItemDefinitionSelector.cs, selects the red, the green or the blue item definition depending on the node’s sub-tree number (which I have called its “segment”).  Note how the border in each item definition has a unique name and each interpolator’s TargetName corresponds to one of the item definitions.

           <datavis:TreeMap ... >

                   <datavis:TreeMap.Interpolators>

                             ...

                             <datavis:SolidColorBrushInterpolator

                                                                 TargetName="Segment1Border"

                                                                 TargetProperty="Background" 

                                                                 DataRangeBinding="{Binding Value2}"

                                                                 From="White" To="DarkRed" />

                             <datavis:SolidColorBrushInterpolator

                                                                 TargetName="Segment2Border"

                                                                 TargetProperty="Background" 

                                                                 DataRangeBinding="{Binding Value2}"

                                                                 From="White" To="DarkGreen" />

                             ...

                   </datavis:TreeMap.Interpolators>

                   <datavis:TreeMap.ItemDefinitionSelector>

                             <local:SegmentItemDefinitionSelector>

                                      ...

                                      <datavis:TreeMapItemDefinition ItemsSource="{Binding Children}"

                                                                                                  ValueBinding="{Binding Value}">

                                                <DataTemplate>

                                                         <Border x:Name="Segment1Border" ... >

                                                                         <TextBlock Text="{Binding Name}" ... />

                                                         </Border>

                                                </DataTemplate>

                                      </datavis:TreeMapItemDefinition>

                                      <datavis:TreeMapItemDefinition ItemsSource="{Binding Children}"

                                                                                                  ValueBinding="{Binding Value}">

                                                <DataTemplate>

                                                         <Border x:Name="Segment2Border" ... >

                                                                        <TextBlock Text="{Binding Name}" ... />

                                                         </Border>

                                                </DataTemplate>

                                      </datavis:TreeMapItemDefinition>

                                      ...

                             </local:SegmentItemDefinitionSelector>

                   </datavis:TreeMap.ItemDefinitionSelector>

          </datavis:TreeMap>

 

Our team is very excited to have had the opportunity to finally release our Treemap.  Hopefully this blog has given enough of an intro to encourage you to download the toolkit and give it a try.  Please let us know what you think.  A special thank you to David Anson and the Silverlight Toolkit team for their help in making this release a reality.

Gareth Bradshaw is a Program Manager on Microsoft’s Global Product Development – Europe team in Dublin, Ireland. He holds a BA(Mod.) in computer science and a PhD in computer graphics from Trinity College Dublin.