Appearance in WPF Step ProgressBar (SfStepProgressBar)

7 May 20217 minutes to read

You can highly customize the appearance of the Step progress bar in the following ways.

Step Shape

You can change the shape of a step marker by using the MarkerShapeType property. The default value of this property is Circle.

XAML

<Grid x:Name="grid">
    <syncfusion:SfStepProgressBar MarkerShapeType="Square" SelectedIndex="3">
        <syncfusion:StepViewItem Content="Ordered" />
        <syncfusion:StepViewItem Content="Shipped" />
        <syncfusion:StepViewItem Content="Packed" />
        <syncfusion:StepViewItem Content="Delivered" />
    </syncfusion:SfStepProgressBar>
</Grid>

C#

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        SfStepProgressBar stepProgressBar = new SfStepProgressBar();
        StepViewItem orderedStepViewItem = new StepViewItem();
        StepViewItem shippedStepViewItem = new StepViewItem();
        StepViewItem packedStepViewItem = new StepViewItem();
        StepViewItem deliveredStepViewItem = new StepViewItem();

        orderedStepViewItem.Content = "Ordered";
        shippedStepViewItem.Content = "Shipped";
        packedStepViewItem.Content = "Packed";
        deliveredStepViewItem.Content = "Delivered";

        stepProgressBar.Items.Add(orderedStepViewItem);
        stepProgressBar.Items.Add(shippedStepViewItem);
        stepProgressBar.Items.Add(packedStepViewItem);
        stepProgressBar.Items.Add(deliveredStepViewItem);

        stepProgressBar.SelectedIndex = 3;
        stepProgressBar.MarkerShapeType = MarkerShapeType.Square;

        grid.Children.Add(stepProgressBar);
    }
}

Orientation

You can change the orientation of step progressbar by using the Orientation property. The default value of this property is Horizontal.

XAML

<Grid x:Name="grid">
    <syncfusion:SfStepProgressBar Orientation="Vertical" SelectedIndex="3">
        <syncfusion:StepViewItem Content="Ordered" />
        <syncfusion:StepViewItem Content="Shipped" />
        <syncfusion:StepViewItem Content="Packed" />
        <syncfusion:StepViewItem Content="Delivered" />
    </syncfusion:SfStepProgressBar>
</Grid>

C#

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        SfStepProgressBar stepProgressBar = new SfStepProgressBar();
        StepViewItem orderedStepViewItem = new StepViewItem();
        StepViewItem shippedStepViewItem = new StepViewItem();
        StepViewItem packedStepViewItem = new StepViewItem();
        StepViewItem deliveredStepViewItem = new StepViewItem();

        orderedStepViewItem.Content = "Ordered";
        shippedStepViewItem.Content = "Shipped";
        packedStepViewItem.Content = "Packed";
        deliveredStepViewItem.Content = "Delivered";

        stepProgressBar.Items.Add(orderedStepViewItem);
        stepProgressBar.Items.Add(shippedStepViewItem);
        stepProgressBar.Items.Add(packedStepViewItem);
        stepProgressBar.Items.Add(deliveredStepViewItem);

        stepProgressBar.SelectedIndex = 3;
        stepProgressBar.Orientation = Orientation.Vertical;

        grid.Children.Add(stepProgressBar); 
    }
}

Connector Customization

You can customize the color and thickness of the Step progressbar using the following property.

•ActiveConnectorColor: Represents the color of the connector for active state.

•ConnectorColor: Represents the color of the connector for inactive state.

•ConnectorThickness: Represents the thickness of connector line that connecting neighboring step view items.

XAML

<syncfusion:SfStepProgressBar SelectedIndex="2" ActiveConnectorColor="Coral" ConnectorColor="Crimson" ConnectorThickness="4">
    <syncfusion:StepViewItem Content="Ordered" />
    <syncfusion:StepViewItem Content="Shipped" />
    <syncfusion:StepViewItem Content="Packed" />
    <syncfusion:StepViewItem Content="Delivered" />
</syncfusion:SfStepProgressBar>

C#

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        SfStepProgressBar stepProgressBar = new SfStepProgressBar();
        StepViewItem orderedStepViewItem = new StepViewItem();
        StepViewItem shippedStepViewItem = new StepViewItem();
        StepViewItem packedStepViewItem = new StepViewItem();
        StepViewItem deliveredStepViewItem = new StepViewItem();

        orderedStepViewItem.Content = "Ordered";
        shippedStepViewItem.Content = "Shipped";
        packedStepViewItem.Content = "Packed";
        deliveredStepViewItem.Content = "Delivered";

        stepProgressBar.Items.Add(orderedStepViewItem);
        stepProgressBar.Items.Add(shippedStepViewItem);
        stepProgressBar.Items.Add(packedStepViewItem);
        stepProgressBar.Items.Add(deliveredStepViewItem);

        stepProgressBar.SelectedIndex = 3;
        stepProgressBar.ActiveConnectorColor =new SolidColorBrush(Colors.Coral);
        stepProgressBar.ConnectorColor = new SolidColorBrush(Colors.Crimson);
        stepProgressBar.ConnectorThickness = 4;

        grid.Children.Add(stepProgressBar);
    }
}

MarkerClicked Event

You can get the StepViewItem values when the marker of step view item is clicked. The following example shows this.

XAML

<Syncfusion:SfStepProgressBar
    SelectedIndex="2"
    MarkerClicked="SfStepProgressBar_MarkerClicked">
    <Syncfusion:StepViewItem Content="Ordered" />
    <Syncfusion:StepViewItem Content="Packed" />
    <Syncfusion:StepViewItem Content="Shipped" />
    <Syncfusion:StepViewItem Content="Delivered" />
</Syncfusion:SfStepProgressBar>

C#

private void SfStepProgressBar_MarkerClicked(object sender, MarkerClickedEventArgs e)
{
    ItemsControl itemsControl = ItemsControl.ItemsControlFromItemContainer(e.StepViewItem);
    int index = itemsControl.ItemContainerGenerator.IndexFromContainer(e.StepViewItem);
    (sender as SfStepProgressBar).SelectedIndex = index;
}