Step Bar in Xamarin Forms

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


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:

稿源:XamGirl (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合技术 » Step Bar in Xamarin Forms

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录