Back to Details

syncfusion-winui-radial-gauge

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Radial Gauge

实现径向仪表盘

The Syncfusion WinUI Radial Gauge (SfRadialGauge) is a multi-purpose data visualization control that displays numerical values on a circular scale. It's ideal for creating speedometers, temperature monitors, dashboard gauges, meter gauges, multi-axis clocks, watches, activity gauges, compasses, and other circular indicators.
Syncfusion WinUI Radial Gauge（SfRadialGauge）是一款多用途数据可视化控件，可在圆形刻度上展示数值，非常适合用于创建速度计、温度监控器、仪表板仪表盘、计量表、多轴时钟、手表、活动仪表盘、指南针以及其他圆形指示器。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Display metrics circularly - Speedometers, tachometers, fuel gauges, pressure meters
  • Create dashboard indicators - KPI gauges, performance monitors, progress indicators
  • Build measurement displays - Temperature monitors, humidity gauges, voltage meters
  • Implement activity trackers - Fitness rings, progress circles, goal trackers
  • Design custom dials - Compass displays, clock faces, directional indicators
  • Show ranges visually - Color-coded zones (red/yellow/green), danger/warning/safe areas
  • Animate value changes - Smooth transitions with pointer animations
  • Enable user interaction - Draggable pointers for value adjustment
  • Display multiple metrics - Multi-axis gauges showing related data points
当你需要实现以下需求时可使用本技能：
  • 圆形展示指标 - 速度计、转速表、燃油表、压力表
  • 创建仪表板指示器 - KPI仪表盘、性能监控器、进度指示器
  • 构建测量显示界面 - 温度监控器、湿度计、电压表
  • 实现活动追踪器 - 健身环、进度环、目标追踪器
  • 设计自定义刻度盘 - 指南针显示、时钟表盘、方向指示器
  • 可视化展示范围 - 颜色编码区域（红/黄/绿）、危险/警告/安全区域
  • 动画展示数值变化 - 指针动画实现平滑过渡
  • 支持用户交互 - 可拖拽指针调整数值
  • 展示多组指标 - 多轴仪表盘展示关联数据点

Component Overview

组件概述

Key Features:
  • Circular axis with customizable scale, labels, ticks, and styling
  • Four pointer types - Needle, Shape, Content, and Range pointers
  • Visual ranges - Color-coded segments with gradient support
  • Annotations - Add text, images, or custom UI elements
  • Animations - Smooth pointer movements with easing functions
  • Interactive dragging - User-adjustable pointer values
  • Multiple axes - Display multiple scales in one gauge
  • Flexible styling - Pixel or factor-based sizing for responsive layouts
核心特性：
  • 圆形坐标轴 支持自定义刻度、标签、刻度线和样式
  • 四种指针类型 - 指针、形状、内容和范围指针
  • 可视化范围 - 支持渐变的颜色编码分段
  • 注释 - 可添加文本、图片或自定义UI元素
  • 动画 - 带缓动函数的平滑指针移动效果
  • 交互拖拽 - 用户可调整指针数值
  • 多坐标轴 - 单个仪表盘可展示多个刻度
  • 灵活样式 - 支持像素或比例因子尺寸适配响应式布局

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
Use when you need to:
  • Install and set up Syncfusion WinUI Radial Gauge
  • Create your first radial gauge
  • Add basic axis, ranges, pointers, and annotations
  • Understand the component structure
  • Get a complete working example
📄 阅读： references/getting-started.md
适用于以下场景：
  • 安装并配置Syncfusion WinUI Radial Gauge
  • 创建你的第一个径向仪表盘
  • 添加基础坐标轴、范围、指针和注释
  • 理解组件结构
  • 获取完整可运行示例

Axis Configuration

坐标轴配置

📄 Read: references/axis-configuration.md
Use when you need to:
  • Configure axis minimum, maximum, and interval
  • Customize start and end angles (180°, 270°, 360°, etc.)
  • Adjust axis radius and positioning
  • Style axis line (width, color, gradients)
  • Customize labels (format, template, rotation, position)
  • Configure ticks (major/minor, length, style, position)
  • Show/hide axis elements
  • Implement multiple axes
  • Create custom scale ranges
  • Handle axis events
