How to set a LayoutOption in StepProgressBar
This article explains how to set a LayoutOption in the Xamarin.Forms StepProgressBar control.
StepProgressBar provides different layout options to manage the StepViews layout calculation. The following are different layout options available in StepProgressBar.
Layout option | Layout calculation |
Default | StepViews will be placed based on the description’s (FormattedText) length. |
Equal | StepViews will either occupy the maximum StepView width or the parent layout width equal to the all the StepView. |
Fill | StepViews will be placed by occupying the entire width of StepProgressBar equally for all the StepViews. |
FillAndJustify | The first and last StepView will be placed at the ends of the layout and the remaining width will be equally placed between StepViews |
Let us have a demo sample with StepProgressBar control, and we have changed the layout option of StepProgressBar.
[XAML]
.. <progressBar:SfStepProgressBar Grid.Row="0" LayoutOption="Fill" HorizontalOptions="FillAndExpand" 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:SfStepProgressBar> ..
The sample illustrating different layout options can be downloaded here.
