Introducing StepProgressBar for Xamarin.Forms | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (216)Angular  (112)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (230)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (82)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (949)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (142)Chart of the week  (55)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (71)Development  (664)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (513)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (394)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (621)What's new  (334)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Xamarin Forms Step Progress Bar

Introducing StepProgressBar for Xamarin.Forms

We are happy to introduce the Xamarin.Forms StepProgressBar component in Essential Studio for Xamarin.Forms 2019, Vol.2.

Most mobile applications have tasks or operations that involve multiple steps or stages that need to be conveyed through a user interface. That’s why Syncfusion created a StepProgressBar component for Xamarin with dashing visuals and hassle-free usability.

The Xamarin.Forms StepProgressBar is a control that indicates the progress of a multiple-step (state) process, such as new-user registration or package status tracking. You can customize its appearance by changing step shape, step content, progress bar color, and more. In this blog post, we will summarize the key features of the Xamarin.Forms StepProgressBar control.StepProgressBar Control Overview

Step Progress Bar Control Overview


Since a multi-step process can progress in a horizontal or vertical direction, we have provided orientation support for both.Horizontal StepProgressBar Control

Horizontal Step Progress Bar Control

Vertical StepProgressBar Control

Vertical Step Progress Bar Control


A step has three statuses: not started, in progress, and completed. Based on the status, you can format a step with different styles, which means whenever the status of a step changes, the style of the visual will change synchronously.Steps in Not Started Status

Steps in different status

Step description

Each step in a multistep process has a different operation. To provide self-explanatory information about a step, a step description can be shown on either side. A primary description will be on the right or bottom of the step, and a secondary description will be on the left or top of the step.

We extended this feature by providing additional support where the FormattedString class can be provided as an input for both descriptions. You can customize these descriptions with different formatting styles.Step Descriptions

Step Descriptions

Marker shape

The shape of a step marker can be a circle or a square.Step Markers

Step Markers

Content type

You can customize the step content with numbers, ticks, crosses, dots or images.Step Content

Step Content


The Xamarin.Forms StepProgressBar control allows you to customize a step based on its status. Define an individual style for each status to achieve this. Marker color, marker shape type, marker content color, marker content type, marker stroke color, marker stroke width, marker size, marker content size, progress line color, and font can be defined for a style.Style applied to Step Progress Bar

Style applied to Step Progress Bar

Getting started with StepProgressBar

This section shows you, step by step, how to implement a Xamarin mobile application with the StepProgressBar Control.

  1. Create a blank Xamarin.Forms application.
  2. In the application, refer to the Xamarin.SfProgressBar NuGet package from To learn more about SfStepProgressBar, refer to “Adding SfStepProgressBar reference” in Syncfusion’s documentation.
  3. When deploying the application in UWP and iOS, please follow the steps provided in “Launching the application on each platform with StepProgressBar,” which is also found in Syncfusion’s documentation.
  4. Import the progress bar namespace in your respective page as demonstrated in the following code sample.

Then, initialize SfStepProgressBar as shown in the following code.

<progressBar:SfStepProgressBar HorizontalOptions="Center" VerticalOptions="Center">
    <progressBar:StepView PrimaryText="Step 1" />
    <progressBar:StepView PrimaryText="Step 2" />
    <progressBar:StepView PrimaryText="Step 3" />
    <progressBar:StepView PrimaryText="Step 4" Status="InProgress" />
    <progressBar:StepView PrimaryText="Step 5" />

And, that’s how to add the StepProgressBar control to an application.Step Progress Bar

You can download the getting started sample from this GitHub location.


In this blog post, we had a quick overview of the Xamarin.Forms step progress indicator that is available in the 2019 Volume 2 release. We invite you to check out all our Xamarin.Forms controls. You can always download our free evaluation to see all our controls in action. Feel free to explore our samples on Google Play and the Microsoft Store. To learn more about the advanced features of our Xamarin.Forms controls, refer to our documentation.

If you have any questions or require clarification regarding this control, please let us know in the comments section. You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist.


Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed