syncfusion-winui-linear-gauge

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WinUI Linear Gauge (SfLinearGauge)

WinUI 线性仪表盘（SfLinearGauge）

Comprehensive guide for implementing the Syncfusion WinUI Linear Gauge (SfLinearGauge) control for data visualization in Windows desktop applications. The Linear Gauge control displays numerical values on a linear scale horizontally or vertically with extensive customization options, ranges, multiple pointer types, and animation support.

本指南全面介绍如何在Windows桌面应用中实现Syncfusion WinUI Linear Gauge（SfLinearGauge）数据可视化控件。线性仪表盘控件可在水平或垂直的线性刻度上展示数值，支持丰富的自定义选项、范围设置、多种指针类型和动画效果。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Create linear gauge controls for data visualization in WinUI desktop applications
Display numerical values on horizontal or vertical linear scales
Add range indicators to visualize value categories with color-coded segments
Use bar pointers to show current values with filled indicators
Use shape pointers to mark values with different shapes (circle, diamond, triangle, etc.)
Use content pointers to display custom content (text, images, icons) at values
Animate pointer movements with customizable duration and easing functions
Enable interactive gauges with draggable pointers for value input
Customize axis appearance with labels, ticks, intervals, and formatting
Build dashboards with temperature, pressure, speed, or other measurement displays
Create progress indicators with visual feedback and ranges
Troubleshoot gauge rendering, pointer positioning, or interaction issues

当你需要实现以下需求时可使用本技能：

在WinUI桌面应用中创建线性仪表盘控件用于数据可视化
在水平或垂直线性刻度上展示数值
添加范围指示器通过颜色分段可视化数值分类
使用条形指针以填充指示器展示当前值
使用形状指针用不同形状（圆形、菱形、三角形等）标记数值
使用内容指针在对应数值位置展示自定义内容（文本、图片、图标）
为指针移动添加动画效果支持自定义时长和缓动函数
实现交互式仪表盘支持拖拽指针输入数值
自定义轴外观支持标签、刻度、间隔和格式设置
构建仪表盘展示温度、压力、速度或其他测量数据
创建进度指示器提供可视化反馈和范围显示
排查问题解决仪表盘渲染、指针定位或交互相关故障

Component Overview

组件概述

SfLinearGauge is a multipurpose data visualization control that displays numerical values on a linear scale, offering:

Orientation: Horizontal or vertical gauge layouts
Axis Customization: Configurable scale with labels, ticks, intervals, and custom ranges
Range Support: Multiple color-coded ranges to visualize value categories
Three Pointer Types:
- Bar Pointer: Filled bar from start to value
- Shape Pointer: Markers with built-in shapes or custom templates
- Content Pointer: Custom content (text, images, icons) at value position
Multiple Pointers: Add multiple pointers to show different values on same scale
Animation: Smooth pointer transitions with customizable easing functions
Interactivity: Draggable shape pointers for user input
Customization: Extensive styling, templates, gradients, and child content support
Data Binding: MVVM-friendly with Value property binding

Control Structure:

Single axis with configurable minimum, maximum, and interval
Multiple ranges for color-coded value segments
Bar pointers collection for filled indicators
Marker pointers collection for shape and content pointers
Full control over appearance, positioning, and behavior

SfLinearGauge是一款多用途数据可视化控件，可在线性刻度上展示数值，提供以下能力：

布局方向： 支持水平或垂直仪表盘布局
轴自定义： 可配置刻度的标签、刻度线、间隔和自定义范围
范围支持： 多个颜色编码的范围，用于可视化数值分类
三种指针类型：
- 条形指针： 从刻度起点到当前值的填充条
- 形状指针： 内置形状或自定义模板的标记
- 内容指针： 数值位置处的自定义内容（文本、图片、图标）
多指针支持： 同一刻度上可添加多个指针展示不同数值
动画效果： 流畅的指针过渡效果，支持自定义缓动函数
交互能力： 可拖拽的形状指针支持用户输入
自定义能力： 丰富的样式、模板、渐变和子内容支持
数据绑定： 友好支持MVVM模式，支持Value属性绑定