📄 阅读： references/axis-configuration.md
适用于以下场景：
  • 配置坐标轴最小值、最大值和间隔
  • 自定义起始和结束角度（180°、270°、360°等）
  • 调整坐标轴半径和位置
  • 设置轴线样式（宽度、颜色、渐变）
  • 自定义标签（格式、模板、旋转、位置）
  • 配置刻度线（主/次刻度、长度、样式、位置）
  • 显示/隐藏坐标轴元素
  • 实现多坐标轴
  • 创建自定义刻度范围
  • 处理坐标轴事件

Pointers

指针

📄 Read: references/pointers.md
Use when you need to:
  • Add needle pointers with knobs and tails
  • Use shape pointers (circle, diamond, triangle, etc.)
  • Create content pointers with custom UI
  • Implement range pointers for arc segments
  • Add multiple pointers to one axis
  • Enable interactive pointer dragging
  • Animate pointer movements
  • Handle pointer value change events
  • Customize pointer appearance and offset
📄 阅读： references/pointers.md
适用于以下场景：
  • 添加带旋钮和尾部的指针
  • 使用形状指针（圆形、菱形、三角形等）
  • 创建带自定义UI的内容指针
  • 实现弧形分段的范围指针
  • 单个坐标轴添加多个指针
  • 启用指针交互拖拽功能
  • 为指针移动添加动画
  • 处理指针数值变化事件
  • 自定义指针外观和偏移量

Ranges

范围

📄 Read: references/ranges.md
Use when you need to:
  • Create color-coded value ranges
  • Define start and end values for ranges
  • Customize range width (equal or tapered)
  • Apply gradients to ranges
  • Position ranges (offset from axis)
  • Add labels to ranges
  • Use range colors for axis elements
  • Create template-based range labels
📄 阅读： references/ranges.md
适用于以下场景：
  • 创建颜色编码的数值范围
  • 定义范围的起始和结束值
  • 自定义范围宽度（等宽或渐变宽度）
  • 为范围应用渐变效果
  • 设置范围位置（相对坐标轴的偏移）
  • 为范围添加标签
  • 将范围颜色应用到坐标轴元素
  • 创建基于模板的范围标签

Annotations

注释

📄 Read: references/annotations.md
Use when you need to:
  • Add text labels at specific positions
  • Display images on the gauge
  • Position annotations using angles or axis values
  • Adjust annotation distance from center
  • Align annotations (horizontal/vertical)
  • Add custom UI elements as annotations
📄 阅读： references/annotations.md
适用于以下场景：
  • 在指定位置添加文本标签
  • 在仪表盘上展示图片
  • 使用角度或坐标轴值定位注释
  • 调整注释与中心的距离
  • 对齐注释（水平/垂直）
  • 添加自定义UI元素作为注释

Animation

动画

📄 Read: references/animation.md
Use when you need to:
  • Enable pointer animations
  • Control animation duration
  • Apply easing functions (linear, bounce, elastic, etc.)
  • Create smooth value transitions
📄 阅读： references/animation.md
适用于以下场景：
  • 启用指针动画
  • 控制动画时长
  • 应用缓动函数（线性、弹跳、弹性等）
  • 实现平滑的数值过渡效果

API Reference

API参考

📄 Read: references/api-reference.md
Use when you need to:
  • Look up specific properties
  • Understand class hierarchies
  • Find available customization options
  • Reference complete API documentation
📄 阅读： references/api-reference.md
适用于以下场景：
  • 查询特定属性
  • 理解类层次结构
  • 查找可用的自定义选项
  • 查阅完整API文档

Quick Start Example

快速入门示例

Here's a basic speedometer gauge with ranges and needle pointer:
xaml
<Window x:Class="RadialGaugeApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges">
    
    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis Maximum="150"
                              Interval="10">
                
                <!-- Color-coded ranges -->
                <gauge:RadialAxis.Ranges>
                    <gauge:GaugeRange StartValue="0"
                                      EndValue="50"
                                      Background="Green" />
                    <gauge:GaugeRange StartValue="50"
                                      EndValue="100"
                                      Background="Orange" />
                    <gauge:GaugeRange StartValue="100"
                                      EndValue="150"
                                      Background="Red" />
                </gauge:RadialAxis.Ranges>
                
                <!-- Needle pointer -->
                <gauge:RadialAxis.Pointers>
                    <gauge:NeedlePointer Value="90"
                                         EnableAnimation="True" />
                </gauge:RadialAxis.Pointers>
                
                <!-- Value annotation -->
                <gauge:RadialAxis.Annotations>
                    <gauge:GaugeAnnotation DirectionUnit="Angle"
                                           DirectionValue="90"
                                           PositionFactor="0.5">
                        <gauge:GaugeAnnotation.Content>
                            <TextBlock Text="90"
                                       FontSize="25"
                                       FontWeight="Bold" />
                        </gauge:GaugeAnnotation.Content>
                    </gauge:GaugeAnnotation>
                </gauge:RadialAxis.Annotations>
                
            </gauge:RadialAxis>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>
    
