# Layout Mode

The RadStepProgressBar control is arranged horizontally by default which means that the steps are ordered from left to right. Additionally, the control can be arranged vertically from top to bottom. The flow direction can also be reversed - right to left or bottom to top.

## Orientation

To change the orientation of the control, set the **Orientation** property. The orientation can be **Horizontal** or **Vertical**. By default the control is horizontally orientated.

```C#
private void CreateVerticalStepProgressBar()
{
    var stepProgressBar = new RadStepProgressBar();
    stepProgressBar.Dock = DockStyle.Fill;
    stepProgressBar.Orientation = Orientation.Vertical;
    var item1 = new StepProgressItem() { FirstHeader = "Step 1", SecondHeader = "New", SecondDescription = "Unassigned" };
    var item2 = new StepProgressItem() { FirstHeader = "Step 2", SecondHeader = "InProgress", SecondDescription = "Dev" };
    var item3 = new StepProgressItem() { FirstHeader = "Step 3", SecondHeader = "ReadyForTest", SecondDescription = "Dev" };
    var item4 = new StepProgressItem() { FirstHeader = "Step 4", SecondHeader = "Testing", SecondDescription = "QA", Progress = 61, };
    var item5 = new StepProgressItem() { FirstHeader = "Step 5", SecondHeader = "Done", SecondDescription = "N/A" };
    stepProgressBar.Steps.Add(item1);
    stepProgressBar.Steps.Add(item2);
    stepProgressBar.Steps.Add(item3);
    stepProgressBar.Steps.Add(item4);
    stepProgressBar.Steps.Add(item5);
    this.Controls.Add(stepProgressBar);
}
```

```VB.NET
Private Sub CreateVerticalStepProgressBar()
    Dim stepProgressBar = New RadStepProgressBar()
    stepProgressBar.Dock = DockStyle.Fill
    stepProgressBar.Orientation = Orientation.Vertical
    Dim item1 = New StepProgressItem() With {
        .FirstHeader = "Step 1",
        .SecondHeader = "New",
        .SecondDescription = "Unassigned"
    }
    Dim item2 = New StepProgressItem() With {
        .FirstHeader = "Step 2",
        .SecondHeader = "InProgress",
        .SecondDescription = "Dev"
    }
    Dim item3 = New StepProgressItem() With {
        .FirstHeader = "Step 3",
        .SecondHeader = "ReadyForTest",
        .SecondDescription = "Dev"
    }
    Dim item4 = New StepProgressItem() With {
        .FirstHeader = "Step 4",
        .SecondHeader = "Testing",
        .SecondDescription = "QA",
        .Progress = 61
    }
    Dim item5 = New StepProgressItem() With {
        .FirstHeader = "Step 5",
        .SecondHeader = "Done",
        .SecondDescription = "N/A"
    }
    stepProgressBar.Steps.Add(item1)
    stepProgressBar.Steps.Add(item2)
    stepProgressBar.Steps.Add(item3)
    stepProgressBar.Steps.Add(item4)
    stepProgressBar.Steps.Add(item5)
    Me.Controls.Add(stepProgressBar)
End Sub
```