控件结构：

单轴配置，支持自定义最小值、最大值和间隔
多个范围用于颜色编码的数值分段
条形指针集合用于填充指示器
标记指针集合用于形状和内容指针
完全可控的外观、定位和行为

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Creating a WinUI 3 desktop application
Installing Syncfusion.Gauge.WinUI NuGet package
Adding Linear Gauge control in XAML
Adding Linear Gauge control in C#
Adding axis to the gauge
Adding ranges for value visualization
Adding bar pointers
Adding marker pointers (shape and content)
Complete working example

📄 阅读： references/getting-started.md

创建WinUI 3桌面应用
安装Syncfusion.Gauge.WinUI NuGet包
在XAML中添加线性仪表盘控件
在C#中添加线性仪表盘控件
为仪表盘添加轴
添加范围用于数值可视化
添加条形指针
添加标记指针（形状和内容）
完整可运行示例

Axis Customization

轴自定义

📄 Read: references/axis-customization.md

Setting minimum and maximum values
Configuring intervals between labels
Axis direction customization (IsInversed)
Mirrored axis support (IsMirrored)
Axis orientation (horizontal/vertical)
Maximum labels count per 100 pixels
Axis line styling (stroke, thickness, color)
Axis line visibility control
Label customization (fonts, colors, formats)
Label templates for custom appearance
Label visibility and placement (inside/outside)
Label position and offset adjustment
Tick customization (major and minor ticks)
Tick styling and dashed patterns
Tick placement and offset
Custom scale ranges (logarithmic, etc.)

📄 阅读： references/axis-customization.md

设置最小值和最大值
配置标签之间的间隔
轴方向自定义（IsInversed）
镜像轴支持（IsMirrored）
轴方向（水平/垂直）
每100像素最大标签数量
轴线样式（笔触、厚度、颜色）
轴线可见性控制
标签自定义（字体、颜色、格式）
自定义外观的标签模板
标签可见性和位置（内部/外部）
标签位置和偏移调整
刻度自定义（主刻度和次刻度）
刻度样式和虚线模式
刻度位置和偏移
自定义刻度范围（如对数刻度等）

Ranges

范围设置

📄 Read: references/ranges.md

Setting start and end values for ranges
Range width customization (StartWidth, MidWidth, EndWidth)
Equal vs. different width ranges
Background color customization
Gradient brush support with multiple stops
Range position (inside/outside/cross axis)
Using range colors for axis elements
Range child content support for labels

📄 阅读： references/ranges.md

设置范围的起始值和结束值
范围宽度自定义（StartWidth、MidWidth、EndWidth）
等宽和不等宽范围
背景色自定义
支持多色标渐变画笔
范围位置（内部/外部/跨轴）
为轴元素应用范围颜色
支持范围子内容作为标签

Pointers

指针设置

📄 Read: references/pointers.md

Overview of three pointer types
Bar Pointer implementation and customization
Shape Pointer with built-in and custom shapes
Content Pointer for text, images, and icons
Multiple pointers on single gauge
Pointer dragging and interactivity
Pointer events (ValueChangeStarted, ValueChanging, ValueChanged, ValueChangeCompleted)
Pointer positioning and anchoring
Pointer sizing and styling

📄 阅读： references/pointers.md

三种指针类型概述
条形指针的实现和自定义
内置和自定义形状的形状指针
支持文本、图片和图标的内容指针
单个仪表盘上的多指针实现
指针拖拽和交互能力
指针事件（ValueChangeStarted、ValueChanging、ValueChanged、ValueChangeCompleted）
指针定位和锚定
指针尺寸和样式设置

Animation

动画设置

📄 Read: references/animation.md

