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

Getting Started with WPF HeatMap

This tutorial will walk you through the creation of a sample application that contains RadHeatMap with a categorical definition.

Assembly References

In order to use RadHeatMap, 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.

Adding Telerik Assemblies Using NuGet

To use RadHeatMap 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.

Setting up the Data

To use the RadHeatMap control you will need to define a model that will describe the data that will be shown.

Example 1: Defining the model

public class TempInfo 
{ 
    public int Year { get; set; } 
    public string Month { get; set; } 
    public double Temperature { get; set; } 
} 

Setting up the Control

The control works with few different definitions that describe how to data will be shown. In this example we will use the CategoricalDefinition. The definition provides few properties to define what data should be used.

The RowGroupMemberPath property contains the name of the property in the custom model that will be used to generate the rows.

The ColumnGroupMemberPath property contains the name of the property in the custom model that will be used to generate the columns.

The ValuePath property contains the name of the property in the custom model that will be used to generate the cells. Based on that value the cell will be colored differently.

To populate the control with data use its ItemsSource property.

Example 2: Defining the heatmap

<telerik:RadHeatMap> 
    <telerik:RadHeatMap.Definition> 
        <telerik:CategoricalDefinition x:Name="categoricalDefinition" 
                                       RowGroupMemberPath="Year" 
                                       ColumnGroupMemberPath="Month" 
                                       ValuePath="Temperature" /> 
    </telerik:RadHeatMap.Definition> 
</telerik:RadHeatMap> 

Example 3: Creating the data and setting the ItemsSource

private void PrepareData() 
{ 
    int year = 2018; 
    string[] months = new string[6] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" }; 
    var randomNumberGenerator = new Random(); 
 
    var source = new ObservableCollection<TempInfo>(); 
    for (int i = 0; i < months.Length; i++) 
    { 
        for (int k = 0; k < 6; k++) 
        { 
            var info = new TempInfo() { Year = year + k, Month = months[i], Temperature = randomNumberGenerator.Next(10, 300) }; 
            source.Add(info); 
        } 
    } 
 
    this.categoricalDefinition.ItemsSource = source; 
}    

Figure 1: RadHeatMap

WPF RadHeatMap RadHeatMap

Colorization

The heatmap control has a built-in colorizer that sets the color of each cell based on the plotted value. You can change the colors as you like by defining a new colorizer. You can read more about this in the Colorizers article.

Telerik UI for WPF Learning Resources

See Also

In this article