Labels in WPF Radial Slider (SfRadialSlider)

Labels are the numerical representation of the ticks starting from Minimum to Maximum value. The frequency of the labels also controlled by TickFrequency property.

Text formatting

You can customize the text format for the specific or all tick labels by handling the DrawLabel event and setting the DrawLabelEventArgs.Handled property value as true. You can change the content and foreground of the tick labels by using the DrawLabelEventArgs.Text and DrawLabelEventArgs.Foreground properties. You can also change the font family and font size of the tick labels by using the DrawLabelEventArgs.FontFamily and DrawLabelEventArgs.FontSize properties.

<syncfusion:SfRadialSlider DrawLabel="sfRadialSlider_DrawLabel"  
                           Name="sfRadialSlider">           
    <TextBlock Text="{Binding ElementName=sfRadialSlider, Path=Value}" 
               FontSize="15"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"/>
</syncfusion:SfRadialSlider>
sfRadialSlider.DrawLabel += sfRadialSlider_DrawLabel;

You can handle the event as follows,

private void sfRadialSlider_DrawLabel(object sender, DrawLabelEventArgs e) {            
    e.Handled = true;
    e.Text += "°C";
    if (e.Value <= 33) {
        e.FontSize = 8;
        e.FontFamily = new FontFamily("Arial");
        e.Foreground = Brushes.Green;
    }
    else if (e.Value > 33 && e.Value <= 66) {
        e.FontSize = 10;
        e.FontFamily = new FontFamily("Courier");
        e.Foreground = Brushes.Gold;
    }
    else {
        e.FontSize = 12;
        e.FontFamily = new FontFamily("Georgia");
        e.Foreground = Brushes.Red;
    }
}

Change tick label text formatting

NOTE

View Sample in GitHub

Custom UI for tick label

You can change the UI of the each tick labels available in the SfRadialSlider by using the LabelTemplate property.

NOTE

Tick values is the DataContext for the LabelTemplate.

<syncfusion:SfRadialSlider Name="sfRadialSlider">
    <syncfusion:SfRadialSlider.LabelTemplate>
        <DataTemplate>
            <TextBlock Background="Yellow" 
                       Text="{Binding}"
                       Foreground="Red"/>
        </DataTemplate>
    </syncfusion:SfRadialSlider.LabelTemplate>
    <TextBlock Text="{Binding ElementName=sfRadialSlider, Path=Value}" 
               Background="Yellow" />
</syncfusion:SfRadialSlider>

Custom UI for tick label

NOTE

View Sample in GitHub