--- title: "Introducing StepProgressBar for Xamarin.Forms" published_at: "2019-07-22T11:00:51+00:00" modified_at: "2025-03-20T10:14:09+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-step-progress-bar-for-xamarin-forms" excerpt: "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..." taxonomy_category: - "Desktop" - "Development" - "Essential Studio" - "What's new" - "Xamarin" taxonomy_post_tag: - "New Controls" - "What's New" - "Xamarin.Forms" --- # Introducing StepProgressBar for Xamarin.Forms [Dilli Babu N](https://www.syncfusion.com/blogs/author/dillibabun) ![Xamarin Forms Step Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2019/07/Xamarin-Forms-Step-Progress-Bar.jpg) We are happy to introduce the [Xamarin.Forms StepProgressBar component](https://www.syncfusion.com/xamarin-ui-controls/xamarin-stepprogressbar) in [Essential Studio® for Xamarin.Forms 2019, Vol.2](https://www.syncfusion.com/forums/145843/essential-studio-2019-volume-2-release-v17-2-0-34-is-available-for-download) . 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](https://docs.microsoft.com/en-us/xamarin/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](https://blog.syncfusion.com/wp-content/uploads/2019/07/StepProgressBar-Control-Overview.png) *Step Progress Bar Control Overview* ## Orientation Since a multi-step process can progress in a horizontal or vertical direction, we have provided orientation support for both.![Horizontal StepProgressBar Control](https://blog.syncfusion.com/wp-content/uploads/2019/07/Horizontal-StepProgressBar-Control.png) *Horizontal Step Progress Bar Control* ![Vertical StepProgressBar Control](https://blog.syncfusion.com/wp-content/uploads/2019/07/Vertical-StepProgressBar-Control.png) *Vertical Step Progress Bar Control* ## Status 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](https://blog.syncfusion.com/wp-content/uploads/2019/07/Steps-in-Not-Started-Status.gif) *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](https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.formattedstring?view=xamarin-forms) class can be provided as an input for both descriptions. You can customize these descriptions with different formatting styles.![Step Descriptions](https://blog.syncfusion.com/wp-content/uploads/2019/07/Step-Descriptions.png) *Step Descriptions* ## Marker shape The shape of a step marker can be a circle or a square.![Step Markers](https://blog.syncfusion.com/wp-content/uploads/2019/07/Step-Markers.jpg) *Step Markers* ## Content type You can customize the step content with numbers, ticks, crosses, dots or images.![Step Content](https://blog.syncfusion.com/wp-content/uploads/2019/07/Step-Content.png) *Step Content* ## Style 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](https://blog.syncfusion.com/wp-content/uploads/2019/07/Style-applied-to-Step-Progress-Bar.png) *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](https://www.nuget.org/packages/Syncfusion.Xamarin.SfProgressBar/)** NuGet package from [nuget.org](https://www.nuget.org/) . To learn more about ** SfStepProgressBar**, refer to “Adding SfStepProgressBar reference” in [Syncfusion’s documentation](https://help.syncfusion.com/xamarin/stepprogressbar/gettingstarted#adding-sfstepprogressbar-reference) . 3. When deploying the application in UWP and iOS, please follow the steps provided in “[Launching the application on each platform with StepProgressBar](https://help.syncfusion.com/xamarin/stepprogressbar/gettingstarted#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. ``` xmlns:progressBar="clr-namespace:Syncfusion.XForms.ProgressBar;assembly=Syncfusion.SfProgressBar.XForms" ``` Then, initialize **SfStepProgressBar** as shown in the following code. ``` ``` And, that’s how to add the StepProgressBar control to an application.![Step Progress Bar](https://blog.syncfusion.com/wp-content/uploads/2019/07/Step-Progress-Bar.jpg) You can download the getting started sample from this [GitHub location](https://github.com/syncfusion/xamarin-demos/tree/master/Forms/StepProgressBar) . ## Conclusion In this blog post, we had a quick overview of the Xamarin.Forms [step progress indicator](https://www.syncfusion.com/xamarin-ui-controls/xamarin-stepprogressbar) that is available in the [2019 Volume 2 release](https://www.syncfusion.com/forums/145843/essential-studio-2019-volume-2-release-v17-2-0-34-is-available-for-download) . We invite you to check out all our [Xamarin.Forms controls](https://www.syncfusion.com/xamarin-ui-controls/) . You can always [download our free evaluation](https://www.syncfusion.com/downloads/xamarin) to see all our controls in action. Feel free to explore our samples on [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.samplebrowser) and the [Microsoft Store](https://www.microsoft.com/en-us/p/syncfusion-essential-studio-for-xamarin/9nn069tldzf4) . To learn more about the advanced features of our Xamarin.Forms controls, refer to [our documentation](https://help.syncfusion.com/xamarin/) . 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 forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/) , or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms) . We are always happy to assist.