Getting Started with WPF Radial Slider (SfRadialSlider)

18 Oct 202214 minutes to read

This section explains how to create a WPF SfRadialSlider and explains about its structure.

Structure of SfRadialSlider

Structure of WPF SfRadialSlider

Assembly deployment

Refer to the Control Dependencies section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application.

Refer to this documentation to find more details about installing nuget packages in a WPF application.

Adding WPF SfRadialSlider via designer

  1. The SfRadialSlider can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically:

    • Syncfusion.SfRadialMenu.WPF
    • Syncfusion.SfShared.WPF

wpf SfRadialSlider control added by designer

  1. Set the properties for SfRadialSlider in design mode using the SmartTag feature.

Adding WPF SfRadialSlider via XAML

To add the SfRadialSlider manually in XAML, follow these steps:

  1. Create a new WPF project in Visual Studio.

  2. Add the following required assembly references to the project:

    • Syncfusion.SfRadialMenu.WPF
    • Syncfusion.SfShared.WPF

  3. Import Syncfusion WPF schema http://schemas.syncfusion.com/wpf, and declare the SfRadialSlider in XAML page.

    <Window x:Class="SfRadialSlider_sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SfRadialSlider_sample"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
   
    <Grid>
        <syncfusion:SfRadialSlider Name="radialSlider"
                                   Height="200"
                                   Width="200"/>
    </Grid>
</Window>

Adding WPF SfRadialSlider via C#

To add the SfRadialSlider manually in C#, follow these steps:

  1. Create a new WPF application via Visual Studio.

  2. Add the following required assembly references to the project:

    • Syncfusion.Shared.WPF

  3. Include the required namespace.

    using Syncfusion.Windows.Shared;

  4. Create an instance of SfRadialSlider, and add it to the window.

    // Creating an instance of the SfRadialSlider
SfRadialSlider radialSlider = new SfRadialSlider();
   
// Setting height and width to SfRadialSlider
radialSlider.Height = 200;
radialSlider.Width = 200;

wpf SfRadialSlider control added by code-behind

NOTE

View Sample in GitHub

Select tick value

You can select any tick value by dragging the pointer along the circular track or clicking on the corresponding track value. You can get the selected value by using the Value property. The default value of Value property is 0.

Selecting a value by clicking and draging

Select tick value programmatically

You can select a tick value programmatically by assigning the tick value to the Value property.

<syncfusion:SfRadialSlider Value="34"
                           Name="radialSlider" />
radialSlider.Value = 34;

SfRadialSlider selecting a value programmatically

NOTE

View Sample in GitHub

Display selected value

You can display the selected value in the content area of the SfRadialSlider by setting the selected value to the Content property. The default value of Content property is null.

public class ViewModel
{
    private double selectedValue;

    public double SelectedValue {
        get {
            return selectedValue;
        }
        set {
            selectedValue= value;
        }
    }
}
<syncfusion:SfRadialSlider Content="{Binding SelectedValue,Mode=TwoWay}"
                           Value="{Binding SelectedValue,Mode=TwoWay}" 
                           Name="radialSlider">
    <syncfusion:SfRadialSlider.DataContext>
        <local:ViewModel/>
    </syncfusion:SfRadialSlider.DataContext>
</syncfusion:SfRadialSlider>

SfRadialSlider displays the selected value

NOTE

View Sample in GitHub

Change min-max tick value

You can change the minimum and maximum ticks value of the SfRadialSlider by using the Minimum and Maximum properties. The default value of Minimum property is 0 and Maximum property is 100.

<syncfusion:SfRadialSlider Minimum="100"
                           Maximum="200"
                           Name="radialSlider" />
radialSlider.Minimum = 100;
radialSlider.Maximum = 200;

SfRadialSlider with changed minimum and maximum values

NOTE

View Sample in GitHub

Change start and end position

You can change starting and ending position for generating the ticks in the circular track by using the StartAngle and EndAngle properties. The default value of EndAngle property is 0 and StartAngle property is 360.

<syncfusion:SfRadialSlider StartAngle="90"
                           EndAngle="330"
                           Name="radialSlider" />
radialSlider.StartAngle = 90;
radialSlider.EndAngle = 300;

SfRadialSlider ticks start and end position changed

NOTE

View Sample in GitHub

Change tick display interval

You can change the tick display interval from the Minimum to Maximum values by using the TickFrequency property. Based on TickFrequency’s multiples, the display interval is set from Minimum to Maximum value.

<syncfusion:SfRadialSlider TickFrequency="20"
                           Name="radialSlider" />
radialSlider.TickFrequency = 20;

SfRadialSlider ticks display interval changed to 20

NOTE

View Sample in GitHub

Step interval

If you want to control the smallest possible range of value to be selected in SfRadialSlider, use the SmallChange property. The default value of SmallChange property is 0.1. For example, if SmallChange is set to 5, then it is only possible to select values that are multiples of 5.

<syncfusion:SfRadialSlider SmallChange="5"
                           Name="radialSlider" />
radialSlider.SmallChange = 5;

SfRadialSlider value selection interval changed

NOTE

View Sample in GitHub

Change inner and outer rim radius

You can change inner and outer rim radius of the SfRadialSlider by using the InnerRimRadiusFactor and OuterRimRadiusFactor properties. The default value of InnerRimRadiusFactor property is 0.2 and OuterRimRadiusFactor property is 0.7.

<syncfusion:SfRadialSlider InnerRimRadiusFactor="0.5" 
                           OuterRimRadiusFactor="0.8"
                           Name="radialSlider" />
radialSlider.InnerRimRadiusFactor = 0.5;
radialSlider.OuterRimRadiusFactor = 0.8;

SfRadialSlider inner and outer rim radius changed

NOTE

View Sample in GitHub

Change tick direction

You can change the ticks direction either clockwise or counter-clockwise direction by using the SweepDirection property. The default value of SweepDirection property is Clockwise.

<syncfusion:SfRadialSlider SweepDirection="Counterclockwise" 
                           StartAngle="180" 
                           EndAngle="360" 
                           Name="radialSlider" />
radialSlider.SweepDirection = SweepDirection.Counterclockwise;

SfRadialSlider ticks displayed in counter-clockwise

NOTE

View Sample in GitHub

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

Value changed notification

The selected value changed in SfRadialSlider can be examined using ValueChanged event. The ValueChanged event contains the old and newly selected tick value in the OldValue and NewValue properties.

<syncfusion:SfRadialSlider ValueChanged="RadialSlider_ValueChanged" 
                      Name="radialSlider"/>
SfRadialSlider radialSlider = new SfRadialSlider();
radialSlider.ValueChanged += RadialSlider_ValueChanged;

You can handle the event as follows,

private void RadialSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e){
    //Get old and new selected tick value
    var oldValue = e.OldValue;
    var newValue = e.NewValue;
}

Theme

SfRadialSlider supports various built-in themes. Refer to the below links to apply themes for the SfRadialSlider,

Setting theme to WPF SfRadialSlider