{"id":"23715ee1-7223-43a6-98c6-e4030a14668d","shortId":"sBbNcz","kind":"skill","title":"syncfusion-maui-step-progressbar","tagline":"Implements Syncfusion .NET MAUI StepProgressBar (SfStepProgressBar) control. Use when implementing step progress visualization, multi-step process tracking, or sequential progress indication. This skill covers step appearance customization, step states (completed/in-progress/not-","description":"# Implementing Syncfusion .NET MAUI StepProgressBar\n\nA 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.\n\n## When to Use This Skill\n\nUse this skill when the user needs to:\n\n- Implement a step-by-step progress indicator in .NET MAUI applications\n- Display multi-step process visualization (order tracking, user registration, checkout flows)\n- Show progress through sequential stages with visual feedback\n- Customize step appearance (shapes, colors, content types, animations)\n- Handle step states: completed, in-progress, or not-started\n- Configure horizontal or vertical orientation for step display\n- Add interactive tooltips to steps for additional context\n- Implement step tapped events and status change handling\n- Support right-to-left (RTL) layouts for internationalization\n- Apply modern liquid glass effects to step progress bars\n- Create accessible step progress experiences\n\n## Component Overview\n\nThe **Syncfusion .NET MAUI StepProgressBar (SfStepProgressBar)** is a visual control that displays progress through multiple steps in a sequential process. It provides:\n\n- **Multi-step visualization**: Display 3-10+ steps with clear progression\n- **Three progress states**: Completed, In Progress, and Not Started\n- **Flexible orientation**: Horizontal or vertical layouts\n- **Rich customization**: Shapes (Circle/Square), content types (Tick/Cross/Dot/Numbering/Images), colors, sizes\n- **Text descriptions**: Primary and secondary text with formatted text support\n- **Interactive features**: Tooltips, tapped events, status change events\n- **Accessibility**: Screen reader support and inclusive design\n- **Advanced effects**: Liquid glass effect for modern UI aesthetics\n- **RTL support**: Right-to-left rendering for internationalization\n\nCommon use cases include order tracking systems, multi-page registration forms, checkout flows, onboarding tutorials, survey progress, and installation wizards.\n\n## Documentation and Navigation Guide\n\n### Getting Started\n\n📄 **Read:** [references/getting-started.md](references/getting-started.md)\n\nWhen to read: User is setting up StepProgressBar for the first time, needs installation steps, or wants a basic working example.\n\nTopics covered:\n- Installing Syncfusion.Maui.ProgressBar NuGet package\n- Registering the handler with ConfigureSyncfusionCore()\n- Adding SfStepProgressBar to XAML or C#\n- Populating items with ItemsSource and ObservableCollection\n- Setting ActiveStepIndex and ActiveStepProgressValue\n- Creating a ViewModel with StepProgressBarItem collection\n- Basic horizontal progress bar example\n\n### Descriptions and Labels\n\n📄 **Read:** [references/descriptions-and-labels.md](references/descriptions-and-labels.md)\n\nWhen to read: User needs to add text labels, customize label positioning, add images to steps, or use formatted text.\n\nTopics covered:\n- PrimaryText and SecondaryText properties\n- PrimaryFormattedText and SecondaryFormattedText for rich text\n- LabelSpacing to control space between step and text\n- LabelPosition options (Start, End, Top, Bottom)\n- ImageSource for adding images to step content\n- Font icons with FontImageSource\n- Position-specific label behaviors in horizontal/vertical modes\n\n### Orientation\n\n📄 **Read:** [references/orientation.md](references/orientation.md)\n\nWhen to read: User wants to change from horizontal to vertical layout or needs guidance on orientation options.\n\nTopics covered:\n- Horizontal orientation (default)\n- Vertical orientation\n- Setting the Orientation property\n- Visual differences between orientations\n- When to use each orientation\n\n### Customization\n\n📄 **Read:** [references/customization.md](references/customization.md)\n\nWhen to read: User needs to customize step shapes, colors, content types, animations, templates, or per-step styling.\n\nTopics covered:\n- Step shape types (Circle, Square) with ShapeType property\n- Content types (Numbering, Tick, Cross, Dot) with ContentType property\n- Animation duration with ProgressAnimationDuration\n- Progress bar background color customization\n- Custom progress track size per step with ProgressTrackSize\n- StepSettings for completed, in-progress, and not-started states\n- Background, ContentFillColor, ProgressColor, Stroke properties\n- TextStyle customization (color, font, attributes)\n- StepTemplate with DataTemplate for custom step visuals\n- DataTemplateSelector for conditional step templates\n- PrimaryTextTemplate and SecondaryTextTemplate for custom labels\n- Complete customization examples\n\n### Events\n\n📄 **Read:** [references/events.md](references/events.md)\n\nWhen to read: User needs to handle step tapped interactions or respond to step status changes.\n\nTopics covered:\n- StepTapped event for handling step tap interactions\n- StepTappedEventArgs properties\n- StepStatusChanged event for tracking status changes\n- StepStatusChangedEventArgs properties\n- Event handler implementation examples\n\n### Tooltips\n\n📄 **Read:** [references/tooltips.md](references/tooltips.md)\n\nWhen to read: User wants to add tooltips to steps, customize tooltip appearance, or use custom tooltip templates.\n\nTopics covered:\n- Enabling tooltips with ShowToolTip property\n- Setting ToolTipText on StepProgressBarItem\n- ToolTipSettings for appearance customization\n- Background, Stroke, Duration, and TextStyle properties\n- ToolTipTemplate with DataTemplate for custom tooltip designs\n- Tooltip visibility duration control\n- Custom tooltip layouts and content\n\n### Accessibility\n\n📄 **Read:** [references/accessibility.md](references/accessibility.md)\n\nWhen to read: User needs to ensure accessibility compliance or understand screen reader support.\n\nTopics covered:\n- Accessibility features overview\n- Screen reader announcement format\n- Step number, text, and status announcements\n- Inclusive design considerations\n\n### Right-to-Left Support\n\n📄 **Read:** [references/right-to-left.md](references/right-to-left.md)\n\nWhen to read: User needs to support RTL languages (Arabic, Hebrew, etc.) or mirror the layout.\n\nTopics covered:\n- FlowDirection property set to RightToLeft\n- RTL rendering behavior\n- Layout mirroring for internationalization\n\n### Liquid Glass Effect\n\n📄 **Read:** [references/liquid-glass-effect.md](references/liquid-glass-effect.md)\n\nWhen to read: User wants to apply modern liquid glass visual effects (.NET 10+, macOS 26+, iOS 26+).\n\nTopics covered:\n- SfGlassEffectView integration\n- Wrapping StepProgressBar in glass effect view\n- Setting transparent background for glass effect\n- Platform and version requirements\n- Complete implementation with gradient background","tags":["syncfusion","maui","step","progressbar","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-step-progressbar","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-step-progressbar","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add syncfusion/maui-ui-components-skills","source_repo":"https://github.com/syncfusion/maui-ui-components-skills","install_from":"skills.sh"}},"qualityScore":"0.476","qualityRationale":"deterministic score 0.48 from registry signals: · indexed on github topic:agent-skills · 53 github stars · SKILL.md body (6,938 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:56:10.424Z","embedding":null,"createdAt":"2026-04-18T22:15:49.682Z","updatedAt":"2026-04-22T00:56:10.424Z","lastSeenAt":"2026-04-22T00:56:10.424Z","tsv":"'-10':234 '10':804 '26':806,808 '3':233 'access':85,200,281,711,722,731 'activestepindex':381 'activestepprogressvalu':383 'ad':368,449 'add':165,407,413,662 'addit':171 'advanc':288 'aesthet':296 'anim':145,524,550 'announc':736,743 'appear':32,74,140,668,687 'appli':190,797 'applic':117 'arab':764 'attribut':587 'background':556,578,689,821,833 'bar':198,393,555 'basic':354,390 'behavior':462,780 'bottom':446 'c':373 'case':308 'chang':179,279,476,628,645 'checkout':128,318 'circl':536 'circle/square':257 'clear':237 'collect':389 'color':142,261,521,557,585 'common':306 'complet':149,242,569,606,829 'completed/in-progress/not-':36 'completed/in-progress/not-started':80 'complianc':723 'compon':204 'comprehens':43 'condit':597 'configur':157 'configuresyncfusioncor':367 'consider':746 'content':76,143,258,453,522,541,710 'contentfillcolor':579 'contenttyp':548 'context':172 'control':12,55,215,435,705 'cover':30,58,358,422,489,532,630,675,730,772,810 'creat':199,384 'cross':545 'custom':33,48,72,138,255,410,508,518,558,559,584,592,604,607,666,671,688,699,706 'datatempl':590,697 'datatemplateselector':595 'default':492 'descript':264,395 'design':287,701,745 'differ':500 'display':118,164,217,232 'document':327 'dot':546 'durat':551,691,704 'effect':92,194,289,292,787,802,817,824 'enabl':676 'end':444 'ensur':721 'etc':766 'event':84,176,277,280,609,632,641,648 'exampl':356,394,608,651 'experi':203 'featur':274,732 'feedback':137 'first':346 'flexibl':248 'flow':129,319 'flowdirect':773 'font':454,586 'fontimagesourc':457 'form':317 'format':270,419,737 'get':331 'glass':91,193,291,786,800,816,823 'gradient':832 'guid':44,330 'guidanc':484 'handl':77,146,180,619,634 'handler':365,649 'hebrew':765 'horizont':158,250,391,478,490 'horizontal/vertical':464 'icon':455 'imag':414,450 'imagesourc':447 'implement':6,15,37,46,106,173,650,830 'in-progress':150,570 'includ':309 'inclus':286,744 'indic':27,68,113 'instal':325,349,359 'integr':812 'interact':166,273,622,637 'internation':189,305,784 'io':807 'item':375 'itemssourc':377 'label':397,409,411,461,605 'labelposit':441 'labelspac':433 'languag':763 'layout':187,253,481,708,770,781 'left':185,302,750 'liquid':90,192,290,785,799 'maco':805 'maui':3,9,40,52,116,209 'mirror':768,782 'mode':465 'modern':191,294,798 'multi':20,63,120,229,314 'multi-pag':313 'multi-step':19,62,119,228 'multipl':220 'navig':329 'need':104,348,405,483,516,617,719,759 'net':8,39,51,115,208,803 'not-start':154,574 'nuget':361 'number':543,739 'observablecollect':379 'onboard':320 'option':82,442,487 'order':124,310 'orient':81,161,249,466,486,491,494,497,502,507 'overview':205,733 'packag':362 'page':315 'per':528,563 'per-step':527 'platform':825 'popul':374 'posit':412,459 'position-specif':458 'primari':265 'primaryformattedtext':427 'primarytext':423 'primarytexttempl':600 'process':22,65,122,225 'progress':17,26,60,67,112,131,152,197,202,218,238,240,244,323,392,554,560,572 'progressanimationdur':553 'progressbar':5 'progresscolor':580 'progresstracks':566 'properti':426,498,540,549,582,639,647,680,694,774 'provid':227 'read':333,338,398,403,467,472,509,514,610,615,653,658,712,717,752,757,788,793 'reader':283,727,735 'references/accessibility.md':713,714 'references/customization.md':510,511 'references/descriptions-and-labels.md':399,400 'references/events.md':611,612 'references/getting-started.md':334,335 'references/liquid-glass-effect.md':789,790 'references/orientation.md':468,469 'references/right-to-left.md':753,754 'references/tooltips.md':654,655 'regist':363 'registr':127,316 'render':303,779 'requir':828 'respond':624 'rich':254,431 'right':183,300,748 'right-to-left':182,299,747 'righttoleft':777 'rtl':86,186,297,762,778 'screen':282,726,734 'secondari':267 'secondaryformattedtext':429 'secondarytext':425 'secondarytexttempl':602 'sequenti':25,70,133,224 'set':341,380,495,681,775,819 'sfglasseffectview':811 'sfstepprogressbar':11,54,211,369 'shape':141,256,520,534 'shapetyp':539 'show':130 'showtooltip':679 'size':262,562 'skill':29,57,97,100 'skill-syncfusion-maui-step-progressbar' 'source-syncfusion' 'space':436 'specif':460 'squar':537 'stage':134 'start':156,247,332,443,576 'state':35,79,148,241,577 'status':178,278,627,644,742 'step':4,16,21,31,34,59,64,71,73,78,109,111,121,139,147,163,169,174,196,201,221,230,235,350,416,438,452,519,529,533,564,593,598,620,626,635,665,738 'step-by-step':108 'stepprogressbar':10,41,53,210,343,814 'stepprogressbaritem':388,684 'stepset':567 'stepstatuschang':640 'stepstatuschangedeventarg':646 'steptap':631 'steptappedeventarg':638 'steptempl':588 'stroke':581,690 'style':530 'support':87,181,272,284,298,728,751,761 'survey':322 'syncfus':2,7,38,50,207 'syncfusion-maui-step-progressbar':1 'syncfusion.maui.progressbar':360 'system':312 'tap':175,276,621,636 'templat':525,599,673 'text':263,268,271,408,420,432,440,740 'textstyl':583,693 'three':239 'tick':544 'tick/cross/dot/numbering/images':260 'time':347 'tooltip':83,167,275,652,663,667,672,677,700,702,707 'tooltipset':685 'tooltiptempl':695 'tooltiptext':682 'top':445 'topic':357,421,488,531,629,674,729,771,809 'topic-agent-skills' 'track':23,66,125,311,561,643 'transpar':820 'tutori':321 'type':144,259,523,535,542 'ui':295 'understand':725 'use':13,95,98,307,418,505,670 'user':103,126,339,404,473,515,616,659,718,758,794 'version':827 'vertic':160,252,480,493 'view':818 'viewmodel':386 'visibl':703 'visual':18,61,123,136,214,231,499,594,801 'want':352,474,660,795 'wizard':326 'work':355 'wrap':813 'xaml':371","prices":[{"id":"4c12b6c1-4a93-41d6-b865-68c52e4b720e","listingId":"23715ee1-7223-43a6-98c6-e4030a14668d","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"syncfusion","category":"maui-ui-components-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:15:49.682Z"}],"sources":[{"listingId":"23715ee1-7223-43a6-98c6-e4030a14668d","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-step-progressbar","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-step-progressbar","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:49.682Z","lastSeenAt":"2026-04-22T00:56:10.424Z"}],"details":{"listingId":"23715ee1-7223-43a6-98c6-e4030a14668d","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-step-progressbar","github":{"repo":"syncfusion/maui-ui-components-skills","stars":53,"topics":["agent-skills"],"license":null,"html_url":"https://github.com/syncfusion/maui-ui-components-skills","pushed_at":"2026-04-08T07:27:37Z","description":"Skills for Syncfusion .NET MAUI components. Enable AI-assisted development with comprehensive documentation, code examples, and best practices for 100+ UI controls including DataGrid, Charts, Scheduler, and more.","skill_md_sha":"2922237e94a6817d8e02b990b7592138fb9ce0fd","skill_md_path":"skills/syncfusion-maui-step-progressbar/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-step-progressbar"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"name":"syncfusion-maui-step-progressbar","description":"Implements Syncfusion .NET MAUI StepProgressBar (SfStepProgressBar) control. Use when implementing step progress visualization, multi-step process tracking, or sequential progress indication. This skill covers step appearance customization, step states (completed/in-progress/not-started), orientation options, tooltips, and accessibility for order tracking, registration forms, or checkout processes."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-step-progressbar"},"updatedAt":"2026-04-22T00:56:10.424Z"}}