</Window>
csharp
using Syncfusion.UI.Xaml.Gauges;
using Microsoft.UI.Xaml;

namespace RadialGaugeApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            
            // Can also create gauge programmatically
            SfRadialGauge gauge = new SfRadialGauge();
            
            RadialAxis axis = new RadialAxis();
            axis.Maximum = 150;
            axis.Interval = 10;
            
            // Add ranges
            axis.Ranges.Add(new GaugeRange { 
                StartValue = 0, 
                EndValue = 50, 
                Background = new SolidColorBrush(Colors.Green) 
            });
            
            // Add pointer
            axis.Pointers.Add(new NeedlePointer { 
                Value = 90, 
                EnableAnimation = true 
            });
            
            gauge.Axes.Add(axis);
        }
    }
}
以下是一个基础的速度计仪表盘，包含范围和指针：
xaml
<Window x:Class="RadialGaugeApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges">
    
    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis Maximum="150"
                              Interval="10">
                
                <!-- Color-coded ranges -->
                <gauge:RadialAxis.Ranges>
                    <gauge:GaugeRange StartValue="0"
                                      EndValue="50"
                                      Background="Green" />
                    <gauge:GaugeRange StartValue="50"
                                      EndValue="100"
                                      Background="Orange" />
                    <gauge:GaugeRange StartValue="100"
                                      EndValue="150"
                                      Background="Red" />
                </gauge:RadialAxis.Ranges>
                
                <!-- Needle pointer -->
                <gauge:RadialAxis.Pointers>
                    <gauge:NeedlePointer Value="90"
                                         EnableAnimation="True" />
                </gauge:RadialAxis.Pointers>
                
                <!-- Value annotation -->
                <gauge:RadialAxis.Annotations>
                    <gauge:GaugeAnnotation DirectionUnit="Angle"
                                           DirectionValue="90"
                                           PositionFactor="0.5">
                        <gauge:GaugeAnnotation.Content>
                            <TextBlock Text="90"
                                       FontSize="25"
                                       FontWeight="Bold" />
                        </gauge:GaugeAnnotation.Content>
                    </gauge:GaugeAnnotation>
                </gauge:RadialAxis.Annotations>
                
            </gauge:RadialAxis>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>
    
</Window>
csharp
using Syncfusion.UI.Xaml.Gauges;
using Microsoft.UI.Xaml;

namespace RadialGaugeApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            
            // Can also create gauge programmatically
            SfRadialGauge gauge = new SfRadialGauge();
            
            RadialAxis axis = new RadialAxis();
            axis.Maximum = 150;
            axis.Interval = 10;
            
            // Add ranges
            axis.Ranges.Add(new GaugeRange { 
                StartValue = 0, 
                EndValue = 50, 
                Background = new SolidColorBrush(Colors.Green) 
            });
            
            // Add pointer
            axis.Pointers.Add(new NeedlePointer { 
                Value = 90, 
                EnableAnimation = true 
            });
            
            gauge.Axes.Add(axis);
        }
    }
}

Common Patterns

常用模式

Pattern 1: Temperature Monitor

模式1：温度监控器

xaml
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Minimum="-60"
                          Maximum="60"
                          Interval="20"
                          StartAngle="180"
                          EndAngle="0">
            
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="-60"
                                  EndValue="0"
                                  Background="#2196F3" />
                <gauge:GaugeRange StartValue="0"
                                  EndValue="30"
                                  Background="#4CAF50" />
                <gauge:GaugeRange StartValue="30"
                                  EndValue="60"
                                  Background="#FF5722" />
            </gauge:RadialAxis.Ranges>
            
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value="25"
                                    PointerWidth="15"
                                    EnableAnimation="True" />
            </gauge:RadialAxis.Pointers>
            
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock Text="25°C"
                                   FontSize="30"
                                   FontWeight="Bold" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