Enabling pointer animation
Animation duration configuration
Animation easing functions
Applying animation to bar pointers
Applying animation to marker pointers
Custom animation timing and effects

📄 阅读： references/animation.md

开启指针动画
动画时长配置
动画缓动函数
为条形指针应用动画
为标记指针应用动画
自定义动画时序和效果

Quick Start Example

快速入门示例

Here's a minimal working example to get started:

以下是最小可运行示例：

1. Add Namespace

1. 添加命名空间

XAML:

xml

<Window xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges">

C#:

csharp

using Syncfusion.UI.Xaml.Gauges;

XAML：

xml

<Window xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges">

C#：

csharp

using Syncfusion.UI.Xaml.Gauges;

2. Create Basic Linear Gauge (XAML)

2. 创建基础线性仪表盘（XAML）

xml

<Window
    x:Class="GaugeApp.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">
    
    <Grid>
        <gauge:SfLinearGauge>
            <gauge:SfLinearGauge.Axis>
                <gauge:LinearAxis Minimum="0"
                                  Maximum="100"
                                  Interval="10">
                    <gauge:LinearAxis.BarPointers>
                        <gauge:BarPointer Value="60" />
                    </gauge:LinearAxis.BarPointers>
                </gauge:LinearAxis>
            </gauge:SfLinearGauge.Axis>
        </gauge:SfLinearGauge>
    </Grid>
</Window>

xml

<Window
    x:Class="GaugeApp.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">
    
    <Grid>
        <gauge:SfLinearGauge>
            <gauge:SfLinearGauge.Axis>
                <gauge:LinearAxis Minimum="0"
                                  Maximum="100"
                                  Interval="10">
                    <gauge:LinearAxis.BarPointers>
                        <gauge:BarPointer Value="60" />
                    </gauge:LinearAxis.BarPointers>
                </gauge:LinearAxis>
            </gauge:SfLinearGauge.Axis>
        </gauge:SfLinearGauge>
    </Grid>
</Window>

3. Or Create Programmatically (C#)

3. 或通过代码创建（C#）

csharp

using Syncfusion.UI.Xaml.Gauges;

namespace GaugeApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            
            // Create gauge programmatically
            SfLinearGauge sfLinearGauge = new SfLinearGauge();
            sfLinearGauge.Axis.Minimum = 0;
            sfLinearGauge.Axis.Maximum = 100;
            sfLinearGauge.Axis.Interval = 10;
            
            // Add bar pointer
            BarPointer barPointer = new BarPointer();
            barPointer.Value = 60;
            sfLinearGauge.Axis.BarPointers.Add(barPointer);
            
            this.Content = sfLinearGauge;
        }
    }
}

csharp

using Syncfusion.UI.Xaml.Gauges;

namespace GaugeApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            
            // 代码创建仪表盘
            SfLinearGauge sfLinearGauge = new SfLinearGauge();
            sfLinearGauge.Axis.Minimum = 0;
            sfLinearGauge.Axis.Maximum = 100;
            sfLinearGauge.Axis.Interval = 10;
            
            // 添加条形指针
            BarPointer barPointer = new BarPointer();
            barPointer.Value = 60;
            sfLinearGauge.Axis.BarPointers.Add(barPointer);
            
            this.Content = sfLinearGauge;
        }
    }
}

4. Set Pointer Value (Optional)

4. 设置指针值（可选）

csharp

// Update pointer value
barPointer.Value = 75;

// With animation
barPointer.EnableAnimation = true;
barPointer.AnimationDuration = 1000; // 1 second
barPointer.Value = 90;

csharp

// 更新指针值
barPointer.Value = 75;

// 带动画效果
barPointer.EnableAnimation = true;
barPointer.AnimationDuration = 1000; // 1秒
barPointer.Value = 90;

Common Patterns

常用模式

Pattern 1: Basic Horizontal Gauge with Bar Pointer

