syncfusion-wpf-radial-gauge

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Circular Gauges (Radial Gauge)

实现圆形仪表盘（径向仪表盘）

Comprehensive guide for implementing the Syncfusion® WPF Radial Gauge (SfCircularGauge) component to visualize numeric values on circular scales. This skill helps you create highly customizable gauges including speedometers, temperature indicators, KPI dashboards, and progress meters with needles, ranges, and interactive features.

本指南详细介绍如何在WPF应用中实现Syncfusion® WPF **Radial Gauge（SfCircularGauge）**组件，在圆形刻度上可视化数值。通过本指南，你可以创建高度可定制的仪表盘，包括速度表、温度指示器、KPI仪表板和进度仪表，支持指针、范围区域和交互功能。

When to Use This Skill

适用场景

Use this skill when you need to:

Create circular gauges for data visualization (speedometers, KPI meters, temperature gauges)
Implement needle pointers to indicate current values on circular scales
Add range pointers to show progress or completion (colored arcs)
Configure symbol pointers for marker-style value indicators
Set up scales with start/end values, angles, and intervals
Add visual ranges to indicate zones (low, medium, high, danger zones)
Customize labels and ticks on gauge scales
Enable pointer dragging for interactive value selection
Animate pointer movements for smooth transitions
Add annotations to display additional information on gauges
Create multi-scale gauges for comparing multiple metrics
Build dashboard visualizations with multiple gauges

This skill is essential for creating any circular/radial visualization where you need to display numeric values on a circular scale with customizable pointers, ranges, and visual indicators.

当你需要以下功能时，可使用本指南：

创建圆形仪表盘用于数据可视化（速度表、KPI仪表、温度仪表盘）
实现指针指示器在圆形刻度上显示当前数值
添加范围指针展示进度或完成情况（彩色弧形）
配置符号指针作为标记式数值指示器
设置刻度包含起始/结束值、角度和间隔
添加视觉范围标记不同数值区间（低、中、高、危险区域）
自定义仪表盘刻度的标签和刻度线
启用指针拖拽实现交互式数值选择
添加指针动画实现平滑过渡效果
添加注释在仪表盘上展示额外信息
创建多刻度仪表盘用于对比多个指标
构建仪表板可视化包含多个仪表盘

本指南对于所有需要在圆形/径向刻度上展示数值，且需自定义指针、范围区域和视觉指示器的可视化场景至关重要。

Component Overview

组件概述

The SfCircularGauge is a powerful data visualization component that displays numeric values on a circular scale. It's highly customizable and supports multiple visual elements:

SfCircularGauge是一款功能强大的数据可视化组件，可在圆形刻度上展示数值。它具有高度可定制性，支持多种视觉元素：

Key Elements

核心元素

Scales: Circular scales with configurable start/end values, angles, and sweep directions
Pointers: Three types - Needle (traditional gauge needle), Range (colored arc), Symbol (marker icons)
Ranges: Visual zones that mark different value ranges (e.g., low/medium/high)
Labels: Numeric labels along the scale
Ticks: Major and minor tick marks for precise value reading
Rim: Circular border around the scale
Header: Title or label for the gauge
Annotations: Custom views, text, or images overlaid on the gauge

刻度（Scales）：可配置起始/结束值、角度和扫描方向的圆形刻度
指针（Pointers）：三种类型 - 指针（Needle，传统仪表盘指针）、范围（Range，彩色弧形）、符号（Symbol，标记图标）
范围区域（Ranges）：标记不同数值区间的视觉区域（如低/中/高）
标签（Labels）：刻度上的数值标签
刻度线（Ticks）：主刻度线和次刻度线，用于精确读取数值
边缘（Rim）：刻度周围的圆形边框
标题（Header）：仪表盘的标题或标签
注释（Annotations）：覆盖在仪表盘上的自定义视图、文本或图片

Common Use Cases

常见应用场景

Speedometers - Vehicle speed indicators with needle pointers
KPI Dashboards - Business metrics with range pointers showing progress
Temperature Gauges - Climate control displays with colored zones
Progress Meters - Completion indicators with percentage displays
Performance Indicators - System metrics (CPU, memory, battery)
Medical Instruments - Health monitoring displays
Industrial Controls - Machine operation indicators

