syncfusion-wpf-linear-gauge

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Linear Gauges

线性仪表的实现

A comprehensive guide for implementing the Syncfusion WPF Linear Gauge (SfLinearGauge) control in Windows Presentation Foundation applications. The Linear Gauge displays numerical values graphically along a linear scale, making it ideal for thermometers, progress indicators, sliding meters, and value visualization in horizontal or vertical orientations.

本文是在Windows Presentation Foundation应用中实现Syncfusion WPF Linear Gauge（SfLinearGauge）控件的综合指南。线性仪表沿线性刻度以图形化方式显示数值，非常适合用于温度计、进度指示器、滑动仪表，以及横向或纵向的数值可视化场景。

When to Use This Skill

适用场景

Use this skill when you need to:

Implement SfLinearGauge in WPF applications
Create thermometer-style displays for temperature or measurement visualization
Build progress indicators with graduated scales and value markers
Visualize numerical values linearly with scales, pointers, and ranges
Create sliding meters for performance monitoring or value tracking
Display values with colored zones to indicate different value ranges
Implement horizontal or vertical gauges with customizable orientation
Add animated pointers that smoothly transition to new values
Configure multiple pointers for value comparison on a single scale
Design custom gauge layouts with flexible positioning and styling

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

在WPF应用中实现SfLinearGauge
创建用于温度或测量值可视化的温度计样式显示
构建带渐变刻度和数值标记的进度指示器
通过刻度、指针和范围以线性方式可视化数值
创建用于性能监控或数值追踪的滑动仪表
显示带颜色分区的数值以区分不同数值范围
实现可自定义布局的横向或纵向仪表
添加可平滑过渡到新数值的动画指针
在单个刻度上配置多个指针以进行数值对比
通过灵活的定位和样式设计自定义仪表布局

Component Overview

组件概述

The SfLinearGauge control measures and displays values along a linear scale in either horizontal or vertical orientation. It provides a complete gauge visualization system with:

Linear Scale - The foundation with configurable min/max values, intervals, and direction
Pointers - Bar and symbol pointers to mark specific values on the scale
Ranges - Colored sections to highlight specific value ranges
Labels - Numeric labels with formatting, prefix/postfix, and positioning options
Ticks - Major and minor tick marks to indicate scale intervals
Orientation - Horizontal (landscape) or vertical (portrait) layout support
Animation - Smooth pointer animations with configurable duration
Theming - Built-in theme support for consistent UI styling

Key capabilities:

Multiple pointer types (bar and symbol) on a single scale
Color-coded ranges for threshold visualization
Full XAML and code-behind customization
MVVM data binding support
Responsive sizing and layout
Professional gauge aesthetics

SfLinearGauge控件沿线性刻度（横向或纵向）测量并显示数值。它提供了完整的仪表可视化系统，包含以下功能：

线性刻度 - 基础组件，支持配置最小/最大值、间隔和方向
指针 - 条形指针和符号指针，用于标记刻度上的特定数值
范围 - 彩色区段，用于突出显示特定数值范围
标签 - 数值标签，支持格式化、前缀/后缀和定位设置
刻度线 - 主刻度线和次刻度线，用于指示刻度间隔
布局方向 - 支持横向（ landscape）或纵向（portrait）布局
动画 - 支持可配置时长的平滑指针动画
主题 - 内置主题支持，确保UI样式一致性

核心功能：

单个刻度支持多种指针类型（条形和符号型）
颜色编码的范围，用于阈值可视化
支持通过XAML和代码后台进行全面自定义
支持MVVM数据绑定
响应式尺寸和布局
专业的仪表视觉效果

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

When to read: Starting a new Linear Gauge implementation or first-time setup.

Covers:

Installing Syncfusion.SfGauge.WPF NuGet package
Adding assembly references (three methods)
Namespace imports in XAML and C#
Initializing an empty SfLinearGauge control
Configuring your first scale with basic properties
Adding a symbol pointer to mark values
Adding a bar pointer for progress indication
Creating colored ranges for value zones
Complete minimal working example
Applying themes with SfSkinManager

📄 文档链接： references/getting-started.md

阅读时机： 开始新的线性仪表实现或首次进行配置时。

涵盖内容：

安装Syncfusion.SfGauge.WPF NuGet包
添加程序集引用的三种方法
在XAML和C#中导入命名空间
初始化空的SfLinearGauge控件
配置第一个带基础属性的刻度
添加符号指针以标记数值
添加条形指针以指示进度
创建用于数值分区的颜色范围
完整的最小可用示例
使用SfSkinManager应用主题

