New to Telerik UI for WPF? Download free 30-day trial

Getting Start with WPF RadPivotMap

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

Assembly References

In order to use RadPivotMap, you will need to add references to the following assemblies:

  • 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 flat structure consisting of movies gross sales information.

Defining the models

public class MovieInfo 
    public string Genre { get; set; } 
    public string Title { get; set; } 
    public double GrossSales { get; set; } 

Populating a collection with the data

public ObservableCollection<MovieInfo> GetData() 
    var movies = new ObservableCollection<MovieInfo>() 
        new MovieInfo() { Genre = "Adventure", Title = "Toy Story 3", GrossSales = 415004880 }, 
        new MovieInfo() { Genre = "Adventure", Title = "Iron Man 3", GrossSales = 409013994 }, 
        new MovieInfo() { Genre = "Adventure", Title = "Tangled", GrossSales = 200821936 }, 
        new MovieInfo() { Genre = "Adventure", Title = "The Karate Kid", GrossSales = 176591618 }, 
        new MovieInfo() { Genre = "Action", Title = "Avatar", GrossSales = 760507625 }, 
        new MovieInfo() { Genre = "Action", Title = "Sherlock Holmes", GrossSales = 186848418 }, 
        new MovieInfo() { Genre = "Action", Title = "Red", GrossSales = 130380162 }, 
        new MovieInfo() { Genre = "Comedy", Title = "Despicable Me 3", GrossSales = 264624300 }, 
        new MovieInfo() { Genre = "Comedy", Title = "Easy A", GrossSales = 158401464 }, 
        new MovieInfo() { Genre = "Comedy", Title = "Superbad", GrossSales = 61979680 }, 
        new MovieInfo() { Genre = "Comedy", Title = "Date Night", GrossSales = 121463226 }, 
        new MovieInfo() { Genre = "Horror", Title = "The Ring", GrossSales = 129128133 }, 
        new MovieInfo() { Genre = "Horror", Title = "The Grudge", GrossSales = 110359362 }, 
    return movies; 

Setting up the RadPivotMap

To set up the control you can set few esential properties - ItemsSource, ValuePath and GroupDefinitions. The GroupDefinitions is a collection of GroupDefinition objects which contain information that tells the pivot map how to fetch the groups from the objects in the ItemsSource.

The ValuePath determines the size of the tile.

The Member determines the name of the corresponding group.

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

Defining RadPivotMap

<telerik:RadPivotMap x:Name="radPivotMap"  
            <telerik:GroupDefinition Member="Genre" /> 
            <telerik:GroupDefinition Member="Title" /> 

Setting the ItemsSource in XAML

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

Setting the ItemsSource in code (see Example 2)

this.radPivotMap.ItemsSource = GetData(); 

WPF RadTreeMap with ItemsSource

Avoid inserting RadPivotMap 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.

Telerik UI for WPF Learning Resources

See Also

In this article