![WinForms RadStepProgressBar Orientation](https://www.telerik.com/products/winforms/documentation/assets/ace044b43cf8a9f3574364fc035a8777/stepprogressbar-features-layout001.png)

## Flow Direction

To change the horizontal flow direction, set the **RightToLeft** property.

```C#
private void CreateHorizontalStepProgressBar_RightToLeft()
{
    var stepProgressBar = new RadStepProgressBar();
    stepProgressBar.Dock = DockStyle.Fill;
    stepProgressBar.RightToLeft = RightToLeft.Yes;
    var item1 = new StepProgressItem() { FirstHeader = "Step 1", SecondHeader = "New", SecondDescription = "Unassigned" };
    var item2 = new StepProgressItem() { FirstHeader = "Step 2", SecondHeader = "InProgress", SecondDescription = "Dev" };
    var item3 = new StepProgressItem() { FirstHeader = "Step 3", SecondHeader = "ReadyForTest", SecondDescription = "Dev" };
    var item4 = new StepProgressItem() { FirstHeader = "Step 4", SecondHeader = "Testing", SecondDescription = "QA", Progress = 61, };
    var item5 = new StepProgressItem() { FirstHeader = "Step 5", SecondHeader = "Done", SecondDescription = "N/A" };
    stepProgressBar.Steps.Add(item1);
    stepProgressBar.Steps.Add(item2);
    stepProgressBar.Steps.Add(item3);
    stepProgressBar.Steps.Add(item4);
    stepProgressBar.Steps.Add(item5);
    this.Controls.Add(stepProgressBar);
}
```

```VB.NET
Private Sub CreateHorizontalStepProgressBar_RightToLeft()
    Dim stepProgressBar = New RadStepProgressBar()
    stepProgressBar.Dock = DockStyle.Fill
    stepProgressBar.RightToLeft = RightToLeft.Yes
    Dim item1 = New StepProgressItem() With {
        .FirstHeader = "Step 1",
        .SecondHeader = "New",
        .SecondDescription = "Unassigned"
    }
    Dim item2 = New StepProgressItem() With {
        .FirstHeader = "Step 2",
        .SecondHeader = "InProgress",
        .SecondDescription = "Dev"
    }
    Dim item3 = New StepProgressItem() With {
        .FirstHeader = "Step 3",
        .SecondHeader = "ReadyForTest",
        .SecondDescription = "Dev"
    }
    Dim item4 = New StepProgressItem() With {
        .FirstHeader = "Step 4",
        .SecondHeader = "Testing",
        .SecondDescription = "QA",
        .Progress = 61
    }
    Dim item5 = New StepProgressItem() With {
        .FirstHeader = "Step 5",
        .SecondHeader = "Done",
        .SecondDescription = "N/A"
    }
    stepProgressBar.Steps.Add(item1)
    stepProgressBar.Steps.Add(item2)
    stepProgressBar.Steps.Add(item3)
    stepProgressBar.Steps.Add(item4)
    stepProgressBar.Steps.Add(item5)
    Me.Controls.Add(stepProgressBar)
End Sub
```

![WinForms RadStepProgressBar Horizontal Flow Direction](https://www.telerik.com/products/winforms/documentation/assets/da4b333ecbfe9d0ff26a6886fde0c51d/stepprogressbar-features-layout002.png)

The same property is applicable in vertical orientation.

```C#
private void CreateVerticalStepProgressBar_RightToLeft()
{
    var stepProgressBar = new RadStepProgressBar();
    stepProgressBar.Dock = DockStyle.Fill;
    stepProgressBar.Orientation = Orientation.Vertical;
    stepProgressBar.RightToLeft = RightToLeft.Yes;
    var item1 = new StepProgressItem() { FirstHeader = "Step 1", SecondHeader = "New", SecondDescription = "Unassigned" };
    var item2 = new StepProgressItem() { FirstHeader = "Step 2", SecondHeader = "InProgress", SecondDescription = "Dev" };
    var item3 = new StepProgressItem() { FirstHeader = "Step 3", SecondHeader = "ReadyForTest", SecondDescription = "Dev" };
    var item4 = new StepProgressItem() { FirstHeader = "Step 4", SecondHeader = "Testing", SecondDescription = "QA", Progress = 61, };
    var item5 = new StepProgressItem() { FirstHeader = "Step 5", SecondHeader = "Done", SecondDescription = "N/A" };
    stepProgressBar.Steps.Add(item1);
    stepProgressBar.Steps.Add(item2);
    stepProgressBar.Steps.Add(item3);
    stepProgressBar.Steps.Add(item4);
    stepProgressBar.Steps.Add(item5);
    this.Controls.Add(stepProgressBar);
}
```

```VB.NET
Private Sub CreateVerticalStepProgressBar_RightToLeft()
    Dim stepProgressBar = New RadStepProgressBar()
    stepProgressBar.Dock = DockStyle.Fill
    stepProgressBar.Orientation = Orientation.Vertical
    stepProgressBar.RightToLeft = RightToLeft.Yes
    Dim item1 = New StepProgressItem() With {
        .FirstHeader = "Step 1",
        .SecondHeader = "New",
        .SecondDescription = "Unassigned"
    }
    Dim item2 = New StepProgressItem() With {
        .FirstHeader = "Step 2",
        .SecondHeader = "InProgress",
        .SecondDescription = "Dev"
    }
    Dim item3 = New StepProgressItem() With {
        .FirstHeader = "Step 3",
        .SecondHeader = "ReadyForTest",
        .SecondDescription = "Dev"
    }
    Dim item4 = New StepProgressItem() With {
        .FirstHeader = "Step 4",
        .SecondHeader = "Testing",
        .SecondDescription = "QA",
        .Progress = 61
    }
    Dim item5 = New StepProgressItem() With {
        .FirstHeader = "Step 5",
        .SecondHeader = "Done",
        .SecondDescription = "N/A"
    }
    stepProgressBar.Steps.Add(item1)
    stepProgressBar.Steps.Add(item2)
    stepProgressBar.Steps.Add(item3)
    stepProgressBar.Steps.Add(item4)
    stepProgressBar.Steps.Add(item5)
    Me.Controls.Add(stepProgressBar)
End Sub
```

![WinForms RadStepProgressBar Vertical Flow Direction](https://www.telerik.com/products/winforms/documentation/assets/0d49d4837786a39668b0ee3483767454/stepprogressbar-features-layout003.png)

## LayoutMode

Using the **LayoutMode** property of the RadStepProgressBar, you can control how the steps are arrange in the form. This property is an enumeration and expose the following options:

### Auto

In this mode the steps are arranged according to the specified spacing and connection lengths. In case there is not enough space, the spacing is decreased so that all steps remain visible. This is the **default value** of the **LayoutMode** property.

![WinForms RadStepProgressBar Auto](https://www.telerik.com/products/winforms/documentation/assets/07eecfb5919f1d5a1db0849aac9be2f6/stepprogressbar-features-layout004.gif)

### Absolute

In this mode the steps are always arranged according to the specified spacing and connection lengths. In case the available space cannot fit all the steps, the navigation buttons become visible.

![WinForms RadStepProgressBar Absolute](https://www.telerik.com/products/winforms/documentation/assets/748cc92b098c573de042c54fa8319e07/stepprogressbar-features-layout005.gif)

### Stretched

In this mode the step spacing is adjusted dynamically to fit at an equal distance all steps in the available space.

![WinForms RadStepProgressBar Stretched](https://www.telerik.com/products/winforms/documentation/assets/a09bc364e064529ada55d557bce0be8b/stepprogressbar-features-layout006.gif)

## See Also

* [Getting Started](https://www.telerik.com/products/winforms/documentation/controls/track-and-status-controls/stepprogressbar/getting-started)

* [Design Time](https://www.telerik.com/products/winforms/documentation/controls/track-and-status-controls/stepprogressbar/design-time)

* [Structure](https://www.telerik.com/products/winforms/documentation/controls/track-and-status-controls/stepprogressbar/structure)