速度表：带指针的车辆速度指示器
KPI仪表板：使用范围指针展示进度的业务指标
温度仪表盘：带彩色区域的气候控制显示
进度仪表：展示完成百分比的指示器
性能指标：系统指标（CPU、内存、电量）
医疗设备：健康监测显示
工业控制：机器运行状态指示器

Documentation and Navigation Guide

文档与导航指南

This skill provides comprehensive coverage of all circular gauge features organized by functionality.

本指南按功能模块全面覆盖了圆形仪表盘的所有特性。

Getting Started

入门指南

📄 Read: references/getting-started.md

When to read: Setting up your first circular gauge, installing packages, understanding basic structure.

Topics covered:

Installing Syncfusion.SfGauge.WPF NuGet package
Assembly references and namespace imports
Creating your first SfCircularGauge
Adding basic scale, pointer, and header
Complete minimal working example
License configuration

📄 阅读： references/getting-started.md

适用场景： 设置第一个圆形仪表盘、安装包、理解基础结构。

涵盖主题：

安装Syncfusion.SfGauge.WPF NuGet包
程序集引用和命名空间导入
创建第一个SfCircularGauge
添加基础刻度、指针和标题
完整的最小可运行示例
许可证配置

Scale Configuration

刻度配置

📄 Read: references/scales-and-configuration.md

When to read: Configuring the circular scale's values, angles, intervals, and appearance.

Topics covered:

Setting StartValue and EndValue for scale range
Configuring StartAngle and SweepAngle (partial or full circles)
Setting Interval for label frequency
Sweep direction (Clockwise/Counterclockwise)
Adding multiple scales to a single gauge
Scale radius and sizing with SpacingMargin
RadiusFactor for responsive sizing

📄 阅读： references/scales-and-configuration.md

适用场景： 配置圆形刻度的数值范围、角度、间隔和外观。

涵盖主题：

设置刻度的StartValue和EndValue
配置StartAngle和SweepAngle（部分或完整圆形）
设置标签显示间隔Interval
扫描方向（顺时针/逆时针）
在单个仪表盘中添加多个刻度
刻度半径和SpacingMargin设置
响应式尺寸的RadiusFactor

Pointers (Value Indicators)

指针（数值指示器）

📄 Read: references/pointers.md

When to read: Adding needles, range pointers, or symbol markers to indicate values.

Topics covered:

Needle Pointer types (Rectangle, Triangle, Tapered, Arrow)
Needle customization (length, stroke, thickness, knob, tail)
Range Pointer for progress visualization
Range pointer positioning (Inside, Outside, Cross, Custom)
Symbol Pointer types (Arrow, Diamond, Ellipse, Triangle, Pentagon, etc.)
Custom symbol templates
Multiple pointers on one scale
Pointer value binding and updates

📄 阅读： references/pointers.md

适用场景： 添加指针、范围指针或符号标记以指示数值。

涵盖主题：

指针类型（矩形、三角形、锥形、箭头）
指针自定义（长度、描边、粗细、旋钮、尾部）
用于进度可视化的范围指针
范围指针位置（内部、外部、交叉、自定义）
符号指针类型（箭头、菱形、椭圆、三角形、五边形等）
自定义符号模板
单个刻度上的多个指针
指针数值绑定和更新

Ranges (Visual Zones)

范围区域（视觉区域）

📄 Read: references/ranges.md

When to read: Adding colored zones to indicate different value ranges (low/medium/high).

Topics covered:

Creating ranges with StartValue and EndValue
Range stroke and thickness customization
Range positioning with Offset
Multiple ranges for zone visualization
Range start/end offset for custom positioning
Gradient fill patterns
Use cases (temperature zones, performance bands, danger zones)

📄 阅读： references/ranges.md

适用场景： 添加彩色区域以标记不同数值区间（低/中/高）。

涵盖主题：

使用StartValue和EndValue创建范围区域
范围区域描边和粗细自定义
使用Offset设置范围区域位置
多个范围区域实现分区可视化
范围区域起始/结束偏移的自定义位置
渐变填充样式
应用场景（温度区间、性能等级、危险区域）

