Skip to content
Avalonia UIKit
GitHub

Search documentation

Find components, guides and examples.

Esc
↑↓Navigate↵OpenEscClose

Theme

Choose the site's color theme.

ThemeT

System

Light

Dark

↑↓Preview↵ApplyEscCancel
Browse documentation

Stepper

New control

Numbered or icon steps joined by lines, with the current one highlighted.

ExampleInteractive
Stepper — Avalonia UIKit
Stepper demo
<uikit:Stepper SelectedIndex="1" Width="480" HorizontalAlignment="Left">
  <uikit:StepperItem Content="Order Details" />
  <uikit:StepperItem Content="Shipping" />
  <uikit:StepperItem Content="Finish" />
</uikit:Stepper>

Usage

uikit:Stepper lays out uikit:StepperItems: each is an indicator (a circle with the step's number, or its Icon) with the item's content as the label, and a line to the next step. Steps up to SelectedIndex are checked, in the primary color, and the lines after passed steps turn primary too. A click on a step's indicator or label selects it (SelectedIndex binds two-way), unless the stepper is disabled. Orientation="Vertical" runs the steps down, with the label beside the indicator; CentersSteps="True" gives every step an equal share of the width with its indicator and label centered.

ClassIndicator, line, label
xsmall8px dots without a number, 1.5px, 12px
small18px, 2px, 12px
default24px, 2px, 14px
large32px, 3px, 14px

Examples

Icon on an item replaces its number.

IconsInteractive
Stepper demo: Icons
<uikit:Stepper SelectedIndex="1" Width="480" HorizontalAlignment="Left">
  <uikit:StepperItem Content="Order Details" Icon="{StaticResource UIKit.Icon.Calendar}" />
  <uikit:StepperItem Content="Shipping" Icon="{StaticResource UIKit.Icon.Inbox}" />
  <uikit:StepperItem Content="Finish" Icon="{StaticResource UIKit.Icon.Info}" />
</uikit:Stepper>

The four sizes.

SizesInteractive
Stepper demo: Sizes
<StackPanel Spacing="24" HorizontalAlignment="Left">
  <uikit:Stepper Classes="xsmall" SelectedIndex="1" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
  <uikit:Stepper Classes="small" SelectedIndex="1" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
  <uikit:Stepper SelectedIndex="1" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
  <uikit:Stepper Classes="large" SelectedIndex="1" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
</StackPanel>

CentersSteps="True", and Orientation="Vertical".

LayoutsInteractive
Stepper demo: Layouts
<StackPanel Spacing="24" HorizontalAlignment="Left">
  <uikit:Stepper SelectedIndex="1" CentersSteps="True" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
  <uikit:Stepper SelectedIndex="1" Orientation="Vertical" Width="240" Height="200">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
</StackPanel>

Not covered

  • Nothing: the control covers the component.