syncfusion-winui-radial-gauge

用途

Syncfusion WinUI Radial Gauge（SfRadialGauge）是一个多用途数据可视化控件，用于在圆形刻度上显示数值。它适合创建速度表、温度监视器、仪表盘仪表、仪表计量器、多轴时钟、手表、活动环、指南针以及其他圆形指示器。

典型使用场景包括：以圆形方式展示指标（速度表、转速表、燃油表、压力表）；创建仪表盘指示器（KPI 仪表、性能监视器、进度指示器）；构建测量显示（温度监视器、湿度仪表、电压表）；实现活动追踪器（健身环、进度圆环、目标追踪器）；设计自定义表盘（指南针显示、表盘、方向指示器）；以可视方式展示区间（红/黄/绿颜色分区、危险/警告/安全区域）；对数值变化进行动画处理（指针平滑过渡）；启用用户交互（可拖动指针调整数值）；展示多个指标（多轴仪表显示相关数据点）。

主要能力

圆形轴，可自定义刻度、标签、刻度和样式
四种指针类型：Needle、Shape、Content 和 Range 指针
可视区间：颜色编码的区段，支持渐变
注释：可添加文本、图片或自定义 UI 元素
动画：带缓动函数的平滑指针移动
交互式拖动：用户可调整指针数值
多轴：在一个仪表中显示多个刻度
灵活的样式：支持基于像素或比例（Factor）的尺寸设置，适用于响应式布局

主要属性按类别划分：

SfRadialGauge：Axes（RadialAxis 对象集合）、CanScaleToFit（根据起始/结束角度定位轴）。

轴配置：Minimum / Maximum（轴数值范围）、Interval（标签间距）、StartAngle / EndAngle（圆弧角度，0-360°）、RadiusFactor（轴大小，可用空间的 0-1 比例）、IsInversed（逆时针方向）。

轴样式：AxisLineWidth / AxisLineWidthUnit（线宽，像素/比例）、AxisLineFill（线条颜色/画刷）、GradientStops（轴线渐变色）、ShowAxisLine（轴线可见性）。

标签与刻度：ShowLabels / ShowTicks（元素可见性）、LabelFormat（数字格式，如货币、百分比等）、LabelTemplate（自定义标签模板）、LabelPosition / TickPosition（Inside/Outside/Cross）、LabelOffset / TickOffset（与轴的距离）、MajorTickLength / MinorTickLength（刻度尺寸）、MinorTicksPerInterval（次刻度数量）。

指针（所有类型）：Value（当前指针数值）、EnableAnimation（数值变化时动画）、AnimationDuration（动画时长，毫秒）、AnimationEasingFunction（缓动函数）、IsInteractive（启用拖动）。

Needle 指针：NeedleLength / NeedleStartWidth / NeedleEndWidth（指针形状）、KnobRadius / KnobFill / KnobStroke（中心旋钮）、TailLength / TailWidth（指针尾部）。

Shape 指针：ShapeType（Circle、Diamond、Triangle 等）、ShapeHeight / ShapeWidth（形状尺寸）、MarkerOffset（与轴的距离）。

Range 指针：PointerWidth（弧宽）、CornerStyle（BothFlat、BothCurve、StartCurve、EndCurve）。

区间（Ranges）：StartValue / EndValue（区间边界）、StartWidth / EndWidth（区间厚度）、WidthUnit（像素或比例）、RangeOffset（与轴的距离）、Background（区间颜色）、GradientStops（渐变色）、Label / LabelTemplate（区间标签）。

注释（Annotations）：DirectionUnit（Angle 或 AxisValue）、DirectionValue（位置值）、PositionFactor（距中心距离，0-1）、Content（任意 UIElement）。

使用方式

安装：安装 Syncfusion.Gauge.WinUI NuGet 包。

命名空间：Syncfusion.UI.Xaml.Gauges。

可通过 XAML 或代码创建仪表。XAML 示例（带区间和 Needle 指针的速度表）：

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

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

                <gauge:RadialAxis.Pointers>
                    <gauge:NeedlePointer Value="90" EnableAnimation="True" />
                </gauge:RadialAxis.Pointers>

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

也可通过代码创建：

using Syncfusion.UI.Xaml.Gauges;
using Microsoft.UI.Xaml;

namespace RadialGaugeApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();

            SfRadialGauge gauge = new SfRadialGauge();

            RadialAxis axis = new RadialAxis();
            axis.Maximum = 150;
            axis.Interval = 10;

            axis.Ranges.Add(new GaugeRange {
                StartValue = 0,
                EndValue = 50,
                Background = new SolidColorBrush(Colors.Green)
            });

            axis.Pointers.Add(new NeedlePointer {
                Value = 90,
                EnableAnimation = true
            });

            gauge.Axes.Add(axis);
        }
    }
}

常见模式包括：温度监视器（可设置 Minimum/Maximum/Interval、StartAngle/EndAngle，并使用 RangePointer 和注释显示数值）、交互式可拖动仪表（使用 ShapePointer 并设置 IsInteractive、MarkerOffset、Background 和 ValueChanged 事件）、多轴时钟（多个 RadialAxis 共享中心，设置不同 RadiusFactor 和指针长度）、带百分比的进度环（隐藏标签和刻度，使用 RangePointer 的 CornerStyle 和注释显示百分比）。

适用场景

速度表/转速表（车辆速度/RPM 显示，带颜色编码的危险区域）、温度仪表（带冷/适中/热区间的气候监视器）、压力表（轮胎压力、液压压力，带阈值指示器）、电池电量（带百分比注释的圆形电池指示器）、健身追踪器（显示步数、卡路里、距离的活动环）、KPI 仪表盘（带目标阈值的业务指标）、音量控制（可拖动的圆形音量调节器）、指南针（带度数标记的方向仪表）、计时器/秒表（经过时间可视化）、进度指示器（任务完成、下载进度）、评分显示（1-10 分评分可视化）、多指标显示（多个轴显示相关测量值）。

限制与注意事项

所有尺寸属性支持像素或比例（Factor）单位，用于响应式布局；比例值（0-1）乘以轴半径得到成比例尺寸。更新数值时使用动画可实现平滑过渡。启用 IsInteractive 可获得用户可拖动调整的指针。多个轴可共享同一中心，使用不同的半径比例。GradientStops 可根据轴数值提供平滑颜色过渡。注释可包含任意 WinUI UIElement（TextBlock、Image、Grid 等）。

关于收费、价格、平台支持范围、授权方式等信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制与注意事项