Labels and Ticks

标签和刻度线

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

When to read: Customizing scale labels, major ticks, and minor ticks.

Topics covered:

Label stroke and font customization
Label position (Inside, Outside, Custom)
Label offset and formatting
Label prefix/suffix for units
MajorTickSettings configuration
MinorTickSettings and MinorTicksPerInterval
Tick length, stroke, and thickness
Hiding labels or ticks

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

适用场景： 自定义刻度标签、主刻度线和次刻度线。

涵盖主题：

标签描边和字体自定义
标签位置（内部、外部、自定义）
标签偏移和格式化
标签前缀/后缀（单位）
主刻度线设置
次刻度线设置和MinorTicksPerInterval
刻度线长度、描边和粗细
隐藏标签或刻度线

Rim and Appearance

边缘与外观

📄 Read: references/rim-and-appearance.md

When to read: Styling the gauge rim, background, size, and applying themes.

Topics covered:

ShowRim property and rim customization
RimStroke and RimStrokeThickness
Gauge sizing (Height, Width, Radius)
Background and visual styling
Theming with SfSkinManager
Built-in themes (MaterialLight, FluentDark, etc.)
Custom styling approaches

📄 阅读： references/rim-and-appearance.md

适用场景： 设置仪表盘边缘、背景、尺寸和应用主题。

涵盖主题：

ShowRim属性和边缘自定义
RimStroke和RimStrokeThickness
仪表盘尺寸（高度、宽度、半径）
背景和视觉样式
使用SfSkinManager设置主题
内置主题（MaterialLight、FluentDark等）
自定义样式方法

Header

标题

📄 Read: references/header.md

When to read: Adding titles or labels to your gauge.

Topics covered:

GaugeHeader property for text headers
Custom header views
Header alignment options
GaugeHeaderPosition for custom placement
Header styling and formatting
Multiple text elements in headers

📄 阅读： references/header.md

适用场景： 为仪表盘添加标题或标签。

涵盖主题：

用于文本标题的GaugeHeader属性
自定义标题视图
标题对齐选项
自定义位置的GaugeHeaderPosition
标题样式和格式化
标题中的多个文本元素

Annotations

注释

📄 Read: references/annotations.md

When to read: Overlaying custom views, text, images, or nested gauges on the circular gauge.

Topics covered:

Adding text annotations
Image annotations
Custom view annotations (nested gauges, controls)
Positioning with Angle property
Offset property (0 to 1 from center to edge)
ViewMargin for pixel-precise positioning
Multiple annotations
Dynamic annotation updates

📄 阅读： references/annotations.md

适用场景： 在圆形仪表盘上覆盖自定义视图、文本、图片或嵌套仪表盘。

涵盖主题：

添加文本注释
图片注释
自定义视图注释（嵌套仪表盘、控件）
使用Angle属性定位
Offset属性（从中心到边缘的0到1范围）
像素级精确定位的ViewMargin
多个注释
动态注释更新

Advanced Features

高级特性

📄 Read: references/advanced-features.md

When to read: Implementing animations, pointer dragging, events, and MVVM patterns.

Topics covered:

Pointer animation (EnableAnimation, AnimationDuration)
Interactive pointer dragging (EnableDragging)
Events (ValueChangeStarted, ValueChanging, ValueChanged, ValueChangeCompleted)
PointerPositionChanged event
MVVM pattern with data binding
INotifyPropertyChanged implementation
Real-time gauge updates
Performance optimization

📄 阅读： references/advanced-features.md

适用场景： 实现动画、指针拖拽、事件和MVVM模式。

涵盖主题：

指针动画（EnableAnimation、AnimationDuration）
交互式指针拖拽（EnableDragging）
事件（ValueChangeStarted、ValueChanging、ValueChanged、ValueChangeCompleted）
PointerPositionChanged事件
带数据绑定的MVVM模式
INotifyPropertyChanged实现
实时仪表盘更新
性能优化

Quick Start Example

快速入门示例

Here's a complete example to create a speedometer gauge with needle pointer, range zones, and header:

以下是一个完整的示例，创建带指针、范围区域和标题的速度表：

