Labels

The HeatMap allows you to enable its labels by using the CellLabelSettings property. CellLabelSettings is of type HeatMapCellLabelSettings and sets up the labels for each cell.

The HeatMapCellLabelSettings class exposes the following properties:

• FontFamily—The font family of the control.
• FontWeight—The weight or thickness of the specified font.
• FontSize—The default font size.
• Foreground—A brush that describes the foreground color.
• LabelTemplate—A DataTemplate that is applied to the labels.

For demonstration purposes, the following example uses a simple class that represents a single cell of the HeatMap control and exposes the following properties:

• Row—A string property for the row name of the corresponding cell.
• Column—A string property for the column name of the corresponding cell.
• Value—An integer property for the value of the corresponding cell.

The PlotInfo class

public class PlotInfo 
{ 
    public string Row { get; set; } 
 
    public string Column { get; set; } 
 
    public double Value { get; set; } 
} 

To fill the HeatMap with sample data, create a list of PlotInfo objects and set it as the DataContext of the control.

Populate the HeatMap

var data = new List<PlotInfo>(); 
 
for (int r = 0; r <= 20; r++) 
{ 
    for (int c = 0; c <= 20; c++) 
    { 
        var pi = new PlotInfo 
        { 
            Row = string.Format("Row {0}", r), 
            Column = string.Format("Col {0}", c), 
            Value = r + c 
        }; 
        data.Add(pi); 
    } 
} 
 
this.heatMap.DataContext = data; 

After having the sample data ready, go to the XAML code and define the RadHeatMap and the CellLabelSettings.

The XAML declaration of the HeatMap

<telerik:RadHeatMap x:Name="heatMap" 
                    CellBorderColor="Black" 
                    CellBorderThickness="1"> 
    <telerik:RadHeatMap.Definition> 
            <telerik:CategoricalDefinition RowGroupMemberPath="Row" 
                                           ColumnGroupMemberPath="Column" 
                                           ValuePath="Value" 
                                           ItemsSource="{Binding}" /> 
     </telerik:RadHeatMap.Definition> 
     <telerik:RadHeatMap.CellLabelSettings> 
            <telerik:HeatMapCellLabelSettings Foreground="Yellow" /> 
     </telerik:RadHeatMap.CellLabelSettings>         
 </telerik:RadHeatMap> 

The following image shows the result.