Skip to content

A step-by-step navigation bar that guides users to complete tasks in accordance with the process.

cs
[ContentProperty(Name = nameof(Items))]
[StyleTypedProperty(Property = nameof(ItemContainerStyle), StyleTargetType = typeof(StepBarItem))]
[TemplatePart(Name = ElementProgressBar, Type = typeof(ProgressBar))]
public class StepBar : ItemsControl

Attributes ​

Property
HeaderDisplayMode
Orientation
StepIndex
Status
ShowStepIndex
AutoSelectOnItemClick
UnderWayIcon
WaitingIcon
CompleteIcon
DisplayMode

StepBarDisplayMode ​

Property
Index
Icon

Events ​

Property
StepChanged
ItemClick

Method ​

NameDescription
Next()Jump to the next step
Prev()Jump to the previous step

Example ​

xml
<dev:StepBar>
    <dev:StepBarItem Content="Register" />
    <dev:StepBarItem Content="BasicInfo" />
    <dev:StepBarItem Content="UploadFile" />
    <dev:StepBarItem Content="Complete" />
</dev:StepBar>

Demo ​

you can run demo and see this feature.

StepBar

Released under the MIT License.