XAML Implementation

XAML实现

xml

<Window xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf">
    
    <gauge:SfCircularGauge Height="300" Width="300"
                           HeaderAlignment="Custom"
                           GaugeHeaderPosition="0.63,0.75">
        
        <!-- Header -->
        <gauge:SfCircularGauge.GaugeHeader>
            <TextBlock Text="Speedometer" 
                       FontSize="16" 
                       FontWeight="SemiBold"
                       Foreground="Black"/>
        </gauge:SfCircularGauge.GaugeHeader>
        
        <gauge:SfCircularGauge.Scales>
            <gauge:CircularScale StartValue="0" 
                                 EndValue="160" 
                                 Interval="20"
                                 StartAngle="130"
                                 SweepAngle="280"
                                 ShowRim="True"
                                 RimStroke="LightGray"
                                 RimStrokeThickness="5">
                
                <!-- Ranges for zones -->
                <gauge:CircularScale.Ranges>
                    <gauge:CircularRange StartValue="0" EndValue="80" 
                                         Stroke="Green" StrokeThickness="5"/>
                    <gauge:CircularRange StartValue="80" EndValue="120" 
                                         Stroke="Orange" StrokeThickness="5"/>
                    <gauge:CircularRange StartValue="120" EndValue="160" 
                                         Stroke="Red" StrokeThickness="5"/>
                </gauge:CircularScale.Ranges>
                
                <!-- Needle Pointer -->
                <gauge:CircularScale.Pointers>
                    <gauge:CircularPointer PointerType="NeedlePointer"
                                           Value="85"
                                           NeedlePointerType="Triangle"
                                           NeedleLengthFactor="0.6"
                                           NeedlePointerStroke="#333"
                                           NeedlePointerStrokeThickness="5"
                                           KnobFill="#333"
                                           KnobStroke="#333"
                                           PointerCapDiameter="15"/>
                </gauge:CircularScale.Pointers>
            </gauge:CircularScale>
        </gauge:SfCircularGauge.Scales>
    </gauge:SfCircularGauge>
    
</Window>

xml

<Window xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf">
    
    <gauge:SfCircularGauge Height="300" Width="300"
                           HeaderAlignment="Custom"
                           GaugeHeaderPosition="0.63,0.75">
        
        <!-- 标题 -->
        <gauge:SfCircularGauge.GaugeHeader>
            <TextBlock Text="Speedometer" 
                       FontSize="16" 
                       FontWeight="SemiBold"
                       Foreground="Black"/>
        </gauge:SfCircularGauge.GaugeHeader>
        
        <gauge:SfCircularGauge.Scales>
            <gauge:CircularScale StartValue="0" 
                                 EndValue="160" 
                                 Interval="20"
                                 StartAngle="130"
                                 SweepAngle="280"
                                 ShowRim="True"
                                 RimStroke="LightGray"
                                 RimStrokeThickness="5">
                
                <!-- 范围区域 -->
                <gauge:CircularScale.Ranges>
                    <gauge:CircularRange StartValue="0" EndValue="80" 
                                         Stroke="Green" StrokeThickness="5"/>
                    <gauge:CircularRange StartValue="80" EndValue="120" 
                                         Stroke="Orange" StrokeThickness="5"/>
                    <gauge:CircularRange StartValue="120" EndValue="160" 
                                         Stroke="Red" StrokeThickness="5"/>
                </gauge:CircularScale.Ranges>
                
                <!-- 指针 -->
                <gauge:CircularScale.Pointers>
                    <gauge:CircularPointer PointerType="NeedlePointer"
                                           Value="85"
                                           NeedlePointerType="Triangle"
                                           NeedleLengthFactor="0.6"
                                           NeedlePointerStroke="#333"
                                           NeedlePointerStrokeThickness="5"
                                           KnobFill="#333"
                                           KnobStroke="#333"
                                           PointerCapDiameter="15"/>
                </gauge:CircularScale.Pointers>
            </gauge:CircularScale>
        </gauge:SfCircularGauge.Scales>
    </gauge:SfCircularGauge>
    
</Window>

C# Code-Behind

C#代码后置

csharp

