Syncfusion Wpf Radial Slider

Implementing SfRadialSlider (WPF)

When to Use This Skill

Use this skill when the user needs to:

• Add a circular/radial numeric value selector to a WPF application
• Configure value range (Minimum, Maximum), step intervals (SmallChange), or tick spacing (TickFrequency)
• Customize the start/end angle and sweep direction of the circular track
• Display the selected value inside the inner rim using Content or ContentTemplate
• Customize tick marks, tick labels, pointer, or preview pointer with DataTemplates
• Format tick label text dynamically via the DrawLabel event
• Style the inner rim, outer rim, foreground, and background

Component Overview

SfRadialSlider
├── Outer rim      — circular track background (Background, OuterRimStroke)
├── Ticks          — tick marks on the track (TickRadiusFactor, TickTemplate)
├── Labels         — tick value labels (LabelRadiusFactor, LabelTemplate, DrawLabel)
├── Pointer        — selection indicator (PointerRadiusFactor, PointerStyle)
├── Preview pointer — hover indicator (PreviewPointerStyle)
└── Inner rim      — center circle content area (InnerRimRadiusFactor, InnerRimFill, Content)

Assemblies:

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

Namespace: Syncfusion.Windows.Controls.Navigation
XAML Schema: http://schemas.syncfusion.com/wpf

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Assembly references and namespace
• XAML and C# control creation
• Selecting a value by drag or click
• Programmatic Value assignment
• ValueChanged event
• Themes with SfSkinManager

Value and Range Configuration

📄 Read: references/value-and-range.md

• Value / Minimum / Maximum
• Displaying value in content area (Content + ContentTemplate)
• SmallChange — step interval
• TickFrequency — tick spacing
• ShowMaximumValue — show max when not a multiple
• StartAngle / EndAngle — arc extent
• SweepDirection — clockwise or counterclockwise

Ticks, Labels, and Templates

📄 Read: references/ticks-and-templates.md

• TickRadiusFactor / TickVisibility / TickTemplate
• LabelRadiusFactor / LabelVisibility / LabelTemplate
• InnerRimRadiusFactor / OuterRimRadiusFactor
• PointerRadiusFactor / PointerStyle
• PreviewPointerStyle
• DrawLabel event — per-label text, color, font

Appearance and Styling

📄 Read: references/appearance.md

• Foreground / Background
• InnerRimFill / InnerRimStroke / InnerRimStrokeThickness
• OuterRimStroke / OuterRimStrokeThickness
• FlowDirection (RTL)
• SfSkinManager themes

Quick Start

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:SfRadialSlider Name="radialSlider"
                           Height="200" Width="200"/>

using Syncfusion.Windows.Controls.Navigation;

SfRadialSlider radialSlider = new SfRadialSlider();
radialSlider.Height = 200;
radialSlider.Width  = 200;
this.Content = radialSlider;

Display selected value inside the inner rim:

<syncfusion:SfRadialSlider Value="{Binding SelectedValue, Mode=TwoWay}"
                           Content="{Binding SelectedValue, Mode=TwoWay}"
                           Height="200" Width="200">
    <syncfusion:SfRadialSlider.DataContext>
        <local:ViewModel/>
    </syncfusion:SfRadialSlider.DataContext>
</syncfusion:SfRadialSlider>

Common Patterns

Key Properties