Imagine that you want to create a tutorial in your app or just want to make the filling of a simple and boring form a much more entertaining experience. Using a “step by step” is the ideal way of keeping the user engaged but also making them follow a very streamlined process while at the same time achieving a sense of completion when the steps are over.
In this article, I’m going to show you how to achieve that by creating a custom step progress bar in Xamarin Forms.
Let’s do it step by step
1-Create the control
The control is really simple, as you can see here we have 3 properties:
- StepColor: To set the color of the Items
- Steps: Quantity of Steps we will have
- StepSelected: The actual step selected
For the UI items, I’m using Buttons and BoxViews. Updating the style of the Button according to the element that is selected.
2-Use the control
Hack
In the Android platform, there’s an issue with Buttons, the border radius doesn’t get applied,. To get around this you just have to create an empty Button Renderer.
And that’s all, you can check the full source code here:
3 Comments
This is awesome! Thank you for sharing!
This is great!
I’m trying to link the steps with content view and change by adding more properties to the control. I’m facing little issues with that.
How can I change the view displayed on content page by click on button placed in the content page ?
The control has a bindable property called Step, in the viewmodel you can create a property a binding to it.
For example public int ActualStep {get;set;}
Then you can use DataTriggers to show or not a content according the actual Step, for example: