A Stepper is a UI component that guides users through a sequential process by breaking complex tasks into smaller, manageable steps. It is commonly used for e-commerce checkouts, account registrations, and user onboarding.

This example demonstrates how to build a custom Stepper component for Blazor applications using DevExpress DxGridLayout. The component supports both horizontal and vertical orientation, and can fit your specific design requirements.

The implementation consists of two components: DxStepper and DxStep.

The DxStepper component uses DxGridLayout to manage the order and layout of steps:

• Nodes (steps) are placed in even columns/rows.
• Connectors (lines between steps) are placed in odd columns/rows.
• Labels are positioned below (horizontal orientation) or next to (vertical orientation) nodes.

DxStepper implements the following properties:

• Steps - Specifies the collection of steps.
• SelectedIndex - Returns the zero-based index of the selected step.
• SelectedIndexChanged event - Fires when the step is selected.
• Orientation - Specifies whether steps are arranged vertically or horizontally.

The DxStep component implements an individual step in the stepper. DxStep components should be declared within the Steps collection.

Each step can contain:

• Custom content (the ChildContent property)
• An icon (the IconCssClass property)
• Display text (the Text property)
• A label (the Label property)

• DxStep.razor
• DxStepper.razor
• DxStepper.razor.cs
• DxStepper.razor.css
• Index.razor
• Recipe.razor

• DxGridLayout
• DxGridLayoutItem
• DxGridLayoutItem.Template

• Form Layout for Blazor - Tabbed Wizard

(you will be redirected to DevExpress.com to submit your response)