FAQ: A Custom Legend with TextFormatting for the FastHeatmapRenderableSeries

This is quite simple to do by creating a custom control. We will be including this control in the next major version of Scichart, but for now, you can declare it yourself as follows:

C# Code

/// <summary>
/// A Legend Control for the <see cref="FastHeatMapRenderableSeries"/>, which gives a visual representation of double-to-color mapping in the heatmap
/// </summary>
public class HeatmapColourMap : Control, INotifyPropertyChanged
{
    private const string DefaultTextFormatting = "n2";

    public static readonly DependencyProperty ColorMapProperty = DependencyProperty.Register(
        "ColorMap", typeof (Brush), typeof (HeatmapColourMap), new PropertyMetadata(default(Brush)));

    public Brush ColorMap
    {
        get { return (Brush) GetValue(ColorMapProperty); }
        set { SetValue(ColorMapProperty, value); }
    }

    public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register(
        "Minimum", typeof (double), typeof (HeatmapColourMap), new PropertyMetadata(default(double), OnFormattedPropertyChanged));

    public double Minimum
    {
        get { return (double) GetValue(MinimumProperty); }
        set { SetValue(MinimumProperty, value); }
    }

    public static readonly DependencyProperty MaximumProperty = DependencyProperty.Register(
        "Maximum", typeof(double), typeof(HeatmapColourMap), new PropertyMetadata(default(double), OnFormattedPropertyChanged));

    public double Maximum
    {
        get { return (double) GetValue(MaximumProperty); }
        set { SetValue(MaximumProperty, value); }
    }

    public static readonly DependencyProperty TextFormattingProperty = DependencyProperty.Register(
        "TextFormatting", typeof(string), typeof(HeatmapColourMap), new PropertyMetadata(default(string), OnFormattedPropertyChanged));      

    public string TextFormatting
    {
        get { return (string) GetValue(TextFormattingProperty); }
        set { SetValue(TextFormattingProperty, value); }
    }

    public static readonly DependencyProperty FormattedMinimumProperty = DependencyProperty.Register(
        "FormattedMinimum", typeof (string), typeof (HeatmapColourMap), new PropertyMetadata(default(string)));

    public string FormattedMinimum
    {
        get { return (string) GetValue(FormattedMinimumProperty); }
        set { SetValue(FormattedMinimumProperty, value); }
    }

    public static readonly DependencyProperty FormattedMaximumProperty = DependencyProperty.Register(
        "FormattedMaximum", typeof (string), typeof (HeatmapColourMap), new PropertyMetadata(default(string)));

    public string FormattedMaximum
    {
        get { return (string) GetValue(FormattedMaximumProperty); }
        set { SetValue(FormattedMaximumProperty, value); }
    }

    public static readonly DependencyProperty FormattedMiddleValueProperty = DependencyProperty.Register(
        "FormattedMiddleValue", typeof (string), typeof (HeatmapColourMap), new PropertyMetadata(default(string)));

    public string FormattedMiddleValue
    {
        get { return (string) GetValue(FormattedMiddleValueProperty); }
        set { SetValue(FormattedMiddleValueProperty, value); }
    }

    /// <summary>
    /// Defines the Orientation DependencyProperty
    /// </summary>
    public static readonly DependencyProperty OrientationProperty = DependencyProperty.Register("Orientation",
        typeof(Orientation),
        typeof(HeatmapColourMap), new PropertyMetadata(Orientation.Horizontal, OnOrientationChanged));

    /// <summary>
    /// Gets or sets <see cref="Orientation"/>
    /// </summary>
    public Orientation Orientation
    {
        get { return (Orientation)GetValue(OrientationProperty); }
        set { SetValue(OrientationProperty, value); }
    }


    /// <summary>
    /// Initializes a new instance of the <see cref="HeatmapColourMap" /> class.
    /// </summary>
    public HeatmapColourMap()
    {
        DefaultStyleKey = typeof(HeatmapColourMap);
    }