Scale Configuration

刻度配置

📄 Read: references/scale-configuration.md

When to read: Configuring the scale's appearance, range, intervals, size, direction, or position.

Covers:

Understanding the MainScale property and LinearScale
Setting minimum and maximum values for scale range
Configuring intervals for label and tick spacing
Customizing scale appearance (color, borders, stroke)
Scale size customization (ScaleBarSize, ScaleBarLength)
Setting scale direction (Forward or Backward)
Scale positioning with ScaleBarPositionFactor
ElementsPositionMode for custom positioning
Auto-interval calculation
Complete code examples in XAML and C#

📄 文档链接： references/scale-configuration.md

阅读时机： 配置刻度的外观、范围、间隔、尺寸、方向或位置时。

涵盖内容：

理解MainScale属性和LinearScale
设置刻度范围的最小和最大值
配置标签和刻度线的间隔
自定义刻度外观（颜色、边框、描边）
刻度尺寸自定义（ScaleBarSize、ScaleBarLength）
设置刻度方向（正向或反向）
通过ScaleBarPositionFactor定位刻度
用于自定义定位的ElementsPositionMode
自动间隔计算
XAML和C#的完整代码示例

Pointers

指针

📄 Read: references/pointers.md

When to read: Adding pointers to mark values, implementing bar or symbol pointers, customizing pointer appearance, enabling animations, or adding multiple pointers.

Covers:

Pointer types overview (BarPointer and SymbolPointer)
Implementing bar pointers for progress/fill indication
Bar pointer customization (stroke color, thickness)
Implementing symbol pointers for value markers
Symbol pointer customization (size, shape, stroke)
Symbol pointer positioning (Above, Below, Cross)
Custom symbol pointer shapes with templates
Adding multiple pointers to a single scale
Enabling pointer animations with EnableAnimation
Controlling animation speed with AnimationDuration
Binding pointer values to data
Complete examples for each pointer type

📄 文档链接： references/pointers.md

阅读时机： 添加指针以标记数值、实现条形或符号型指针、自定义指针外观、启用动画或添加多个指针时。

涵盖内容：

指针类型概述（BarPointer和SymbolPointer）
实现用于进度/填充指示的条形指针
条形指针自定义（描边颜色、厚度）
实现用于数值标记的符号指针
符号指针自定义（尺寸、形状、描边）
符号指针定位（上方、下方、交叉）
通过模板自定义符号指针形状
在单个刻度上添加多个指针
通过EnableAnimation启用指针动画
通过AnimationDuration控制动画速度
将指针值绑定到数据
每种指针类型的完整示例

Ranges

范围

📄 Read: references/ranges.md

When to read: Highlighting value ranges with colors, creating threshold zones, adding multiple ranges, or customizing range appearance and position.

Covers:

Range overview and visual purpose
Setting StartValue and EndValue for ranges
Range customization (stroke color, width, opacity)
Variable-width ranges (StartWidth, EndWidth)
Binding range colors to ticks and labels
Range positioning with RangeOffset
RangePosition property (Above, Below)
Adding multiple ranges for color-coded zones
Common range patterns (safe/warning/danger zones)
Complete multi-range examples

📄 文档链接： references/ranges.md

阅读时机： 使用颜色突出显示数值范围、创建阈值区域、添加多个范围或自定义范围外观和位置时。

涵盖内容：

范围概述和视觉用途
设置范围的StartValue和EndValue
范围自定义（描边颜色、宽度、透明度）
可变宽度的范围（StartWidth、EndWidth）
将范围颜色绑定到刻度线和标签
通过RangeOffset定位范围
RangePosition属性（上方、下方）
添加多个范围以实现颜色编码分区
常见范围模式（安全/警告/危险区域）
完整的多范围示例

Labels and Ticks

标签与刻度线

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

When to read: Customizing scale labels, formatting label text, positioning labels, configuring tick marks, or adjusting tick intervals.

Covers:

Labels:
- Label color customization with LabelStroke
- Font customization (LabelSize, FontFamily, FontStyle)
- Label positioning (LabelPosition: Above, Below)
- Label offset for spacing control
- Adding prefix and postfix to label text
- Label visibility control
Ticks:
- Major and minor tick customization (stroke, size, thickness)
- Tick positioning (TickPosition: Above, Below, Cross)
- Configuring MinorTicksPerInterval
- Tick appearance and styling
Complete examples combining labels and ticks

