Getting Start with 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.

Example 1: Defining the models

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

Example 2: 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.

Example 3: Defining RadPivotMap

<telerik:RadPivotMap x:Name="radPivotMap"  
                     ValuePath="GrossSales" 
                     LabelPath="GrossSales"  
                     LabelFormat="{}{0:C0}">             
        <telerik:RadPivotMap.GroupDefinitions> 
            <telerik:GroupDefinition Member="Genre" /> 
            <telerik:GroupDefinition Member="Title" /> 
        </telerik:RadPivotMap.GroupDefinitions>             
    </telerik:RadPivotMap> 

Example 4: Setting the ItemsSource in XAML

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

Example 4: Setting the ItemsSource in code (see Example 2)

this.radPivotMap.ItemsSource = GetData(); 

Figure 1: RadPivotMap

See Also

In this article
Not finding the help you need? Improve this article