TreeMap control is comming to Silverlight Toolkit

Since this is my first post after over one month break I own an explanation. I have two excuses: one is of course vacations and the other one is really nice. Together with the colleagues of mine, I had the pleasure to work on a new control – TreeMap - that is included in the next release of Silverlight Toolkit.



I perceive the introduction of this control as especially important because it enables you to easily visualize more than one dimensional, correlated data in a way that is attractive and understandable to a user without any statistician or mathematical background.

New concepts in TreeMap control

Actually I’m going to concentrate on one particular feature that we hope to gather feedback for – Interpolators proposed by Cristian – a developer within our team. Their purpose is to visualize additional dimensions by mapping the particular range in your data to visual representation. Let’s analyze a sample that uses the NHL statistics:


        <datavis:TreeMap x:Name="treeMapControl" Grid.Row="1">


                <datavis:SolidColorBrushInterpolator TargetName="itemBorder" TargetProperty="Background"

                                           DataRangeBinding="{Binding Losses}" From="Blue" To="Magenta" />

                <datavis:DoubleInterpolator TargetName="textBlk" TargetProperty="FontSize"

                                           DataRangeBinding="{Binding GoalsFor}" From="8" To="15" />




                <datavis:TreeMapItemDefinition ItemsSource="{Binding Children}" ValueBinding="{Binding Points}" ChildItemPadding="1">


                        <Border x:Name="itemBorder" BorderBrush="Black" BorderThickness="1" ToolTipService.ToolTip="{Binding ToolTip}">

                            <TextBlock x:Name="textBlk"  Foreground="White" Text="{Binding Name}" VerticalAlignment="Center" Margin="2,2,0,0"

                                       TextWrapping="Wrap" TextAlignment="Center"/>







We visualize three dimensions here:

·         The size of the rectangle represents the number of points for each team - ValueBinding="{Binding Points}"

·         The background color of each rectangle color reflects the number of losses - SolidColorBrushInterpolator

·         The font size used for team name represents the number of goals gained - DoubleInterpolator

They may look familiar to you. Yes – they’re mimicking to some degree KeyFrames used in storyboards. It makes this API both easy to use and familiar at the same time.

There are also extra flexibilities in Interpolators.

·         By default the ActualDataMaximum and ActualDataMinimum for your data are automatically calculated and you can be blissfully unaware of their existence, however you can fix their values using DataMaximum and DataMinimum properties. It may come useful if for example you visualize school grades let’s say in range 1 to 100 but two classes in your school got marks raging between 60-90 and 10-50 respectively. Probably you don’t want to use for ex. the same backgroung color for 90 in one class and 50 in the other, therefore you can fix color range to be interpolated bosing on 0 to 100 range.

·         Another feature you can be blissfully unaware but you can leverage is interpolation mode. The implicit behavior is that ActualDataMaximum and ActualDataMinimum are calculated and applied on leaf nodes only. No big deal in the example above. But you can introduce extra margin to non leaf nodes and get something like this:



To extend the interpolation to non leaf nodes you need to set InterpolationMode to AllNodes for a particular interpolator.

What’s coming next?

There are several points we considering to be included in the next release:

·         HSL and other modes for color interpolation

·         Design tools improvements – better Blend support

·         An encapsulating control adding support for zoom and panning

o   Rendering new nodes as you go (zoom and / or pan). On one hand that complicates the code for the control. On the other, this theoretically can enable you to create a TreeMaps with hundreds of thousands of nodes. Imagine for example the world population with levels such us continents, countries, regions, cities, districts.

·         Look into possible APIs to get the list of all selected nodes

·         New interpolators – for ex. border thickness, gradient brush…

·         Investigate ways to further improve rendering performance

·         One more killer feature but this I would like to remain a surprise J

While I have a particular inclination towards some of the point above, the list above is not by all means closed. If you have any particular requirements please give me a shout or start a discussion below. You can expect some more samples from David Anson soon.

Comments (10)

  1. gduncan411 says:

    When released with the Treemap control be usable in a traditional WPF (3.5) app? i.e. Is it using any SL specific namespaces or will taking the source from the toolkit and getting it running in a WPF app be a piece of cake?


  2. Delay says:


    It will run under WPF if you recompile; I did this as part of my testing. I’ll have more details on this soon on my blog after I do my own introductory post:

    Thanks for your patience!

  3. Kevin Dente says:

    Is it time to start considering splitting the Toolkit into multiple assemblies? I consider TreeMap a very low use control, I’m not sure it makes sense to combine it in the main assembly with other, much more commonly used, controls.

  4. Delay says:


    The Silverlight Toolkit already comes in multiple assemblies. 🙂 TreeMap has been added to the System.Windows.Controls.DataVisualization.dll assembly alongside the Charting stuff that was already there. This seems like a pretty good place for it – and means that people who are using Toolkit controls in other assemblies don’t pay any price for the new TreeMap control.

    Hope this helps!

  5. pragati_sd says:


    If I want something like this,

    Losses > 0 &  Losses <= 2  , then Green

    Losses > 2 &  Losses <= 4  , then Red

    Losses > 4 &  Losses <= 6  , then Orange & so on….

    Can I set like this, with this one –


                   <datavis:SolidColorBrushInterpolator TargetName="itemBorder" TargetProperty="Background"

                                              DataRangeBinding="{Binding Losses}" From="Orange" To="Orange" />


    Can I bind the Range from above, with DataRangeBinding="{Binding Weightage}" & how? This will solve my issue, then I can use the same color for From="Orange" To="Orange" & get my results.

    It will be better, if I can manage this in Xaml, as well as in C#.

    Thanks in advance.


  6. marlat says:


    With a bare SolidColorBrushInterpolator you can’t do it as it interpolates using sRGB. However it is extremely simple to write your own interpolator. You can do it yourself – you need just a couple lines of code – check SolidColorBrushInterpolator implementation. I’ll also publish a sample this week on my blog.

  7. bitdisaster says:

    IS it possible to bind the From color and To color  to a view model. I get a bad property exception i f try the following code.

    <datavis:SolidColorBrushInterpolator x:Name="ColorInterpolator" From="{Binding FromColor, Mode=OneWay}" To="Blue"…

    How can I change the interpolation colors at runtime?

  8. Praveen says:


    When I set the DataContext out side the MainPage() , the interpolation is not working. Any guess in this issue?

  9. quang says:

    Can you share the xaml file for the last example when you set InterpolationMode to AllNodes?

    I have a hard time to figure out how to achieve that UI.

    thanks a lot, and great work of sharing to community.

    PS: It also would be nice if we can have different layout algo(s) (ex slice and dice by algoSelector)

  10. quang says:

    found it, a lot of good examples in silverlight toolkit:

Skip to main content