📄 文档链接： references/labels-and-ticks.md

阅读时机： 自定义刻度标签、格式化标签文本、定位标签、配置刻度线或调整刻度线间隔时。

涵盖内容：

标签：
- 通过LabelStroke自定义标签颜色
- 字体自定义（LabelSize、FontFamily、FontStyle）
- 标签定位（LabelPosition：上方、下方）
- 通过标签偏移控制间距
- 为标签文本添加前缀和后缀
- 标签可见性控制
刻度线：
- 主刻度线和次刻度线自定义（描边、尺寸、厚度）
- 刻度线定位（TickPosition：上方、下方、交叉）
- 配置MinorTicksPerInterval
- 刻度线外观和样式
结合标签和刻度线的完整示例

Orientation

布局方向

📄 Read: references/orientation.md

When to read: Changing gauge orientation from horizontal to vertical or vice versa.

Covers:

Orientation property overview
Horizontal orientation (default landscape layout)
Vertical orientation (portrait layout)
Orientation use cases and considerations
Layout implications for pointers and ranges
Complete examples for both orientations

📄 文档链接： references/orientation.md

阅读时机： 在横向和纵向布局之间切换仪表方向时。

涵盖内容：

Orientation属性概述
横向布局（默认的 landscape 布局）
纵向布局（portrait 布局）
布局方向的使用场景和注意事项
布局对指针和范围的影响
两种布局方向的完整示例

Quick Start Example

快速入门示例

Here's a minimal working Linear Gauge with a scale, bar pointer, symbol pointer, and colored range:

以下是一个包含刻度、条形指针、符号指针和颜色范围的最小可用线性仪表：

XAML

xml

<Window xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf">
    <Grid>
        <gauge:SfLinearGauge>
            <gauge:SfLinearGauge.MainScale>
                <gauge:LinearScale 
                    Minimum="0" 
                    Maximum="100"
                    Interval="10"
                    ScaleBarStroke="#E0E0E0"
                    LabelStroke="#424242"
                    MajorTickStroke="Gray"
                    MajorTickSize="15"
                    MinorTickStroke="Gray"
                    MinorTickSize="7"
                    MinorTicksPerInterval="3"
                    ScaleBarSize="10"
                    ScaleBarLength="300">
                    
                    <!-- Bar Pointer -->
                    <gauge:LinearScale.Pointers>
                        <gauge:LinearPointer 
                            PointerType="BarPointer"
                            Value="65"
                            BarPointerStroke="#36D1DC"
                            BarPointerStrokeThickness="10"/>
                        
                        <!-- Symbol Pointer -->
                        <gauge:LinearPointer 
                            PointerType="SymbolPointer"
                            Value="65"
                            SymbolPointerHeight="15"
                            SymbolPointerWidth="15"
                            SymbolPointerPosition="Above"
                            SymbolPointerStroke="#5B86E5"/>
                    </gauge:LinearScale.Pointers>
                    
                    <!-- Colored Ranges -->
                    <gauge:LinearScale.Ranges>
                        <gauge:LinearRange 
                            StartValue="0" 
                            EndValue="35"
                            RangeStroke="#27BEB7"
                            StartWidth="10"
                            EndWidth="10"
                            RangeOffset="0.4"/>
                        
                        <gauge:LinearRange 
                            StartValue="35" 
                            EndValue="70"
                            RangeStroke="Orange"
                            StartWidth="10"
                            EndWidth="10"
                            RangeOffset="0.4"/>
                        
                        <gauge:LinearRange 
                            StartValue="70" 
                            EndValue="100"
                            RangeStroke="Red"
                            StartWidth="10"
                            EndWidth="10"
                            RangeOffset="0.4"/>
                    </gauge:LinearScale.Ranges>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.MainScale>
        </gauge:SfLinearGauge>
    </Grid>
</Window>

xml

