Getting Started with WPF RadTreeMap

This tutorial will walk you through the creation of a sample application that contains RadTreeMap control.

Adding Telerik Assemblies Using NuGet

To use RadTreeMap when working with NuGet packages, install the Telerik.Windows.Controls.DataVisualization.for.Wpf.Xaml package. The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package article.

With the 2025 Q1 release, the Telerik UI for WPF has a new licensing mechanism. You can learn more about it here.

Adding Assembly References Manually

If you are not using NuGet packages, you can add a reference to the following assemblies:

• Telerik.Licensing.Runtime
• Telerik.Windows.Controls
• Telerik.Windows.Controls.DataVisualization
• Telerik.Windows.Data

You can find the required assemblies for each control from the suite in the Controls Dependencies help article.

Setting up the Data Source

To populate the control with tiles you will need to provide a collection of items that will be assigned to its ItemsSource property.

For this example we will use a simple hierarchical structure consisting of teams, managers and employees.

Defining the models

• C#

public class Team 
{ 
    public string Name { get; set; } 
    public ObservableCollection<Manager> Managers { get; set; } 
    public int ManagersCount 
    { 
        get { return this.Managers.Count; } 
    } 
} 
 
public class Manager 
{ 
    public string Name { get; set; } 
    public ObservableCollection<Employee> Employees { get; set; } 
    public int EmployeesCount 
    { 
        get { return this.Employees.Count; } 
    } 
} 
 
public class Employee 
{ 
    public string Name { get; set; } 
    public double Salary { get; set; } 
} 

Populating a collection with the data

• C#

public ObservableCollection<Team> GetData() 
{ 
    Random r = new Random();             
    var teams = new ObservableCollection<Team>();             
    for (int i = 0; i < 3; i++) 
    { 
        var team = new Team() { Name = "Team " + i, Managers = new ObservableCollection<Manager>() };                
        for (int k = 0; k < 2; k++) 
        { 
            var manager = new Manager() { Name = "Manager " + k, Employees = new ObservableCollection<Employee>() }; 
            int employeesCount = r.Next(3, 6); 
            for (int y = 0; y < 3; y++) 
            { 
                manager.Employees.Add(new Employee() { Name = "Employee " + y, Salary = r.Next(3000, 10000) }); 
            }                     
            team.Managers.Add(manager); 
        } 
        teams.Add(team); 
    } 
 
    return team; 
} 

Setting up the RadTreeMap

To set up the control you can set two essential properties - ItemsSource and TypeDefinitions. The TypeDefinitions is a collection of TypeDefinition objects which contain information that tells the tree map how to fetch the data from the objects in the ItemsSource.

The ValuePath determines the size of the tile.

The LabelPath determines the label that will be displayed over the tile.

The TargetTypeName contains the class name of the corresponding object in the ItemsSource.

The ChildrenPath is the path to the property that holds the children's collection.

Defining RadTreeMap

• XAML

<telerik:RadTreeMap x:Name="radTreeMap"> 
    <telerik:RadTreeMap.TypeDefinitions> 
        <telerik:TypeDefinition TargetTypeName="Team" ValuePath="ManagersCount" ChildrenPath="Managers" LabelPath="Name" /> 
        <telerik:TypeDefinition TargetTypeName="Manager" ValuePath="EmployeesCount" ChildrenPath="Employees" LabelPath="Name" /> 
        <telerik:TypeDefinition TargetTypeName="Employee" ValuePath="Salary" LabelPath="Name"> 
            <telerik:TypeDefinition.Mappings> 
                <telerik:ValueGradientColorizer RangeMinimum="3000" RangeMaximum="10000"> 
                    <GradientStop Offset="0" Color="Red" /> 
                    <GradientStop Offset="0.50" Color="Yellow" /> 
                    <GradientStop Offset="1" Color="Green" /> 
                </telerik:ValueGradientColorizer> 
            </telerik:TypeDefinition.Mappings> 
        </telerik:TypeDefinition>                
    </telerik:RadTreeMap.TypeDefinitions> 
</telerik:RadTreeMap> 

Setting the ItemsSource in XAML

• XAML

<telerik:RadTreeMap ItemsSource="{Binding MyDataSourceProperty}" /> 

Setting the ItemsSource in code (see Example 2)

• XAML

this.radTreeMap.ItemsSource = GetData(); 

RadTreeMap

Avoid inserting RadTreeMap in panels that measure its children with Infinity. In this case, the control cannot properly measure and arrange its child visuals. Examples for panels that measure the control with Infinity size are StackPanel, ScrollViewer or a Grid's Row/ColumnDefinition with its size (Width or Height) set to Auto. Instead, use panels that measure its children with the available space.