using Syncfusion.UI.Xaml.Gauges;
using System.Windows;
using System.Windows.Media;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        
        // License registration (in App.xaml.cs OnStartup)
        // Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");
    }
}

csharp

using Syncfusion.UI.Xaml.Gauges;
using System.Windows;
using System.Windows.Media;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        
        // 许可证注册（在App.xaml.cs的OnStartup中）
        // Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");
    }
}

Programmatic Creation

程序化创建

csharp

SfCircularGauge gauge = new SfCircularGauge();
gauge.Height = 300;
gauge.Width = 300;

// Header
TextBlock header = new TextBlock
{
    Text = "Speedometer",
    FontSize = 16,
    FontWeight = FontWeights.SemiBold,
    Foreground = new SolidColorBrush(Colors.Black)
};
gauge.GaugeHeader = header;
gauge.HeaderAlignment = HeaderAlignment.Custom;
gauge.GaugeHeaderPosition = new Point(0.63, 0.75);

// Scale
CircularScale scale = new CircularScale
{
    StartValue = 0,
    EndValue = 160,
    Interval = 20,
    StartAngle = 130,
    SweepAngle = 280,
    ShowRim = true,
    RimStroke = new SolidColorBrush(Colors.LightGray),
    RimStrokeThickness = 5
};

// Ranges
scale.Ranges.Add(new CircularRange 
{ 
    StartValue = 0, EndValue = 80, 
    Stroke = new SolidColorBrush(Colors.Green), 
    StrokeThickness = 5 
});
scale.Ranges.Add(new CircularRange 
{ 
    StartValue = 80, EndValue = 120, 
    Stroke = new SolidColorBrush(Colors.Orange), 
    StrokeThickness = 5 
});
scale.Ranges.Add(new CircularRange 
{ 
    StartValue = 120, EndValue = 160, 
    Stroke = new SolidColorBrush(Colors.Red), 
    StrokeThickness = 5 
});

// Needle Pointer
CircularPointer pointer = new CircularPointer
{
    PointerType = PointerType.NeedlePointer,
    Value = 85,
    NeedlePointerType = NeedlePointerType.Triangle,
    NeedleLengthFactor = 0.6,
    NeedlePointerStroke = new SolidColorBrush(Color.FromRgb(51, 51, 51)),
    NeedlePointerStrokeThickness = 5,
    KnobFill = new SolidColorBrush(Color.FromRgb(51, 51, 51)),
    KnobStroke = new SolidColorBrush(Color.FromRgb(51, 51, 51)),
    PointerCapDiameter = 15
};
scale.Pointers.Add(pointer);

gauge.Scales.Add(scale);
this.Content = gauge;

csharp

SfCircularGauge gauge = new SfCircularGauge();
gauge.Height = 300;
gauge.Width = 300;

// 标题
TextBlock header = new TextBlock
{
    Text = "Speedometer",
    FontSize = 16,
    FontWeight = FontWeights.SemiBold,
    Foreground = new SolidColorBrush(Colors.Black)
};
gauge.GaugeHeader = header;
gauge.HeaderAlignment = HeaderAlignment.Custom;
gauge.GaugeHeaderPosition = new Point(0.63, 0.75);

// 刻度
CircularScale scale = new CircularScale
{
    StartValue = 0,
    EndValue = 160,
    Interval = 20,
    StartAngle = 130,
    SweepAngle = 280,
    ShowRim = true,
    RimStroke = new SolidColorBrush(Colors.LightGray),
    RimStrokeThickness = 5
};

// 范围区域
scale.Ranges.Add(new CircularRange 
{ 
    StartValue = 0, EndValue = 80, 
    Stroke = new SolidColorBrush(Colors.Green), 
    StrokeThickness = 5 
});
scale.Ranges.Add(new CircularRange 
{ 
    StartValue = 80, EndValue = 120, 
    Stroke = new SolidColorBrush(Colors.Orange), 
    StrokeThickness = 5 
});
scale.Ranges.Add(new CircularRange 
{ 
    StartValue = 120, EndValue = 160, 
    Stroke = new SolidColorBrush(Colors.Red), 
    StrokeThickness = 5 
});