<Window xmlns:gauge="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf">
    <Grid>
        <gauge:SfLinearGauge>
            <gauge:SfLinearGauge.MainScale>
                <gauge:LinearScale 
                    Minimum="0" 
                    Maximum="100"
                    Interval="10"
                    ScaleBarStroke="#E0E0E0"
                    LabelStroke="#424242"
                    MajorTickStroke="Gray"
                    MajorTickSize="15"
                    MinorTickStroke="Gray"
                    MinorTickSize="7"
                    MinorTicksPerInterval="3"
                    ScaleBarSize="10"
                    ScaleBarLength="300">
                    
                    <!-- Bar Pointer -->
                    <gauge:LinearScale.Pointers>
                        <gauge:LinearPointer 
                            PointerType="BarPointer"
                            Value="65"
                            BarPointerStroke="#36D1DC"
                            BarPointerStrokeThickness="10"/>
                        
                        <!-- Symbol Pointer -->
                        <gauge:LinearPointer 
                            PointerType="SymbolPointer"
                            Value="65"
                            SymbolPointerHeight="15"
                            SymbolPointerWidth="15"
                            SymbolPointerPosition="Above"
                            SymbolPointerStroke="#5B86E5"/>
                    </gauge:LinearScale.Pointers>
                    
                    <!-- Colored Ranges -->
                    <gauge:LinearScale.Ranges>
                        <gauge:LinearRange 
                            StartValue="0" 
                            EndValue="35"
                            RangeStroke="#27BEB7"
                            StartWidth="10"
                            EndWidth="10"
                            RangeOffset="0.4"/>
                        
                        <gauge:LinearRange 
                            StartValue="35" 
                            EndValue="70"
                            RangeStroke="Orange"
                            StartWidth="10"
                            EndWidth="10"
                            RangeOffset="0.4"/>
                        
                        <gauge:LinearRange 
                            StartValue="70" 
                            EndValue="100"
                            RangeStroke="Red"
                            StartWidth="10"
                            EndWidth="10"
                            RangeOffset="0.4"/>
                    </gauge:LinearScale.Ranges>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.MainScale>
        </gauge:SfLinearGauge>
    </Grid>
</Window>

C# Code-Behind

C# 代码后台

csharp

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

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        CreateLinearGauge();
    }
    
    private void CreateLinearGauge()
    {
        // Create gauge
        SfLinearGauge gauge = new SfLinearGauge();
        
        // Create scale
        LinearScale scale = new LinearScale
        {
            Minimum = 0,
            Maximum = 100,
            Interval = 10,
            ScaleBarStroke = new SolidColorBrush(Color.FromRgb(224, 224, 224)),
            LabelStroke = new SolidColorBrush(Color.FromRgb(66, 66, 66)),
            MajorTickStroke = new SolidColorBrush(Colors.Gray),
            MajorTickSize = 15,
            MinorTickStroke = new SolidColorBrush(Colors.Gray),
            MinorTickSize = 7,
            MinorTicksPerInterval = 3,
            ScaleBarSize = 10,
            ScaleBarLength = 300
        };
        
        // Add bar pointer
        scale.Pointers.Add(new LinearPointer
        {
            PointerType = LinearPointerType.BarPointer,
            Value = 65,
            BarPointerStroke = new SolidColorBrush(Color.FromRgb(54, 209, 220)),
            BarPointerStrokeThickness = 10
        });
        
        // Add symbol pointer
        scale.Pointers.Add(new LinearPointer
        {
            PointerType = LinearPointerType.SymbolPointer,
            Value = 65,
            SymbolPointerHeight = 15,
            SymbolPointerWidth = 15,
            SymbolPointerPosition = LinearSymbolPointersPosition.Above,
            SymbolPointerStroke = new SolidColorBrush(Color.FromRgb(91, 134, 229))
        });
        
        // Add ranges
        scale.Ranges.Add(new LinearRange
        {
            StartValue = 0,
            EndValue = 35,
            RangeStroke = new SolidColorBrush(Color.FromRgb(39, 190, 183)),
            StartWidth = 10,
            EndWidth = 10,
            RangeOffset = 0.4
        });
        
        gauge.MainScale = scale;
        this.Content = gauge;
    }
}