模式1：带条形指针的基础水平仪表盘

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Minimum="0" Maximum="100" Interval="10">
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="60" Background="Green" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Minimum="0" Maximum="100" Interval="10">
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="60" Background="Green" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

Pattern 2: Vertical Temperature Gauge

模式2：垂直温度仪表盘

xml

<gauge:SfLinearGauge Orientation="Vertical">
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Minimum="-60" Maximum="60" Interval="20">
            <gauge:LinearAxis.Ranges>
                <gauge:LinearGaugeRange StartValue="-60" EndValue="0" Background="Blue" />
                <gauge:LinearGaugeRange StartValue="0" EndValue="30" Background="Orange" />
                <gauge:LinearGaugeRange StartValue="30" EndValue="60" Background="Red" />
            </gauge:LinearAxis.Ranges>
            
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="25" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

xml

<gauge:SfLinearGauge Orientation="Vertical">
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Minimum="-60" Maximum="60" Interval="20">
            <gauge:LinearAxis.Ranges>
                <gauge:LinearGaugeRange StartValue="-60" EndValue="0" Background="Blue" />
                <gauge:LinearGaugeRange StartValue="0" EndValue="30" Background="Orange" />
                <gauge:LinearGaugeRange StartValue="30" EndValue="60" Background="Red" />
            </gauge:LinearAxis.Ranges>
            
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="25" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

Pattern 3: Gauge with Multiple Pointers

模式3：多指针仪表盘

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Maximum="140" Interval="10">
            <!-- Bar pointer for current value -->
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="90" />
            </gauge:LinearAxis.BarPointers>
            
            <!-- Shape pointer for threshold -->
            <gauge:LinearAxis.MarkerPointers>
                <gauge:LinearShapePointer Value="90"
                                          VerticalAnchor="End"
                                          OffsetPoint="0,-8" />
                
                <!-- Content pointer for label -->
                <gauge:LinearContentPointer Value="90"
                                            VerticalAnchor="End"
                                            OffsetPoint="0,-28">
                    <gauge:LinearContentPointer.Content>
                        <TextBlock Text="90%" />
                    </gauge:LinearContentPointer.Content>
                </gauge:LinearContentPointer>
            </gauge:LinearAxis.MarkerPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Maximum="140" Interval="10">
            <!-- 条形指针展示当前值 -->
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="90" />
            </gauge:LinearAxis.BarPointers>
            
            <!-- 形状指针标记阈值 -->
            <gauge:LinearAxis.MarkerPointers>
                <gauge:LinearShapePointer Value="90"
                                          VerticalAnchor="End"
                                          OffsetPoint="0,-8" />
                
                <!-- 内容指针展示标签 -->
                <gauge:LinearContentPointer Value="90"
                                            VerticalAnchor="End"
                                            OffsetPoint="0,-28">
                    <gauge:LinearContentPointer.Content>
                        <TextBlock Text="90%" />
                    </gauge:LinearContentPointer.Content>
                </gauge:LinearContentPointer>
            </gauge:LinearAxis.MarkerPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

Pattern 4: Interactive Gauge with Draggable Pointer

模式4：带可拖拽指针的交互式仪表盘

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis ShowTicks="False"
                          AxisLineStroke="CornflowerBlue"
                          AxisLineStrokeThickness="30">
            <gauge:LinearAxis.MarkerPointers>
                <gauge:LinearShapePointer Value="30"
                                          IsInteractive="True"
                                          OffsetPoint="0,-15"
                                          VerticalAnchor="End"
                                          Fill="Indigo"
                                          ValueChanged="OnPointerValueChanged" />
            </gauge:LinearAxis.MarkerPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

csharp