xaml
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Minimum="-60"
                          Maximum="60"
                          Interval="20"
                          StartAngle="180"
                          EndAngle="0">
            
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="-60"
                                  EndValue="0"
                                  Background="#2196F3" />
                <gauge:GaugeRange StartValue="0"
                                  EndValue="30"
                                  Background="#4CAF50" />
                <gauge:GaugeRange StartValue="30"
                                  EndValue="60"
                                  Background="#FF5722" />
            </gauge:RadialAxis.Ranges>
            
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value="25"
                                    PointerWidth="15"
                                    EnableAnimation="True" />
            </gauge:RadialAxis.Pointers>
            
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock Text="25°C"
                                   FontSize="30"
                                   FontWeight="Bold" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Pattern 2: Interactive Draggable Gauge

模式2：可交互拖拽仪表盘

xaml
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowTicks="False"
                          AxisLineFill="CornflowerBlue"
                          AxisLineWidth="30">
            
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value="60"
                                    IsInteractive="True"
                                    MarkerOffset="-30"
                                    Background="Indigo"
                                    ValueChanged="Pointer_ValueChanged" />
            </gauge:RadialAxis.Pointers>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
csharp
private void Pointer_ValueChanged(object sender, ValueChangedEventArgs e)
{
    // Handle pointer value changes
    Debug.WriteLine($"New value: {e.Value}");
}
xaml
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowTicks="False"
                          AxisLineFill="CornflowerBlue"
                          AxisLineWidth="30">
            
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value="60"
                                    IsInteractive="True"
                                    MarkerOffset="-30"
                                    Background="Indigo"
                                    ValueChanged="Pointer_ValueChanged" />
            </gauge:RadialAxis.Pointers>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
csharp
private void Pointer_ValueChanged(object sender, ValueChangedEventArgs e)
{
    // Handle pointer value changes
    Debug.WriteLine($"New value: {e.Value}");
}

Pattern 3: Multi-Axis Clock

模式3：多轴时钟

xaml
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <!-- Hours axis -->
        <gauge:RadialAxis Maximum="12"
                          Interval="1"
                          RadiusFactor="0.8"
                          LabelPosition="Outside">
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value="10"
                                     NeedleLength="0.5"
                                     NeedleEndWidth="8" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
        
        <!-- Minutes axis -->
        <gauge:RadialAxis Maximum="60"
                          Interval="5"
                          RadiusFactor="0.95"
                          LabelPosition="Outside">
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value="35"
                                     NeedleLength="0.7"
                                     NeedleEndWidth="4" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
xaml
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <!-- Hours axis -->
        <gauge:RadialAxis Maximum="12"
                          Interval="1"
                          RadiusFactor="0.8"
                          LabelPosition="Outside">
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value="10"
                                     NeedleLength="0.5"
                                     NeedleEndWidth="8" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
        
        <!-- Minutes axis -->
        <gauge:RadialAxis Maximum="60"
                          Interval="5"
                          RadiusFactor="0.95"
                          LabelPosition="Outside">
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value="35"
                                     NeedleLength="0.7"
                                     NeedleEndWidth="4" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Pattern 4: Progress Ring with Percentage

模式4：带百分比的进度环

xaml
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowLabels="False"
                          ShowTicks="False"
                          StartAngle="270"
                          EndAngle="270"
                          Maximum="100"
                          AxisLineWidth="20"
                          AxisLineFill="LightGray">
            
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value="73"
                                    PointerWidth="20"
                                    Background="#4CAF50"
                                    CornerStyle="BothCurve"
                                    EnableAnimation="True" />
            </gauge:RadialAxis.Pointers>
            
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock>
                            <Run Text="73" FontSize="40" FontWeight="Bold" />
                            <Run Text="%" FontSize="20" />
                        </TextBlock>
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
xaml
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowLabels="False"
                          ShowTicks="False"
                          StartAngle="270"
                          EndAngle="270"
                          Maximum="100"
                          AxisLineWidth="20"
                          AxisLineFill="LightGray">
            
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value="73"
                                    PointerWidth="20"
                                    Background="#4CAF50"
                                    CornerStyle="BothCurve"
                                    EnableAnimation="True" />
            </gauge:RadialAxis.Pointers>
            
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock>
                            <Run Text="73" FontSize="40" FontWeight="Bold" />
                            <Run Text="%" FontSize="20" />
                        </TextBlock>
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Key Properties by Category

按类别划分的核心属性