csharp

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

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        CreateLinearGauge();
    }
    
    private void CreateLinearGauge()
    {
        // Create gauge
        SfLinearGauge gauge = new SfLinearGauge();
        
        // Create scale
        LinearScale scale = new LinearScale
        {
            Minimum = 0,
            Maximum = 100,
            Interval = 10,
            ScaleBarStroke = new SolidColorBrush(Color.FromRgb(224, 224, 224)),
            LabelStroke = new SolidColorBrush(Color.FromRgb(66, 66, 66)),
            MajorTickStroke = new SolidColorBrush(Colors.Gray),
            MajorTickSize = 15,
            MinorTickStroke = new SolidColorBrush(Colors.Gray),
            MinorTickSize = 7,
            MinorTicksPerInterval = 3,
            ScaleBarSize = 10,
            ScaleBarLength = 300
        };
        
        // Add bar pointer
        scale.Pointers.Add(new LinearPointer
        {
            PointerType = LinearPointerType.BarPointer,
            Value = 65,
            BarPointerStroke = new SolidColorBrush(Color.FromRgb(54, 209, 220)),
            BarPointerStrokeThickness = 10
        });
        
        // Add symbol pointer
        scale.Pointers.Add(new LinearPointer
        {
            PointerType = LinearPointerType.SymbolPointer,
            Value = 65,
            SymbolPointerHeight = 15,
            SymbolPointerWidth = 15,
            SymbolPointerPosition = LinearSymbolPointersPosition.Above,
            SymbolPointerStroke = new SolidColorBrush(Color.FromRgb(91, 134, 229))
        });
        
        // Add ranges
        scale.Ranges.Add(new LinearRange
        {
            StartValue = 0,
            EndValue = 35,
            RangeStroke = new SolidColorBrush(Color.FromRgb(39, 190, 183)),
            StartWidth = 10,
            EndWidth = 10,
            RangeOffset = 0.4
        });
        
        gauge.MainScale = scale;
        this.Content = gauge;
    }
}

Common Patterns

常见模式

Thermometer Pattern

温度计模式

Create a thermometer-style gauge with vertical orientation:

xml

<gauge:SfLinearGauge Orientation="Vertical">
    <gauge:SfLinearGauge.MainScale>
        <gauge:LinearScale 
            Minimum="-20" 
            Maximum="120"
            LabelPostfix="°C"
            ScaleBarSize="15">
            <gauge:LinearScale.Pointers>
                <gauge:LinearPointer 
                    PointerType="BarPointer"
                    Value="37"
                    BarPointerStroke="Red"
                    BarPointerStrokeThickness="15"/>
            </gauge:LinearScale.Pointers>
        </gauge:LinearScale>
    </gauge:SfLinearGauge.MainScale>
</gauge:SfLinearGauge>

创建纵向布局的温度计样式仪表：

xml

<gauge:SfLinearGauge Orientation="Vertical">
    <gauge:SfLinearGauge.MainScale>
        <gauge:LinearScale 
            Minimum="-20" 
            Maximum="120"
            LabelPostfix="°C"
            ScaleBarSize="15">
            <gauge:LinearScale.Pointers>
                <gauge:LinearPointer 
                    PointerType="BarPointer"
                    Value="37"
                    BarPointerStroke="Red"
                    BarPointerStrokeThickness="15"/>
            </gauge:LinearScale.Pointers>
        </gauge:LinearScale>
    </gauge:SfLinearGauge.MainScale>
</gauge:SfLinearGauge>

Progress Indicator Pattern

进度指示器模式

Show progress with animated pointer:

xml

<gauge:LinearScale.Pointers>
    <gauge:LinearPointer 
        PointerType="BarPointer"
        Value="{Binding ProgressValue}"
        EnableAnimation="True"
        AnimationDuration="500"
        BarPointerStroke="#36D1DC"
        BarPointerStrokeThickness="12"/>
</gauge:LinearScale.Pointers>

使用动画指针显示进度：

xml

<gauge:LinearScale.Pointers>
    <gauge:LinearPointer 
        PointerType="BarPointer"
        Value="{Binding ProgressValue}"
        EnableAnimation="True"
        AnimationDuration="500"
        BarPointerStroke="#36D1DC"
        BarPointerStrokeThickness="12"/>
</gauge:LinearScale.Pointers>

Multi-Zone Value Meter Pattern

多区域数值仪表模式

Create safe/warning/danger zones:

xml

<gauge:LinearScale.Ranges>
    <!-- Safe Zone (Green) -->
    <gauge:LinearRange 
        StartValue="0" 
        EndValue="60"
        RangeStroke="Green"
        StartWidth="15"
        EndWidth="15"/>
    
    <!-- Warning Zone (Yellow) -->
    <gauge:LinearRange 
        StartValue="60" 
        EndValue="80"
        RangeStroke="Yellow"
        StartWidth="15"
        EndWidth="15"/>
    
    <!-- Danger Zone (Red) -->
    <gauge:LinearRange 
        StartValue="80" 
        EndValue="100"
        RangeStroke="Red"
        StartWidth="15"
        EndWidth="15"/>