private void OnPointerValueChanged(object sender, ValueChangedEventArgs e)
{
    // Handle value change
    double newValue = e.NewValue;
}

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis ShowTicks="False"
                          AxisLineStroke="CornflowerBlue"
                          AxisLineStrokeThickness="30">
            <gauge:LinearAxis.MarkerPointers>
                <gauge:LinearShapePointer Value="30"
                                          IsInteractive="True"
                                          OffsetPoint="0,-15"
                                          VerticalAnchor="End"
                                          Fill="Indigo"
                                          ValueChanged="OnPointerValueChanged" />
            </gauge:LinearAxis.MarkerPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

csharp

private void OnPointerValueChanged(object sender, ValueChangedEventArgs e)
{
    // 处理数值变化
    double newValue = e.NewValue;
}

Pattern 5: Gauge with Color-Coded Ranges

模式5：带颜色编码范围的仪表盘

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Maximum="140" Interval="10">
            <gauge:LinearAxis.Ranges>
                <gauge:LinearGaugeRange StartValue="0" EndValue="50" Background="Red" />
                <gauge:LinearGaugeRange StartValue="50" EndValue="100" Background="Orange" />
                <gauge:LinearGaugeRange StartValue="100" EndValue="140" Background="Green" />
            </gauge:LinearAxis.Ranges>
            
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="90" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Maximum="140" Interval="10">
            <gauge:LinearAxis.Ranges>
                <gauge:LinearGaugeRange StartValue="0" EndValue="50" Background="Red" />
                <gauge:LinearGaugeRange StartValue="50" EndValue="100" Background="Orange" />
                <gauge:LinearGaugeRange StartValue="100" EndValue="140" Background="Green" />
            </gauge:LinearAxis.Ranges>
            
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="90" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

Pattern 6: Animated Pointer Updates

模式6：动画指针更新

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Interval="10">
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="60"
                                  EnableAnimation="True"
                                  AnimationDuration="1500">
                    <gauge:BarPointer.AnimationEasingFunction>
                        <CircleEase EasingMode="EaseOut" />
                    </gauge:BarPointer.AnimationEasingFunction>
                </gauge:BarPointer>
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Interval="10">
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="60"
                                  EnableAnimation="True"
                                  AnimationDuration="1500">
                    <gauge:BarPointer.AnimationEasingFunction>
                        <CircleEase EasingMode="EaseOut" />
                    </gauge:BarPointer.AnimationEasingFunction>
                </gauge:BarPointer>
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

Pattern 7: Gradient Bar Pointer

模式7：渐变条形指针

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="40">
                    <gauge:BarPointer.GradientStops>
                        <gauge:GaugeGradientStop Value="0" Color="#FFCC2B5E" />
                        <gauge:GaugeGradientStop Value="40" Color="#FF753A88" />
                    </gauge:BarPointer.GradientStops>
                </gauge:BarPointer>
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="40">
                    <gauge:BarPointer.GradientStops>
                        <gauge:GaugeGradientStop Value="0" Color="#FFCC2B5E" />
                        <gauge:GaugeGradientStop Value="40" Color="#FF753A88" />
                    </gauge:BarPointer.GradientStops>
                </gauge:BarPointer>
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

Pattern 8: ViewModel Data Binding

模式8：ViewModel数据绑定

csharp

public class GaugeViewModel : INotifyPropertyChanged
{
    private double currentValue;
    
    public double CurrentValue
    {
        get => currentValue;
        set
        {
            currentValue = value;
            OnPropertyChanged(nameof(CurrentValue));
        }
    }
    
    public event PropertyChangedEventHandler PropertyChanged;
    
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="{x:Bind ViewModel.CurrentValue, Mode=TwoWay}" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

csharp

public class GaugeViewModel : INotifyPropertyChanged
{
    private double currentValue;
    
    public double CurrentValue
    {
        get => currentValue;
        set
        {
            currentValue = value;
            OnPropertyChanged(nameof(CurrentValue));
        }
    }
    
