syncfusion-wpf-radial-slider

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing SfRadialSlider (WPF)

实现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

当用户需要以下功能时可使用本技能：

为WPF应用添加圆形/径向数值选择器
配置数值范围（Minimum、Maximum）、步长间隔（SmallChange）或刻度间距（TickFrequency）
自定义圆形轨道的起始/结束角度和扫描方向
使用Content或ContentTemplate在内部边缘显示选中的数值
通过DataTemplates自定义刻度标记、刻度标签、指针或预览指针
通过DrawLabel事件动态格式化刻度标签文本
设置内部边缘、外部边缘、前景色和背景色的样式

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

SfRadialSlider
├── Outer rim      — 圆形轨道背景（Background、OuterRimStroke）
├── Ticks          — 轨道上的刻度标记（TickRadiusFactor、TickTemplate）
├── Labels         — 刻度数值标签（LabelRadiusFactor、LabelTemplate、DrawLabel）
├── Pointer        — 选择指示器（PointerRadiusFactor、PointerStyle）
├── Preview pointer — 悬停指示器（PreviewPointerStyle）
└── Inner rim      — 中心圆形内容区域（InnerRimRadiusFactor、InnerRimFill、Content）

程序集：

```
Syncfusion.SfRadialMenu.WPF
```
```
Syncfusion.SfShared.WPF
```

命名空间：

Syncfusion.Windows.Controls.Navigation

XAML架构：

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

📄 阅读： references/getting-started.md

程序集引用和命名空间
通过XAML和C#创建控件
通过拖拽或点击选择数值
以编程方式赋值Value
ValueChanged事件
使用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

📄 阅读： references/value-and-range.md

Value / Minimum / Maximum
在内容区域显示数值（Content + ContentTemplate）
SmallChange — 步长间隔
TickFrequency — 刻度间距
ShowMaximumValue — 当最大值不是TickFrequency的倍数时显示最大值
StartAngle / EndAngle — 弧度范围
SweepDirection — 顺时针或逆时针

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

📄 阅读： references/ticks-and-templates.md

TickRadiusFactor / TickVisibility / TickTemplate
LabelRadiusFactor / LabelVisibility / LabelTemplate
InnerRimRadiusFactor / OuterRimRadiusFactor
PointerRadiusFactor / PointerStyle
PreviewPointerStyle
DrawLabel事件 — 自定义单个标签的文本、颜色、字体

Appearance and Styling

外观与样式设置

📄 Read: references/appearance.md

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

📄 阅读： references/appearance.md

Foreground / Background
InnerRimFill / InnerRimStroke / InnerRimStrokeThickness
OuterRimStroke / OuterRimStrokeThickness
FlowDirection（RTL）
SfSkinManager主题

Quick Start

快速开始

xaml

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

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

csharp

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:

xaml

<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>

xaml

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

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

csharp

using Syncfusion.Windows.Controls.Navigation;

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

在内部边缘显示选中的数值：

xaml

<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

常见模式

Scenario	Approach
Temperature selector 0–100	`Minimum="0" Maximum="100"`
Full circle vs arc	`StartAngle="0" EndAngle="360"` vs `StartAngle="90" EndAngle="330"`
Snap to multiples of 5	`SmallChange="5"`
Reduce tick count	`TickFrequency="20"`
Counterclockwise arc	`SweepDirection="Counterclockwise"`
Show max label	`ShowMaximumValue="True"`
Color-code labels by value	Handle `DrawLabel` event
Custom pointer style	`PointerStyle` with `TargetType="syncfusion:RadialPointer"`
Display formatted value in center	`ContentTemplate` with bound `TextBlock`

场景	实现方式
0–100温度选择器	`Minimum="0" Maximum="100"`
完整圆形 vs 弧形	`StartAngle="0" EndAngle="360"` vs `StartAngle="90" EndAngle="330"`
按5的倍数步进	`SmallChange="5"`
减少刻度数量	`TickFrequency="20"`
逆时针弧形	`SweepDirection="Counterclockwise"`
显示最大值标签	`ShowMaximumValue="True"`
按数值为标签配色	处理 `DrawLabel` 事件
自定义指针样式	`PointerStyle` with `TargetType="syncfusion:RadialPointer"`
在中心显示格式化数值	`ContentTemplate` with bound `TextBlock`

Key Properties

关键属性

Property	Default	Description
`Value`	`0`	Currently selected value
`Minimum`	`0`	Minimum tick value
`Maximum`	`100`	Maximum tick value
`SmallChange`	`0.1`	Smallest selectable increment
`TickFrequency`	`10`	Spacing between displayed ticks
`ShowMaximumValue`	`false`	Show max when not a TickFrequency multiple
`StartAngle`	`0`	Start angle of the circular arc
`EndAngle`	`360`	End angle of the circular arc
`SweepDirection`	`Clockwise`	Tick direction
`Content`	`null`	Content shown inside inner rim
`ContentTemplate`	`null`	DataTemplate for inner rim content
`InnerRimRadiusFactor`	`0.2`	Inner circle radius (0–1)
`OuterRimRadiusFactor`	`0.7`	Outer rim radius (0–1)
`TickRadiusFactor`	`0.72`	Tick mark position radius
`LabelRadiusFactor`	`0.87`	Label position radius
`PointerRadiusFactor`	`0.75`	Pointer position radius
`TickVisibility`	`Visible`	Show/hide tick marks
`LabelVisibility`	`Visible`	Show/hide tick labels

属性	默认值	描述
`Value`	`0`	当前选中的数值
`Minimum`	`0`	最小刻度值
`Maximum`	`100`	最大刻度值
`SmallChange`	`0.1`	最小可选增量
`TickFrequency`	`10`	显示的刻度之间的间距
`ShowMaximumValue`	`false`	当最大值不是TickFrequency的倍数时显示最大值
`StartAngle`	`0`	圆形弧度的起始角度
`EndAngle`	`360`	圆形弧度的结束角度
`SweepDirection`	`Clockwise`	刻度方向
`Content`	`null`	内部边缘显示的内容
`ContentTemplate`	`null`	内部边缘内容的DataTemplate
`InnerRimRadiusFactor`	`0.2`	内部圆形的半径系数（0–1）
`OuterRimRadiusFactor`	`0.7`	外部边缘的半径系数（0–1）
`TickRadiusFactor`	`0.72`	刻度标记的位置半径系数
`LabelRadiusFactor`	`0.87`	标签的位置半径系数
`PointerRadiusFactor`	`0.75`	指针的位置半径系数
`TickVisibility`	`Visible`	显示/隐藏刻度标记
`LabelVisibility`	`Visible`	显示/隐藏刻度标签