syncfusion-maui-linear-gauge

$npx mdskill add syncfusion/maui-ui-components-skills/syncfusion-maui-linear-gauge

Create linear gauge visualizations with scales, pointers, and ranges.

  • Display measurements on linear scales for temperature, progress, or speed.
  • Depends on Syncfusion .NET MAUI Linear Gauge (SfLinearGauge) control.
  • Configures gauge based on data type, range, and pointer requirements.
  • Renders interactive gauges with draggable pointers and animated transitions.

SKILL.md

.github/skills/syncfusion-maui-linear-gaugeView on GitHub ↗
---
name: syncfusion-maui-linear-gauge
description: Implements Syncfusion .NET MAUI Linear Gauge (SfLinearGauge) for data visualization with scales, pointers, and ranges. Use when creating linear gauges, displaying measurements on linear scales, showing progress indicators, or building thermometer-style visualizations. Covers gauge pointer configuration, bar pointers or shape markers, draggable gauge pointers, and animated gauge transitions.
metadata:
  author: "Syncfusion Inc"
  version: "34.1.29"
---

# Implementing Linear Gauges in .NET MAUI

The Syncfusion .NET MAUI Linear Gauge (SfLinearGauge) is a powerful data visualization control for displaying values on a linear scale. Use it to create intuitive measurement displays, progress indicators, thermometer-style visualizations, and interactive slider controls in your .NET MAUI applications.

## When to Use This Skill

Use this skill when you need to:

- **Display measurements on linear scales** - Temperature, pressure, volume, speed, or any linear metric
- **Create progress indicators** - Download progress, task completion, loading states with visual feedback
- **Build interactive gauges** - User-adjustable sliders, draggable value selectors
- **Show performance ranges** - Color-coded zones (e.g., red/yellow/green performance indicators)
- **Visualize multiple data points** - Multiple pointers on the same scale for comparison
- **Implement vertical or horizontal displays** - Thermometers, fuel gauges, battery indicators
- **Create animated visualizations** - Smooth transitions when values change
- **Build mirrored gauge layouts** - RTL support or symmetric dual displays

## Component Overview

**Key Capabilities:**
- **Flexible orientation** - Vertical or horizontal layout
- **Customizable scale** - Adjustable min/max values, intervals, appearance
- **Multiple pointer types** - Bar pointers, shape markers, custom content markers
- **Visual ranges** - Color-coded zones to highlight specific value ranges
- **Interactive gestures** - Drag and swipe to change pointer values
- **Rich customization** - Labels, ticks, styling, gradients, corner styles
- **Animation support** - Smooth value transitions and loading animations
- **Mirror effect** - RTL layouts and symmetric designs

## Documentation and Navigation Guide

### Getting Started

📄 **Read:** [references/getting-started.md](references/getting-started.md)

**When to read:** First-time setup, installation, or basic implementation

Topics covered:
- Installing Syncfusion.Maui.Gauges NuGet package
- Registering Syncfusion handler in MauiProgram.cs
- Creating your first linear gauge
- Adding basic scale elements
- Adding ranges and pointers
- Complete working example
- Troubleshooting setup issues

### Scale Configuration

📄 **Read:** [references/scale-configuration.md](references/scale-configuration.md)

**When to read:** Configuring gauge scale properties, min/max values, intervals, or appearance

Topics covered:
- Default scale behavior (0-100)
- Customizing minimum and maximum values
- Setting scale intervals
- Scale appearance (thickness, fill color, edge styles)
- Orientation (vertical vs horizontal)
- Inverse scale (reversed value direction)
- Scale positioning and offset
- Common scale patterns

### Labels and Ticks

📄 **Read:** [references/labels-and-ticks.md](references/labels-and-ticks.md)

**When to read:** Customizing scale labels, formatting text, or configuring tick marks

Topics covered:
- Label positioning and alignment
- Label text formatting (number formats, custom text)
- Label styling (font, color, size)
- Label offset and visibility
- Major ticks configuration
- Minor ticks configuration
- Tick positioning, length, and style
- Hiding ticks or labels
- Complete customization examples

### Ranges

📄 **Read:** [references/ranges.md](references/ranges.md)

**When to read:** Adding visual ranges, color-coded zones, or performance indicators

Topics covered:
- Range overview and purpose
- Basic range implementation
- Range shape customization (start/mid/end width)
- Range positioning (start/end values)
- Range styling (solid fills, gradients)
- Multiple ranges on same scale
- Range positioning relative to scale
- Corner styles and appearance
- Performance zones and color coding examples

### Bar Pointer

📄 **Read:** [references/bar-pointer.md](references/bar-pointer.md)

**When to read:** Implementing bar-style pointers (filled progress bars)

Topics covered:
- Bar pointer overview
- Basic bar pointer implementation
- Setting pointer value and position
- Bar styling (fill, gradient, opacity)
- Corner styles for bars
- Bar offset and positioning
- Animation on value changes
- Multiple bar pointers
- Pointer events
- Common bar pointer patterns

### Marker Pointers

📄 **Read:** [references/marker-pointers.md](references/marker-pointers.md)