// 指针
CircularPointer pointer = new CircularPointer
{
    PointerType = PointerType.NeedlePointer,
    Value = 85,
    NeedlePointerType = NeedlePointerType.Triangle,
    NeedleLengthFactor = 0.6,
    NeedlePointerStroke = new SolidColorBrush(Color.FromRgb(51, 51, 51)),
    NeedlePointerStrokeThickness = 5,
    KnobFill = new SolidColorBrush(Color.FromRgb(51, 51, 51)),
    KnobStroke = new SolidColorBrush(Color.FromRgb(51, 51, 51)),
    PointerCapDiameter = 15
};
scale.Pointers.Add(pointer);

gauge.Scales.Add(scale);
this.Content = gauge;

Common Patterns

常见模式

Pattern 1: Progress Gauge with Range Pointer

模式1：带范围指针的进度仪表盘

Use range pointers for progress/completion visualization:

xml

<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:CircularScale StartValue="0" EndValue="100" 
                             SweepAngle="360"
                             RimStroke="LightGray" 
                             RimStrokeThickness="20">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer PointerType="RangePointer"
                                       Value="75"
                                       RangePointerStroke="DeepSkyBlue"
                                       RangePointerStrokeThickness="20"
                                       RangeCap="Both"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>

使用范围指针展示进度/完成情况：

xml

<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:CircularScale StartValue="0" EndValue="100" 
                             SweepAngle="360"
                             RimStroke="LightGray" 
                             RimStrokeThickness="20">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer PointerType="RangePointer"
                                       Value="75"
                                       RangePointerStroke="DeepSkyBlue"
                                       RangePointerStrokeThickness="20"
                                       RangeCap="Both"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>

Pattern 2: Temperature Gauge with Color Zones

模式2：带彩色区域的温度仪表盘

Create temperature displays with multiple ranges:

xml

<gauge:CircularScale StartValue="-30" EndValue="50">
    <gauge:CircularScale.Ranges>
        <gauge:CircularRange StartValue="-30" EndValue="0" 
                             Stroke="Blue" StrokeThickness="10"/>
        <gauge:CircularRange StartValue="0" EndValue="25" 
                             Stroke="Green" StrokeThickness="10"/>
        <gauge:CircularRange StartValue="25" EndValue="50" 
                             Stroke="Red" StrokeThickness="10"/>
    </gauge:CircularScale.Ranges>
    <gauge:CircularScale.Pointers>
        <gauge:CircularPointer PointerType="NeedlePointer" Value="22"/>
    </gauge:CircularScale.Pointers>
</gauge:CircularScale>

创建带多个范围区域的温度显示：

xml

<gauge:CircularScale StartValue="-30" EndValue="50">
    <gauge:CircularScale.Ranges>
        <gauge:CircularRange StartValue="-30" EndValue="0" 
                             Stroke="Blue" StrokeThickness="10"/>
        <gauge:CircularRange StartValue="0" EndValue="25" 
                             Stroke="Green" StrokeThickness="10"/>
        <gauge:CircularRange StartValue="25" EndValue="50" 
                             Stroke="Red" StrokeThickness="10"/>
    </gauge:CircularScale.Ranges>
    <gauge:CircularScale.Pointers>
        <gauge:CircularPointer PointerType="NeedlePointer" Value="22"/>
    </gauge:CircularScale.Pointers>
</gauge:CircularScale>

Pattern 3: Interactive Draggable Pointer

模式3：可交互拖拽的指针

Enable user interaction with pointer dragging:

xml

<gauge:CircularPointer PointerType="SymbolPointer"
                       Symbol="InvertedTriangle"
                       EnableDragging="True"
                       EnableAnimation="False"
                       Value="50"
                       ValueChanged="Pointer_ValueChanged"/>

csharp

private void Pointer_ValueChanged(object sender, ValueChangedEventArgs e)
{
    // Update UI or data model with new value
    CurrentValue = e.Value;
}

启用用户交互的指针拖拽功能：

xml

<gauge:CircularPointer PointerType="SymbolPointer"
                       Symbol="InvertedTriangle"
                       EnableDragging="True"
                       EnableAnimation="False"
                       Value="50"
                       ValueChanged="Pointer_ValueChanged"/>

