This tutorial will introduce the RadTreeMap and RadPivotMap controls, part of the Telerik suite of XAML controls. Both the RadPivotMap and the RadTreeMap are used to display hierarchical data. The key difference is that RadTreeMap can be bound to a collection and the data will be converted into a visual tree, while the RadPivotMap can be bound to flat data and the control automatically groups the data.

To begin, open Visual Studio and click on the Telerik menu option. Under RadControls For Silverlight click on Create New Telerik Project. Name your project, accept Silverlight 5 and in the Project Configuration Wizard dialog check DataVisualization (notice that the dependent references are automatically checked as well), as shown in figure 1.

Figure 1

When you click ok, the necessary assemblies are added to the References as shown in figure 2

Figure 2

Your application will open to MainPage.xaml and, thanks to the Telerik Visual Studio Extensions , the namespace telerik will already have been created in the XAML heading.

Returning to the MainPage.xaml.cs file, the work is done in the Loaded event handler,

In the Loaded event handler, we’ll create a folder, Windows, that will contain two folders, each of which will contain two files. We’ll also add a second folder, MyDocuments (which will hold two files) and a file, pagefile.sys,

When you run this, you get a nice representation of the various country’s GDP but as with Figure 4 it is a bit boring in that there is no color, as is shown in figure 5,

Figure 5

We can fix that in the Mappings definition. We’ll add a gradient brush, and tell it the range of values that the gradient will represent. We’ll also tell it how to distribute the gradient colors using Gradient Stops.

When we run the application again, making no other changes, we get a much more intuitive and powerful feel for the differences among the GDP of the various countries because the color reinforces the sizes, as shown in figure 6,

Figure 6

We can lend even more meaning to the colors by using a RangeBrushColorizer. To do so, remove the mappings and create two new resources. First, create a set of SolidColorBrush resources with keys that correspond to the values we care about,