SfRadialGauge

SfRadialGauge

  • Axes
    - Collection of RadialAxis objects
  • CanScaleToFit
    - Position axis based on start/end angles
  • Axes
    - RadialAxis对象集合
  • CanScaleToFit
    - 根据起始/结束角度自动定位坐标轴

Axis Configuration

坐标轴配置

  • Minimum
    / 
    Maximum
    - Axis value range
  • Interval
    - Space between labels
  • StartAngle
    / 
    EndAngle
    - Circular arc angles (0-360°)
  • RadiusFactor
    - Axis size (0-1 factor of available space)
  • IsInversed
    - Counter-clockwise direction
  • Minimum
    / 
    Maximum
    - 坐标轴数值范围
  • Interval
    - 标签间隔
  • StartAngle
    / 
    EndAngle
    - 圆弧角度（0-360°）
  • RadiusFactor
    - 坐标轴尺寸（占可用空间的比例，取值0-1）
  • IsInversed
    - 逆时针方向排布

Axis Styling

坐标轴样式

  • AxisLineWidth
    / 
    AxisLineWidthUnit
    - Line thickness (Pixel/Factor)
  • AxisLineFill
    - Line color/brush
  • GradientStops
    - Gradient colors on axis line
  • ShowAxisLine
    - Axis line visibility
  • AxisLineWidth
    / 
    AxisLineWidthUnit
    - 轴线粗细（像素/比例）
  • AxisLineFill
    - 轴线颜色/画笔
  • GradientStops
    - 轴线渐变颜色
  • ShowAxisLine
    - 轴线可见性

Labels & Ticks

标签与刻度线

  • ShowLabels
    / 
    ShowTicks
    - Element visibility
  • LabelFormat
    - Number format (currency, percent, etc.)
  • LabelTemplate
    - Custom label template
  • LabelPosition
    / 
    TickPosition
    - Inside/Outside/Cross
  • LabelOffset
    / 
    TickOffset
    - Distance from axis
  • MajorTickLength
    / 
    MinorTickLength
    - Tick sizes
  • MinorTicksPerInterval
    - Minor tick count
  • ShowLabels
    / 
    ShowTicks
    - 元素可见性
  • LabelFormat
    - 数字格式（货币、百分比等）
  • LabelTemplate
    - 自定义标签模板
  • LabelPosition
    / 
    TickPosition
    - 内侧/外侧/交叉
  • LabelOffset
    / 
    TickOffset
    - 相对坐标轴的距离
  • MajorTickLength
    / 
    MinorTickLength
    - 刻度线尺寸
  • MinorTicksPerInterval
    - 次刻度线数量

Pointers (All Types)

指针（所有类型通用）

  • Value
    - Current pointer value
  • EnableAnimation
    - Animate on value change
  • AnimationDuration
    - Animation time (ms)
  • AnimationEasingFunction
    - Easing function
  • IsInteractive
    - Enable dragging
  • Value
    - 当前指针数值
  • EnableAnimation
    - 数值变化时启用动画
  • AnimationDuration
    - 动画时长（毫秒）
  • AnimationEasingFunction
    - 缓动函数
  • IsInteractive
    - 启用拖拽功能

Needle Pointer Specific

指针专属属性（指针类型）

  • NeedleLength
    / 
    NeedleStartWidth
    / 
    NeedleEndWidth
    - Needle shape
  • KnobRadius
    / 
    KnobFill
    / 
    KnobStroke
    - Center knob
  • TailLength
    / 
    TailWidth
    - Needle tail
  • NeedleLength
    / 
    NeedleStartWidth
    / 
    NeedleEndWidth
    - 指针形状
  • KnobRadius
    / 
    KnobFill
    / 
    KnobStroke
    - 中心旋钮
  • TailLength
    / 
    TailWidth
    - 指针尾部

Shape Pointer Specific

指针专属属性（形状类型）

  • ShapeType
    - Circle, Diamond, Triangle, etc.
  • ShapeHeight
    / 
    ShapeWidth
    - Shape size
  • MarkerOffset
    - Distance from axis
  • ShapeType
    - 圆形、菱形、三角形等
  • ShapeHeight
    / 
    ShapeWidth
    - 形状尺寸
  • MarkerOffset
    - 相对坐标轴的距离

Range Pointer Specific