csharp

private void Pointer_ValueChanged(object sender, ValueChangedEventArgs e)
{
    // 使用新数值更新UI或数据模型
    CurrentValue = e.Value;
}

Pattern 4: Multi-Scale Gauge

模式4：多刻度仪表盘

Display multiple metrics in one gauge:

xml

<gauge:SfCircularGauge SpacingMargin="0.7">
    <gauge:SfCircularGauge.Scales>
        <!-- Outer Scale -->
        <gauge:CircularScale Radius="180">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer Value="60"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
        
        <!-- Inner Scale -->
        <gauge:CircularScale Radius="100">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer Value="80"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>

在一个仪表盘中展示多个指标：

xml

<gauge:SfCircularGauge SpacingMargin="0.7">
    <gauge:SfCircularGauge.Scales>
        <!-- 外层刻度 -->
        <gauge:CircularScale Radius="180">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer Value="60"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
        
        <!-- 内层刻度 -->
        <gauge:CircularScale Radius="100">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer Value="80"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>

Pattern 5: MVVM Data Binding

模式5：MVVM数据绑定

Bind pointer values to ViewModel properties:

xml

<gauge:CircularPointer Value="{Binding CurrentSpeed, Mode=TwoWay}"/>

csharp

public class GaugeViewModel : INotifyPropertyChanged
{
    private double _currentSpeed;
    public double CurrentSpeed
    {
        get => _currentSpeed;
        set
        {
            _currentSpeed = value;
            OnPropertyChanged(nameof(CurrentSpeed));
        }
    }
    
    // INotifyPropertyChanged implementation
}

将指针数值绑定到ViewModel属性：

xml

<gauge:CircularPointer Value="{Binding CurrentSpeed, Mode=TwoWay}"/>

csharp

public class GaugeViewModel : INotifyPropertyChanged
{
    private double _currentSpeed;
    public double CurrentSpeed
    {
        get => _currentSpeed;
        set
        {
            _currentSpeed = value;
            OnPropertyChanged(nameof(CurrentSpeed));
        }
    }
    
    // INotifyPropertyChanged实现
}

Key Properties Summary

核心属性汇总

SfCircularGauge

Property	Type	Description
`Scales`	ObservableCollection<CircularScale>	Collection of scales in the gauge
`GaugeHeader`	object	Header content for the gauge
`HeaderAlignment`	HeaderAlignment	Header position (Top, Bottom, Custom)
`GaugeHeaderPosition`	Point	Custom header position (0-1, 0-1)
`Annotations`	CircularGaugeAnnotationCollection	Custom annotations overlay
`SpacingMargin`	double	Spacing between multiple scales (0.1-1)

属性	类型	描述
`Scales`	ObservableCollection<CircularScale>	仪表盘中的刻度集合
`GaugeHeader`	object	仪表盘的标题内容
`HeaderAlignment`	HeaderAlignment	标题位置（顶部、底部、自定义）
`GaugeHeaderPosition`	Point	自定义标题位置（0-1, 0-1）
`Annotations`	CircularGaugeAnnotationCollection	自定义注释覆盖层
`SpacingMargin`	double	多个刻度之间的间距（0.1-1）

CircularScale

Property	Type	Description
`StartValue`	double	Minimum value of the scale
`EndValue`	double	Maximum value of the scale
`Interval`	double	Interval between labels
`StartAngle`	double	Starting angle (0-360)
`SweepAngle`	double	Sweep angle (0-360)
`SweepDirection`	SweepDirection	Clockwise or Counterclockwise
`Radius`	double	Scale radius
`RadiusFactor`	double	Radius factor (0-1)
`ShowRim`	bool	Show/hide rim
`RimStroke`	Brush	Rim color
`RimStrokeThickness`	double	Rim thickness
`Pointers`	ObservableCollection<CircularPointer>	Pointers collection
`Ranges`	ObservableCollection<CircularRange>	Ranges collection