</gauge:LinearScale.Ranges>

创建安全/警告/危险区域：

xml

<gauge:LinearScale.Ranges>
    <!-- Safe Zone (Green) -->
    <gauge:LinearRange 
        StartValue="0" 
        EndValue="60"
        RangeStroke="Green"
        StartWidth="15"
        EndWidth="15"/>
    
    <!-- Warning Zone (Yellow) -->
    <gauge:LinearRange 
        StartValue="60" 
        EndValue="80"
        RangeStroke="Yellow"
        StartWidth="15"
        EndWidth="15"/>
    
    <!-- Danger Zone (Red) -->
    <gauge:LinearRange 
        StartValue="80" 
        EndValue="100"
        RangeStroke="Red"
        StartWidth="15"
        EndWidth="15"/>
</gauge:LinearScale.Ranges>

Multiple Pointer Comparison Pattern

多指针对比模式

Compare two values on one scale:

xml

<gauge:LinearScale.Pointers>
    <!-- Current Value -->
    <gauge:LinearPointer 
        PointerType="SymbolPointer"
        Value="75"
        SymbolPointerStroke="Blue"
        SymbolPointerPosition="Above"/>
    
    <!-- Target Value -->
    <gauge:LinearPointer 
        PointerType="SymbolPointer"
        Value="90"
        SymbolPointerStroke="Green"
        SymbolPointerPosition="Below"/>
</gauge:LinearScale.Pointers>

在单个刻度上对比两个数值：

xml

<gauge:LinearScale.Pointers>
    <!-- Current Value -->
    <gauge:LinearPointer 
        PointerType="SymbolPointer"
        Value="75"
        SymbolPointerStroke="Blue"
        SymbolPointerPosition="Above"/>
    
    <!-- Target Value -->
    <gauge:LinearPointer 
        PointerType="SymbolPointer"
        Value="90"
        SymbolPointerStroke="Green"
        SymbolPointerPosition="Below"/>
</gauge:LinearScale.Pointers>

Key Properties

核心属性

SfLinearGauge Properties

SfLinearGauge 属性

Property	Type	Description
MainScale	LinearScale	The primary scale containing all gauge elements
Orientation	Orientation	Horizontal (default) or Vertical layout

属性	类型	描述
MainScale	LinearScale	包含所有仪表元素的主刻度
Orientation	Orientation	横向（默认）或纵向布局

LinearScale Properties

LinearScale 属性

Property	Type	Description
Minimum	double	Minimum value of the scale (default: 0)
Maximum	double	Maximum value of the scale (default: 100)
Interval	double	Spacing between major ticks and labels
ScaleBarStroke	Brush	Scale bar background color
ScaleBarSize	double	Scale bar thickness (height in horizontal)
ScaleBarLength	double	Scale bar length (width in horizontal)
ScaleDirection	LinearScaleDirection	Forward or Backward
Pointers	ObservableCollection	Collection of LinearPointer objects
Ranges	ObservableCollection	Collection of LinearRange objects
LabelStroke	Brush	Label text color
LabelPosition	LinearLabelsPosition	Above or Below scale
LabelPrefix	string	Text to prepend to labels
LabelPostfix	string	Text to append to labels
MajorTickStroke	Brush	Major tick color
MajorTickSize	double	Major tick length
MinorTickStroke	Brush	Minor tick color
MinorTickSize	double	Minor tick length
MinorTicksPerInterval	int	Number of minor ticks between major ticks
TickPosition	LinearTicksPosition	Above, Below, or Cross

属性	类型	描述
Minimum	double	刻度的最小值（默认：0）
Maximum	double	刻度的最大值（默认：100）
Interval	double	主刻度线和标签之间的间距
ScaleBarStroke	Brush	刻度条的背景颜色
ScaleBarSize	double	刻度条的厚度（横向布局中为高度）
ScaleBarLength	double	刻度条的长度（横向布局中为宽度）
ScaleDirection	LinearScaleDirection	正向或反向
Pointers	ObservableCollection	LinearPointer 对象的集合
Ranges	ObservableCollection	LinearRange 对象的集合
LabelStroke	Brush	标签文本的颜色
LabelPosition	LinearLabelsPosition	刻度的上方或下方
LabelPrefix	string	添加到标签前的文本
LabelPostfix	string	添加到标签后的文本
MajorTickStroke	Brush	主刻度线的颜色
MajorTickSize	double	主刻度线的长度
MinorTickStroke	Brush	次刻度线的颜色
MinorTickSize	double	次刻度线的长度
MinorTicksPerInterval	int	主刻度线之间的次刻度线数量
TickPosition	LinearTicksPosition	上方、下方或交叉

