Implementing Syncfusion.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 Syncfusion.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