属性	类型	描述
`StartValue`	double	刻度的最小值
`EndValue`	double	刻度的最大值
`Interval`	double	标签之间的间隔
`StartAngle`	double	起始角度（0-360）
`SweepAngle`	double	扫描角度（0-360）
`SweepDirection`	SweepDirection	顺时针或逆时针
`Radius`	double	刻度半径
`RadiusFactor`	double	半径系数（0-1）
`ShowRim`	bool	显示/隐藏边缘
`RimStroke`	Brush	边缘颜色
`RimStrokeThickness`	double	边缘厚度
`Pointers`	ObservableCollection<CircularPointer>	指针集合
`Ranges`	ObservableCollection<CircularRange>	范围区域集合

CircularPointer

Property	Type	Description
`PointerType`	PointerType	NeedlePointer, RangePointer, SymbolPointer
`Value`	double	Current pointer value
`EnableAnimation`	bool	Enable smooth animation
`AnimationDuration`	int	Animation duration (ms)
`EnableDragging`	bool	Enable interactive dragging
`NeedlePointerType`	NeedlePointerType	Rectangle, Triangle, Tapered, Arrow
`NeedleLengthFactor`	double	Needle length (0-1)
`Symbol`	Symbol	Symbol type for SymbolPointer
`RangeCap`	RangeCap	Range cap style (Start, End, Both, None)

属性	类型	描述
`PointerType`	PointerType	NeedlePointer、RangePointer、SymbolPointer
`Value`	double	指针当前数值
`EnableAnimation`	bool	启用平滑动画
`AnimationDuration`	int	动画时长（毫秒）
`EnableDragging`	bool	启用交互式拖拽
`NeedlePointerType`	NeedlePointerType	Rectangle、Triangle、Tapered、Arrow
`NeedleLengthFactor`	double	指针长度（0-1）
`Symbol`	Symbol	SymbolPointer的符号类型
`RangeCap`	RangeCap	范围指针的端点样式（Start、End、Both、None）

CircularRange

Property	Type	Description
`StartValue`	double	Range start value
`EndValue`	double	Range end value
`Stroke`	Brush	Range color
`StrokeThickness`	double	Range thickness
`Offset`	double	Position offset (0-1)

属性	类型	描述
`StartValue`	double	范围区域的起始值
`EndValue`	double	范围区域的结束值
`Stroke`	Brush	范围区域颜色
`StrokeThickness`	double	范围区域厚度
`Offset`	double	位置偏移（0-1）

Common Use Cases

常见应用场景

Business Dashboards

业务仪表板

Create KPI dashboards with multiple gauges showing metrics like sales, performance, customer satisfaction with color-coded zones for targets.

创建KPI仪表板，使用多个仪表盘展示销售、绩效、客户满意度等指标，通过彩色区域标记目标区间。

Industrial Monitoring

工业监控

Build control panels with gauges for pressure, temperature, RPM, voltage with real-time updates and alarm zones.

构建控制面板，使用仪表盘展示压力、温度、转速、电压等指标，支持实时更新和报警区域。

Vehicle Instrumentation

车辆仪表

Implement speedometers, tachometers, fuel gauges, temperature indicators with realistic needle movements and warning zones.

实现速度表、转速表、燃油表、温度指示器，带有逼真的指针动画和警告区域。

Health & Fitness

健康与健身

Display heart rate monitors, step counters, calorie trackers with progress visualization and target zones.

展示心率监测、步数统计、卡路里追踪，使用进度可视化和目标区域。

System Monitoring

系统监控

Create CPU usage, memory utilization, disk space, network bandwidth indicators with real-time updates.

创建CPU使用率、内存占用、磁盘空间、网络带宽等指标的指示器，支持实时更新。

API Reference

API参考

SfCircularGauge API: https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html
CircularScale API: https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html
CircularPointer API: https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html
CircularRange API: https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html
Full Documentation: https://help.syncfusion.com/wpf/radial-gauge/overview

Next Steps: Explore the reference files above based on your specific needs. Start with Getting Started for setup, then dive into specific features as required.

SfCircularGauge API： https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html
CircularScale API： https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html
CircularPointer API： https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html
CircularRange API： https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html
完整文档： https://help.syncfusion.com/wpf/radial-gauge/overview

下一步： 根据你的具体需求探索上述参考文档。从入门指南开始设置，然后深入研究所需的特定功能。