syncfusion-wpf-linear-gauge（syncfusion WPF Linear gauge 前端）

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.

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

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

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

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#

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

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

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

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

Quick Start Example

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

XAML

<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

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:

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

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

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

<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

LinearScale Properties

LinearPointer Properties

LinearRange Properties

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.

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

Online API Reference:

• SfLinearGauge Class
• LinearScale Class
• LinearPointer Class
• LinearRange Class
• Syncfusion.UI.Xaml.Gauges Namespace

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.