    public event PropertyChangedEventHandler PropertyChanged;
    
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

xml

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="{x:Bind ViewModel.CurrentValue, Mode=TwoWay}" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

Key Properties Reference

核心属性参考

Gauge Properties (SfLinearGauge)

仪表盘属性（SfLinearGauge）

Property	Type	Description
`Axis`	LinearAxis	Gets or sets the linear axis configuration
`IsInversed`	bool	Gets or sets whether axis is inverted (right-to-left or bottom-to-top)
`IsMirrored`	bool	Gets or sets whether axis is mirrored (opposite side)
`Orientation`	Orientation	Gets or sets gauge orientation: Horizontal, Vertical

属性	类型	描述
`Axis`	LinearAxis	获取或设置线性轴配置
`IsInversed`	bool	获取或设置轴是否反转（从右到左或从下到上）
`IsMirrored`	bool	获取或设置轴是否镜像（显示在对侧）
`Orientation`	Orientation	获取或设置仪表盘方向：Horizontal（水平）、Vertical（垂直）

Axis Properties (LinearAxis)

轴属性（LinearAxis）

Property	Type	Description
`Minimum`	double	Minimum value of the axis (default: 0)
`Maximum`	double	Maximum value of the axis (default: 100)
`Interval`	double	Interval between labels on the axis
`ShowAxisLine`	bool	Show or hide the axis line (default: true)
`ShowLabels`	bool	Show or hide axis labels (default: true)
`ShowTicks`	bool	Show or hide tick marks (default: true)
`AxisLineStroke`	Brush	Color of the axis line
`AxisLineStrokeThickness`	double	Thickness of the axis line
`LabelPosition`	GaugeLabelsPosition	Label position: Inside, Outside
`LabelOffset`	double	Distance between axis line and labels
`LabelFormat`	string	Format string for labels (e.g., "c" for currency)
`TickPosition`	GaugeElementPosition	Tick position: Inside, Outside, Cross
`MajorTickLength`	double	Length of major tick marks
`MinorTickLength`	double	Length of minor tick marks
`MinorTicksPerInterval`	int	Number of minor ticks per interval
`UseRangeColorForAxis`	bool	Apply range colors to axis labels and ticks

属性	类型	描述
`Minimum`	double	轴的最小值（默认：0）
`Maximum`	double	轴的最大值（默认：100）
`Interval`	double	轴上标签之间的间隔
`ShowAxisLine`	bool	显示或隐藏轴线（默认：true）
`ShowLabels`	bool	显示或隐藏轴标签（默认：true）
`ShowTicks`	bool	显示或隐藏刻度线（默认：true）
`AxisLineStroke`	Brush	轴线的颜色
`AxisLineStrokeThickness`	double	轴线的厚度
`LabelPosition`	GaugeLabelsPosition	标签位置：Inside（内部）、Outside（外部）
`LabelOffset`	double	轴线和标签之间的距离
`LabelFormat`	string	标签的格式字符串（例如"c"代表货币格式）
`TickPosition`	GaugeElementPosition	刻度位置：Inside（内部）、Outside（外部）、Cross（跨轴）
`MajorTickLength`	double	主刻度线的长度
`MinorTickLength`	double	次刻度线的长度
`MinorTicksPerInterval`	int	每个间隔内的次刻度数量
`UseRangeColorForAxis`	bool	为轴标签和刻度应用范围颜色

Pointer Properties (Base: LinearGaugePointer)

指针属性（基类：LinearGaugePointer）

Property	Type	Description
`Value`	double	Current value of the pointer
`EnableAnimation`	bool	Enable pointer animation (default: false)
`AnimationDuration`	double	Animation duration in milliseconds (default: 1500)
`AnimationEasingFunction`	EasingFunctionBase	Easing function for animation

属性	类型	描述
`Value`	double	指针的当前值
`EnableAnimation`	bool	开启指针动画（默认：false）
`AnimationDuration`	double	动画时长（毫秒，默认：1500）
`AnimationEasingFunction`	EasingFunctionBase	动画的缓动函数

Bar Pointer Properties

条形指针属性

Property	Type	Description
`Background`	Brush	Fill color of the bar pointer
`PointerSize`	double	Thickness of the bar pointer
`CornerStyle`	CornerStyle	Corner style: BothFlat, BothCurve, StartCurve, EndCurve
`Offset`	double	Distance from axis line (positive: inside, negative: outside)
`GradientStops`	ObservableCollection	Collection of gradient stops for color transition
`Child`	UIElement	Child content displayed inside the bar pointer

属性	类型	描述
`Background`	Brush	条形指针的填充色
`PointerSize`	double	条形指针的厚度
`CornerStyle`	CornerStyle	圆角样式：BothFlat（两端平直）、BothCurve（两端圆角）、StartCurve（起点圆角）、EndCurve（终点圆角）
`Offset`	double	与轴线的距离（正数：向内，负数：向外）
`GradientStops`	ObservableCollection	颜色过渡的渐变标集合
`Child`	UIElement	显示在条形指针内部的子内容

Shape Pointer Properties (LinearShapePointer)

形状指针属性（LinearShapePointer）

Property	Type	Description
`ShapeType`	GaugeShapeType	Shape: Circle, Diamond, Triangle, InvertedTriangle, Rectangle
`ShapeHeight`	double	Height of the shape pointer
`ShapeWidth`	double	Width of the shape pointer
`Fill`	Brush	Fill color of the shape
`Stroke`	Brush	Border color of the shape
`StrokeThickness`	double	Border thickness of the shape
`HasShadow`	bool	Enable shadow effect (default: false)
`IsInteractive`	bool	Enable dragging (default: false)
`ShapeTemplate`	DataTemplate	Custom shape template
`OffsetPoint`	Point	X/Y offset from default position
`HorizontalAnchor`	GaugeAnchor	Horizontal alignment: Start, Center, End
`VerticalAnchor`	GaugeAnchor	Vertical alignment: Start, Center, End

属性	类型	描述
`ShapeType`	GaugeShapeType	形状：Circle（圆形）、Diamond（菱形）、Triangle（三角形）、InvertedTriangle（倒三角形）、Rectangle（矩形）
`ShapeHeight`	double	形状指针的高度
`ShapeWidth`	double	形状指针的宽度
`Fill`	Brush	形状的填充色
`Stroke`	Brush	形状的边框颜色
`StrokeThickness`	double	形状的边框厚度
`HasShadow`	bool	开启阴影效果（默认：false）
`IsInteractive`	bool	开启拖拽功能（默认：false）
`ShapeTemplate`	DataTemplate	自定义形状模板
`OffsetPoint`	Point	相对于默认位置的X/Y偏移
`HorizontalAnchor`	GaugeAnchor	水平对齐：Start（起点）、Center（居中）、End（终点）
`VerticalAnchor`	GaugeAnchor	垂直对齐：Start（起点）、Center（居中）、End（终点）

Content Pointer Properties (LinearContentPointer)

内容指针属性（LinearContentPointer）

Property	Type	Description
`Content`	object	Custom content (TextBlock, Image, etc.)
`OffsetPoint`	Point	X/Y offset from default position
`HorizontalAnchor`	GaugeAnchor	Horizontal alignment: Start, Center, End
`VerticalAnchor`	GaugeAnchor	Vertical alignment: Start, Center, End

属性	类型	描述
`Content`	object	自定义内容（TextBlock、Image等）
`OffsetPoint`	Point	相对于默认位置的X/Y偏移
`HorizontalAnchor`	GaugeAnchor	水平对齐：Start（起点）、Center（居中）、End（终点）
`VerticalAnchor`	GaugeAnchor	垂直对齐：Start（起点）、Center（居中）、End（终点）

Range Properties (LinearGaugeRange)

范围属性（LinearGaugeRange）

Property	Type	Description
`StartValue`	double	Start value of the range
`EndValue`	double	End value of the range
`StartWidth`	double	Width at range start
`MidWidth`	double	Width at range middle (optional)
`EndWidth`	double	Width at range end
`Background`	Brush	Fill color of the range
`RangePosition`	GaugeElementPosition	Position: Inside, Outside, Cross
`GradientStops`	ObservableCollection	Collection of gradient stops for color transition
`Child`	UIElement	Child content displayed inside the range

属性	类型	描述
`StartValue`	double	范围的起始值
`EndValue`	double	范围的结束值
`StartWidth`	double	范围起点的宽度
`MidWidth`	double	范围中点的宽度（可选）
`EndWidth`	double	范围终点的宽度
`Background`	Brush	范围的填充色
`RangePosition`	GaugeElementPosition	位置：Inside（内部）、Outside（外部）、Cross（跨轴）
`GradientStops`	ObservableCollection	颜色过渡的渐变标集合
`Child`	UIElement	显示在范围内部的子内容

Common Use Cases

常见使用场景

Temperature Gauge for Weather App

天气应用的温度仪表盘

Create vertical temperature gauges displaying current temperature with color-coded ranges (blue for cold, orange for moderate, red for hot) and animated pointer transitions.

创建垂直温度仪表盘，通过颜色编码范围展示当前温度（蓝色代表寒冷、橙色代表适宜、红色代表炎热），并支持动画指针过渡效果。

Battery Level Indicator

电量指示器

Build horizontal battery level gauges with green/yellow/red ranges, bar pointers showing charge level, and content pointers displaying percentage text.

构建水平电量仪表盘，设置绿/黄/红电量范围，用条形指针展示充电水平，内容指针展示电量百分比文本。

Speed Meter for Vehicle Dashboard

车辆仪表盘的速度表

Implement horizontal or vertical speed gauges with tick marks every 10 units, shape pointers for current speed, and range indicators for speed limits.

实现水平或垂直速度仪表盘，每10单位设置一个刻度，用形状指针展示当前速度，范围指示器展示速度限制。

Progress Bar with Percentage

带百分比的进度条

Create progress indicators using bar pointers with rounded corners, child content displaying percentage text, and smooth animations as values update.

使用圆角条形指针创建进度指示器，子内容展示百分比文本，数值更新时支持平滑动画。

Pressure Gauge for Industrial Monitoring

工业监控的压力仪表盘

Design pressure gauges with custom axis ranges, multiple ranges for safe/warning/danger zones, and interactive pointers for threshold adjustment.

设计压力仪表盘，支持自定义轴范围，多范围标记安全/警告/危险区域，交互式指针支持阈值调整。

Volume Control Slider

音量控制滑块

Build interactive volume controls using horizontal gauges with draggable shape pointers, custom axis styling, and value change events for audio level adjustment.

使用水平仪表盘构建交互式音量控件，支持拖拽形状指针，自定义轴样式，通过数值变化事件调整音频等级。

Data Analytics Dashboard

数据分析仪表盘

Create dashboard panels with multiple linear gauges showing KPIs, each with different orientations, color schemes, and ranges for performance visualization.

创建包含多个线性仪表盘的仪表盘面板，每个仪表盘支持不同方向、配色方案和范围，用于性能数据可视化。

System Resource Monitor

系统资源监视器

Implement CPU/memory/disk usage gauges with animated bar pointers, gradient fills showing resource consumption, and real-time value updates.

Next Steps: Read the reference documentation above based on what you need to implement. Start with getting-started.md for initial setup, then explore specific features as needed.

实现CPU/内存/磁盘使用率仪表盘，支持动画条形指针，渐变填充展示资源消耗情况，支持实时数值更新。

后续步骤： 根据你需要实现的功能阅读上方参考文档，初始配置可先阅读getting-started.md，后续按需探索特定功能。