    private static void OnMappingSettingsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {

    }
    private static void OnOrientationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
    }

    /// <summary>
    /// Is raised when a property is changed
    /// </summary>
    public event PropertyChangedEventHandler PropertyChanged;

    private static void OnFormattedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var h = d as HeatmapColourMap;
        if (h == null) return;

        string textFormatting = h.TextFormatting ?? DefaultTextFormatting;

        double middleValue = (h.Minimum + h.Maximum)*0.5;
        h.FormattedMinimum = string.Format("{0:" + textFormatting + "}", h.Minimum);
        h.FormattedMaximum = string.Format("{0:" + textFormatting + "}", h.Maximum);
        h.FormattedMiddleValue = string.Format("{0:" + textFormatting + "}", middleValue);
    }
}

XAML

<!--  HeatmapColourMap  -->
<Style TargetType="visuals:HeatmapColourMap">
    <Setter Property="BorderBrush" Value="{markupExtensions:ThemeBinding Path=GridBorderBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Background" Value="{markupExtensions:ThemeBinding Path=LegendBackgroundBrush}" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Foreground" Value="{markupExtensions:ThemeBinding Path=CursorLabelForeground}" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="visuals:HeatmapColourMap">
                <Border x:Name="PART_Border"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                    <Grid>
                        <Grid Visibility="{Binding Orientation, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HorisontalOrientationVisibilityConverter}}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Rectangle Grid.ColumnSpan="3"
                                       Height="15"
                                       Margin="3"
                                       HorizontalAlignment="Stretch"
                                       VerticalAlignment="Center"
                                       Fill="{TemplateBinding ColorMap}" />
                            <TextBlock Grid.Row="1"
                                       Grid.Column="0"
                                       Text="{TemplateBinding FormattedMinimum}" />
                            <TextBlock Grid.Row="1"
                                       Grid.Column="1"
                                       HorizontalAlignment="Center"
                                       Text="{TemplateBinding FormattedMiddleValue}" />
                            <TextBlock Grid.Row="1"
                                       Grid.Column="2"
                                       HorizontalAlignment="Right"
                                       Text="{TemplateBinding FormattedMaximum}" />
                        </Grid>
                        <Grid Visibility="{Binding Orientation, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource VerticalOrientationVisibilityConverter}}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Rectangle Grid.RowSpan="3"
                                       Width="15"
                                       Margin="3"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Stretch"
                                       Fill="{TemplateBinding ColorMap}" 
                                       RenderTransformOrigin="0.5, 0.5">
                                <Rectangle.RenderTransform>
                                    <RotateTransform Angle="180" />
                                </Rectangle.RenderTransform>
                            </Rectangle>
                            <TextBlock Grid.Row="2"
                                       Grid.Column="1"
                                       VerticalAlignment="Bottom"
                                       Text="{TemplateBinding FormattedMinimum}" />
                            <TextBlock Grid.Row="1"
                                       Grid.Column="1"
                                       VerticalAlignment="Center"
                                       Text="{TemplateBinding FormattedMiddleValue}" />
                            <TextBlock Grid.Row="0"
                                       Grid.Column="1"
                                       VerticalAlignment="Top"
                                       Text="{TemplateBinding FormattedMaximum}" />
                        </Grid>
                    </Grid>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage:

    <!-- Declare the modified HeatmapColorMap control --> 
    <!-- Background, Foreground are optional properties to match the heatmap legend to the chart surface -->
    <!-- ColorMap, Minimum, Maximum are bound to the FastHeatmapRenderableSeries -->
    <!-- TextFormatting is used to format the text labels -->
    <myNamespace:HeatmapColourMap Margin="30,30,60,60" 
                        HorizontalAlignment="Left"
                        VerticalAlignment="Stretch"                            
                        Background="{Binding ElementName=sciChartSurface, Path=Background}"
                        Foreground="{Binding ElementName=sciChartSurface, Path=Foreground}"
                        ColorMap="{Binding ElementName=heatmapRenderableSeries, Path=ColorMap}"
                        Minimum="{Binding ElementName=heatmapRenderableSeries, Path=Minimum}"
                        Maximum="{Binding ElementName=heatmapRenderableSeries, Path=Maximum}"
                        TextFormatting="0.00"
                        Opacity="0.8"
                        BorderBrush="#777"
                        BorderThickness="1"
                        Orientation="Vertical" >
    </myNamespace:HeatmapColourMap>

Result:

Best regards,
Andrew