TreeMaps control

The controls can manage recursing child. This can be done by using a HierarchicalDataTemplate. See the Disk analyzer sample for a complete example.


  • ValuePropertyName (string: null)
The name of property from the data ( in the ItemsSource ) that will be use for the area. Obviously, it must be a numeric property.
  • MaxDepth (int : 1) :
Controls the recursing levels by limiting de recursing depth. Depending of the data source, a too big value should make a very slow calculation and display because of the number of UIElement generated.
A 0 Valued MaxDepth means that there is no depth limit.
  • MinArea (double : 64 ) :
Controls the recursing levels by limiting the Area ( in pixel ). A UIElement having a computed area lower than this MinArea, will not be recursed. In effect, It' not interesting to make the control display elements that will be very,very lower.
Indicate the TreeMaps visualization kind ( Standard or Squarified )

How to use it

        ItemTemplate="{StaticResource geographicAreaDataTemplate}"

ValuePropertyName="Sales" indicate that the "Sales" property will be used for the area calculation.
geographicAreaDataTemplate is not the important part, but show you that the elements are fully templatable :

<DataTemplate x:Key="geographicAreaDataTemplate">
      <Border BorderThickness="2" BorderBrush="Blue">
          <Viewbox Stretch="Fill">
              <Image Source="{Binding Path=Image}" Width="128" Height="128" Stretch="Fill"/>
              <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
                <TextBlock  TextWrapping="Wrap" Text="{Binding Path=Name}"/>
                <StackPanel Orientation="Horizontal">
                  <TextBox Text="{Binding Path=Sales}"/>
                  <TextBlock Margin="5,0,0,0">€</TextBlock>

Note that it this sample, the ItemsSource is set in the {C#}, but it could be bound in the Xaml
      List<GeographicArea> items = new List<GeographicArea>();

      items.Add(new GeographicArea("France","../Images/Flags/flag_france.png",1035000));
      items.Add(new GeographicArea("United Kingdom","../Images/Flags/flag_great_britain.png",2564000));
      items.Add(new GeographicArea("Italy","../Images/Flags/flag_italy.png",695603));
      items.Add(new GeographicArea("USA", "../Images/Flags/flag_usa.png", 5564000));
      items.Add(new GeographicArea("Germany", "../Images/Flags/flag_germany.png", 1565000));
      items.Add(new GeographicArea("Japan", "../Images/Flags/flag_japan.png", 2564000));
      items.Add(new GeographicArea("Canada", "../Images/Flags/flag_canada.png", 1664000));

      _tree.ItemsSource = items;

This example uses a very simple class for the data :
public class GeographicArea
    private ImageSource _image;
    private double _sales;
    private string _name;

    public GeographicArea(string name, string imagePath, double sales)
      _name = name;
      _image = new BitmapImage(new Uri(imagePath, UriKind.RelativeOrAbsolute));
      _sales = sales;

    public string Name
      get { return _name; }
      set { _name = value; }
    public double Sales
      get { return _sales; }
      set { _sales = value; }
    public ImageSource Image
      get { return _image; }
      set { _image = value; }

Last edited Nov 10, 2007 at 2:24 PM by woopef, version 7


No comments yet.