LinearPointer Properties

LinearPointer 属性

Property	Type	Description
PointerType	LinearPointerType	BarPointer or SymbolPointer
Value	double	The pointer's value on the scale
BarPointerStroke	Brush	Bar pointer color
BarPointerStrokeThickness	double	Bar pointer width
SymbolPointerStroke	Brush	Symbol pointer color
SymbolPointerHeight	double	Symbol pointer height
SymbolPointerWidth	double	Symbol pointer width
SymbolPointerPosition	LinearSymbolPointersPosition	Above, Below, or Cross
EnableAnimation	bool	Enable smooth pointer transitions
AnimationDuration	int	Animation duration in milliseconds

属性	类型	描述
PointerType	LinearPointerType	条形指针或符号指针
Value	double	指针在刻度上的数值
BarPointerStroke	Brush	条形指针的颜色
BarPointerStrokeThickness	double	条形指针的宽度
SymbolPointerStroke	Brush	符号指针的颜色
SymbolPointerHeight	double	符号指针的高度
SymbolPointerWidth	double	符号指针的宽度
SymbolPointerPosition	LinearSymbolPointersPosition	上方、下方或交叉
EnableAnimation	bool	启用平滑的指针过渡动画
AnimationDuration	int	动画时长（毫秒）

LinearRange Properties

LinearRange 属性

Property	Type	Description
StartValue	double	Range beginning value
EndValue	double	Range ending value
RangeStroke	Brush	Range color
StartWidth	double	Range width at start
EndWidth	double	Range width at end (for tapered ranges)
RangeOffset	double	Distance from scale bar
RangeOpacity	double	Range transparency (0.0 to 1.0)

属性	类型	描述
StartValue	double	范围的起始值
EndValue	double	范围的结束值
RangeStroke	Brush	范围的颜色
StartWidth	double	范围起始处的宽度
EndWidth	double	范围结束处的宽度（用于锥形范围）
RangeOffset	double	与刻度条的距离
RangeOpacity	double	范围的透明度（0.0 到 1.0）

Common Use Cases

常见应用场景

Temperature Monitoring

温度监控

Display temperature readings with color-coded ranges for normal, warning, and critical temperatures. Use vertical orientation for thermometer-style visualization.

显示温度读数，使用颜色编码范围区分正常、警告和临界温度。使用纵向布局实现温度计样式可视化。

Performance Metrics

性能指标

Track KPIs, CPU usage, memory consumption, or other performance indicators with bar pointers showing current values and ranges indicating acceptable thresholds.

追踪关键绩效指标（KPI）、CPU使用率、内存消耗或其他性能指标，通过条形指针显示当前数值，通过范围指示可接受的阈值。

Progress Tracking

进度追踪

Show completion percentage for tasks, downloads, or processes with animated bar pointers that smoothly transition as values update.

显示任务、下载或流程的完成百分比，使用可平滑过渡的动画指针，数值更新时自动变化。

Measurement Displays

测量显示

Create virtual instruments for pressure gauges, speedometers, voltmeters, or any measurement that benefits from linear scale visualization.

创建虚拟仪器，如压力计、速度表、电压表，或任何适合通过线性刻度可视化的测量场景。

Value Comparison

数值对比

Use multiple pointers to compare actual vs. target values, current vs. previous values, or multiple metrics on a single scale.

使用多个指针对比实际值与目标值、当前值与历史值，或在单个刻度上显示多个指标。

Dashboard Widgets

仪表板组件

Integrate linear gauges into dashboards as compact, visually appealing widgets for at-a-glance data monitoring.

将线性仪表集成到仪表板中，作为紧凑、视觉吸引力强的组件，用于快速数据监控。

API Documentation

API 文档

Online API Reference:

Next Steps: Navigate to the reference files above based on your implementation needs. Start with getting-started.md for initial setup, then explore specific features as required.

在线API参考：

下一步： 根据你的实现需求，导航到上述参考文档。首次设置请从 getting-started.md 开始，然后根据需要探索特定功能。