Controls / RadTreeMap

Layout Strategies

By the end of this help topic you will learn about the Layout Strategies which are responsible for data tiling in the RadTreeMap and RadPivotMap controls. *Treemap *algorithms represent hierarchical data sets via recursive subdivision of the initial rectangle. The area of each rectangle in the treemap is proportional to the size of that particular node.

Layout Strategies are always applied to child nodes.

Currently there are two Layout Strategies to visualize the data:

  • Squarified - creates rectangles with best aspect ratio.

    Silverlight RadTreeMap Squarified Layout Strategy

  • Slice and Dice - creates rectangles with high aspect ratio and displays them sorted either horizontally or vertically.

    Silverlight RadTreeMap Slice and Dice Layout Strategy

The default one is Slice and Dice.

For Slice and Dice algorithm you can specify Orientation (Horizontal, Vertical or Smart) and SortDirection (Ascending or Descending):

<telerik:RadTreeMap> 
   <telerik:RadTreeMap.LayoutStrategy> 
      <telerik:SliceDiceStrategy SortDirection="Ascending" Orientation="Smart"/> 
  </telerik:RadTreeMap.LayoutStrategy> 
<telerik:RadTreeMap>

Setting the Orientation to Smart means that the algorithm will automatically choose the most appropriate orientation depending on your data and the available space.

You can instantiate a layout strategy in XAML by using the layout strategy name:

<telerik:RadTreeMap Background="#57391A" BorderThickness="0" 
LayoutStrategy="Squarified" Padding="1" />

You can also use a TypeConverter that converts strings in *LayoutStrategy *using default settings:

<telerik:RadPivotMap> 
    <telerik:RadPivotMap.LayoutStrategy> 
      <telerik:SquarifiedStrategy/> 
    </telerik:RadPivotMap.LayoutStrategy> 
</telerik:RadPivotMap>

Have in mind that the LayoutStrategy may be different for each TypeDefinition of RadTreeMap or GroupDefinition of RadPivotMap. You can also set a layout strategy for the topmost level. If you set Squarified for example for the topmost level and you don't specify a strategy for its children - all will inherit the top-most level strategy which in this case is Squarified.

<telerik:GroupDefinition Member="Genre" LayoutStrategy="Squarified" /> 
<telerik:RadTreeMap ItemsSource="{Binding Data}" LayoutStrategy="Squarified" />
In this article
Related articles
Not finding the help you need? Improve this article