指针专属属性（范围类型）

  • PointerWidth
    - Arc width
  • CornerStyle
    - BothFlat, BothCurve, StartCurve, EndCurve
  • PointerWidth
    - 弧形宽度
  • CornerStyle
    - 两端平坦/两端圆角/起始圆角/结束圆角

Ranges

范围

  • StartValue
    / 
    EndValue
    - Range boundaries
  • StartWidth
    / 
    EndWidth
    - Range thickness
  • WidthUnit
    - Pixel or Factor
  • RangeOffset
    - Distance from axis
  • Background
    - Range color
  • GradientStops
    - Gradient colors
  • Label
    / 
    LabelTemplate
    - Range label
  • StartValue
    / 
    EndValue
    - 范围边界
  • StartWidth
    / 
    EndWidth
    - 范围粗细
  • WidthUnit
    - 像素或比例
  • RangeOffset
    - 相对坐标轴的距离
  • Background
    - 范围颜色
  • GradientStops
    - 渐变颜色
  • Label
    / 
    LabelTemplate
    - 范围标签

Annotations

注释

  • DirectionUnit
    - Angle or AxisValue
  • DirectionValue
    - Position value
  • PositionFactor
    - Distance from center (0-1)
  • Content
    - Any UIElement
  • DirectionUnit
    - 角度或坐标轴数值
  • DirectionValue
    - 位置数值
  • PositionFactor
    - 相对中心的距离（0-1）
  • Content
    - 任意UIElement元素

Common Use Cases

常见使用场景

  1. Speedometer/Tachometer - Vehicle speed/RPM display with color-coded danger zones
  2. Temperature Gauge - Climate monitors with cold/moderate/hot ranges
  3. Pressure Meter - Tire pressure, hydraulic pressure with threshold indicators
  4. Battery Level - Circular battery indicator with percentage annotation
  5. Fitness Tracker - Activity rings showing steps, calories, distance
  6. KPI Dashboard - Business metrics with goal thresholds
  7. Volume Control - Draggable circular volume adjuster
  8. Compass - Directional gauge with degree markings
  9. Timer/Stopwatch - Elapsed time visualization
  10. Progress Indicator - Task completion, download progress
  11. Rating Display - Score visualization (1-10 scale)
  12. Multi-Metric Display - Multiple axes showing related measurements
  1. 速度计/转速表 - 车辆速度/转速展示，带颜色编码危险区域
  2. 温度仪表盘 - 气候监控器，带寒冷/适宜/炎热范围
  3. 压力表 - 胎压、液压表，带阈值指示器
  4. 电量显示 - 圆形电量指示器，带百分比注释
  5. 健身追踪器 - 活动环展示步数、卡路里、距离
  6. KPI仪表板 - 业务指标展示，带目标阈值
  7. 音量控制 - 可拖拽圆形音量调节器
  8. 指南针 - 带度数标记的方向仪表盘
  9. 计时器/秒表 - 已过时间可视化
  10. 进度指示器 - 任务完成度、下载进度
  11. 评分展示 - 分数可视化（1-10分制）
  12. 多指标展示 - 多坐标轴展示关联测量值

Notes

注意事项

  • All size properties support Pixel or Factor units for responsive layouts
  • Factor values (0-1) are multiplied by axis radius for proportional sizing
  • Use animations for smooth transitions when updating values
  • Enable IsInteractive for user-adjustable pointers with drag support
  • Multiple axes can share the same center with different radius factors
  • GradientStops provide smooth color transitions based on axis values
  • Annotations can contain any WinUI UIElement (TextBlock, Image, Grid, etc.)
Installation: Install the 
Syncfusion.Gauge.WinUI
NuGet package
Namespace: 
Syncfusion.UI.Xaml.Gauges
GitHub Samples: WinUI Radial Gauge Demos
  • 所有尺寸属性支持像素或比例单位，适配响应式布局
  • 比例值（0-1）会与坐标轴半径相乘实现比例缩放
  • 更新数值时使用动画实现平滑过渡
  • 启用IsInteractive可支持用户拖拽调整指针数值
  • 多个坐标轴可共享同一个中心，使用不同的半径因子
  • GradientStops可基于坐标轴数值实现平滑颜色过渡
  • 注释可包含任意WinUI UIElement（TextBlock、Image、Grid等）
安装： 安装
Syncfusion.Gauge.WinUI
NuGet包
命名空间： 
Syncfusion.UI.Xaml.Gauges
GitHub示例： WinUI Radial Gauge Demos