syncfusion-maui-step-progressbar

Implementing .NET MAUI StepProgressBar

A comprehensive guide for implementing and customizing the Syncfusion® .NET MAUI StepProgressBar (SfStepProgressBar) control. This skill covers step progress visualization, multi-step process tracking, progress indication through sequential steps, customizing step appearance and content, handling step states (completed/in-progress/not-started), orientation options, tooltips, events, accessibility, RTL support, and the liquid glass effect.

When to Use This Skill

Use this skill when the user needs to:

• Implement a step-by-step progress indicator in .NET MAUI applications
• Display multi-step process visualization (order tracking, user registration, checkout flows)
• Show progress through sequential stages with visual feedback
• Customize step appearance (shapes, colors, content types, animations)
• Handle step states: completed, in-progress, or not-started
• Configure horizontal or vertical orientation for step display
• Add interactive tooltips to steps for additional context
• Implement step tapped events and status change handling
• Support right-to-left (RTL) layouts for internationalization
• Apply modern liquid glass effects to step progress bars
• Create accessible step progress experiences

Component Overview

The .NET MAUI StepProgressBar (SfStepProgressBar) is a visual control that displays progress through multiple steps in a sequential process. It provides:

• Multi-step visualization: Display 3-10+ steps with clear progression
• Three progress states: Completed, In Progress, and Not Started
• Flexible orientation: Horizontal or vertical layouts
• Rich customization: Shapes (Circle/Square), content types (Tick/Cross/Dot/Numbering/Images), colors, sizes
• Text descriptions: Primary and secondary text with formatted text support
• Interactive features: Tooltips, tapped events, status change events
• Accessibility: Screen reader support and inclusive design
• Advanced effects: Liquid glass effect for modern UI aesthetics
• RTL support: Right-to-left rendering for internationalization

Common use cases include order tracking systems, multi-page registration forms, checkout flows, onboarding tutorials, survey progress, and installation wizards.

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When to read: User is setting up StepProgressBar for the first time, needs installation steps, or wants a basic working example.

Topics covered:

• Installing Syncfusion.Maui.ProgressBar NuGet package
• Registering the handler with ConfigureSyncfusionCore()
• Adding SfStepProgressBar to XAML or C#
• Populating items with ItemsSource and ObservableCollection
• Setting ActiveStepIndex and ActiveStepProgressValue
• Creating a ViewModel with StepProgressBarItem collection
• Basic horizontal progress bar example

Descriptions and Labels

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

When to read: User needs to add text labels, customize label positioning, add images to steps, or use formatted text.

Topics covered:

• PrimaryText and SecondaryText properties
• PrimaryFormattedText and SecondaryFormattedText for rich text
• LabelSpacing to control space between step and text
• LabelPosition options (Start, End, Top, Bottom)
• ImageSource for adding images to step content
• Font icons with FontImageSource
• Position-specific label behaviors in horizontal/vertical modes

Orientation

📄 Read: references/orientation.md

When to read: User wants to change from horizontal to vertical layout or needs guidance on orientation options.

Topics covered:

• Horizontal orientation (default)
• Vertical orientation
• Setting the Orientation property
• Visual differences between orientations
• When to use each orientation

Customization

📄 Read: references/customization.md

When to read: User needs to customize step shapes, colors, content types, animations, templates, or per-step styling.

Topics covered:

• Step shape types (Circle, Square) with ShapeType property
• Content types (Numbering, Tick, Cross, Dot) with ContentType property
• Animation duration with ProgressAnimationDuration
• Progress bar background color customization
• Custom progress track size per step with ProgressTrackSize
• StepSettings for completed, in-progress, and not-started states
• Background, ContentFillColor, ProgressColor, Stroke properties
• TextStyle customization (color, font, attributes)
• StepTemplate with DataTemplate for custom step visuals
• DataTemplateSelector for conditional step templates
• PrimaryTextTemplate and SecondaryTextTemplate for custom labels
• Complete customization examples

Events

📄 Read: references/events.md

When to read: User needs to handle step tapped interactions or respond to step status changes.

Topics covered:

• StepTapped event for handling step tap interactions
• StepTappedEventArgs properties
• StepStatusChanged event for tracking status changes
• StepStatusChangedEventArgs properties
• Event handler implementation examples

Tooltips

📄 Read: references/tooltips.md

When to read: User wants to add tooltips to steps, customize tooltip appearance, or use custom tooltip templates.

Topics covered:

• Enabling tooltips with ShowToolTip property
• Setting ToolTipText on StepProgressBarItem
• ToolTipSettings for appearance customization
• Background, Stroke, Duration, and TextStyle properties
• ToolTipTemplate with DataTemplate for custom tooltip designs
• Tooltip visibility duration control
• Custom tooltip layouts and content

Accessibility

📄 Read: references/accessibility.md

When to read: User needs to ensure accessibility compliance or understand screen reader support.

Topics covered:

• Accessibility features overview
• Screen reader announcement format
• Step number, text, and status announcements
• Inclusive design considerations

Right-to-Left Support

📄 Read: references/right-to-left.md

When to read: User needs to support RTL languages (Arabic, Hebrew, etc.) or mirror the layout.

Topics covered:

• FlowDirection property set to RightToLeft
• RTL rendering behavior
• Layout mirroring for internationalization

Liquid Glass Effect

📄 Read: references/liquid-glass-effect.md

When to read: User wants to apply modern liquid glass visual effects (.NET 10+, macOS 26+, iOS 26+).

Topics covered:

• SfGlassEffectView integration
• Wrapping StepProgressBar in glass effect view
• Setting transparent background for glass effect
• Platform and version requirements
• Complete implementation with gradient background