**When to read:** Adding shape markers or custom content pointers

Topics covered:
- Shape marker pointer (built-in shapes)
  - Available shapes: circle, triangle, diamond, inverted triangle, rectangle
  - Shape size, fill, and stroke customization
  - Shape positioning and offset
- Content marker pointer (custom content)
  - Using images as pointers
  - Text-based pointers
  - Custom views as pointers
  - Content alignment and positioning
- Multiple marker pointers on same scale
- Marker animation effects
- Common marker patterns and use cases

### Interaction

📄 **Read:** [references/interaction.md](references/interaction.md)

**When to read:** Enabling user interaction, drag gestures, or pointer events

Topics covered:
- Interaction overview
- Enabling IsInteractive property
- Drag gesture handling
- Swipe gesture handling
- ValueChangeStarted event
- ValueChanging event (real-time updates)
- ValueChangeCompleted event
- Constraining pointer movement
- Interactive pointer examples
- Multi-pointer interaction scenarios

### Animation and Effects

📄 **Read:** [references/animation-and-effects.md](references/animation-and-effects.md)

**When to read:** Adding animations, mirror effects, or special visual effects

Topics covered:
- Animation overview
- Enabling animation on load
- Animation duration and easing
- Pointer animation on value changes
- Range animation effects
- Mirror gauge effect (IsMirrored)
- RTL support and mirrored layouts
- Orientation changes and transitions
- Complete animation examples

More from syncfusion/maui-ui-components-skills

SkillDescription
syncfusion-maui-accordionImplements Syncfusion .NET MAUI Accordion (SfAccordion) - a vertically collapsible panel with stacked headers for expanding/collapsing content. Use when working with accordions, collapsible panels, expandable lists, employee lists with details, or FAQ sections in .NET MAUI applications. Covers AccordionItem configuration, expand modes, and grouped content display.
syncfusion-maui-ai-assistviewImplements Syncfusion .NET MAUI AI AssistView (SfAIAssistView) for AI-powered interactive chat interfaces. Use when working with AI chat interfaces, AI AssistView, SfAIAssistView, conversational UI, or chat with AI responses. Covers integrating AI services, creating chat UIs, implementing conversation flows, managing AI requests/responses, and displaying AI suggestions.
syncfusion-maui-autocompleteImplements and configure Syncfusion .NET MAUI Autocomplete (SfAutocomplete) control for intelligent text input with suggestions. Use when implementing autocomplete, autosuggest, type-ahead search, smart search, or filtered dropdowns in .NET MAUI applications. Covers data binding, filtering modes, custom search logic, AI-powered search, multi-selection with tokens, and UI customization.
syncfusion-maui-avatar-viewImplements Syncfusion .NET MAUI Avatar View (SfAvatarView) for displaying user profile pictures, initials, or group avatars. Use when working with avatar views, profile pictures, user images, initials display, profile icons, or contact images. Ideal for implementing user profile displays, contact lists, chat interfaces, or social feeds.
syncfusion-maui-backdropImplements Syncfusion .NET MAUI Backdrop Page (SfBackdropPage) with back layer and front layer surfaces. Use when working with backdrop pages, SfBackdropPage, back layer, front layer, or reveal/conceal animations. Covers backdrop navigation patterns, header icons, corner shapes, reveal height, layer state events, and liquid glass effect.
syncfusion-maui-badge-viewImplements Syncfusion .NET MAUI Badge View (SfBadgeView) control. Use when adding badge notifications, status indicators, unread counts, or notification overlays to MAUI applications. Covers SfBadgeView setup, badge text customization, position adjustments, animations, predefined symbols, and accessibility features.
syncfusion-maui-barcode-generatorImplements Syncfusion .NET MAUI Barcode Generator (SfBarcodeGenerator) for generating machine-readable barcodes. Use when working with barcodes, barcode generation, QR codes, data matrix, EAN codes, UPC codes, Code128, or Code39. This skill covers both one-dimensional (linear) and two-dimensional (matrix) barcode symbologies with extensive customization options.
syncfusion-maui-busy-indicatorImplements Syncfusion .NET MAUI Busy Indicator (SfBusyIndicator) for showing loading states, data processing, and app activity indicators. Use when displaying loading indicators, busy animations, activity spinners, or processing feedback in .NET MAUI apps. Covers busy indicator setup, animations, and visual feedback during long-running operations.
syncfusion-maui-buttonImplements and customize Syncfusion .NET MAUI Button (SfButton) control. Use when working with MAUI buttons, SfButton implementation, button customization, or visual states. Covers button icons, background images, RTL support, Liquid Glass effects, custom button views, button styling, events, and checkable buttons.
syncfusion-maui-calendarImplements and customize Syncfusion .NET MAUI Calendar (SfCalendar) control. Use when implementing calendar functionality, date selection (single, multiple, range), or calendar views (month, year, decade, century). Covers date restrictions (min/max dates, EnablePastDates, SelectableDayPredicate), calendar customization, events (ViewChanged, SelectionChanged, Tapped), and header/footer customization.