DxStackLayout Class

A container that stacks its items horizontally or vertically.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxStackLayout :
    DxControlComponentBase,
    IModelWrapper<IStackLayoutModel>

Remarks

<DxStackLayout> allows you to stack UI elements vertically or horizontally.

Run Demo Watch Video

If your page requires a grid layout, use the DxGridLayout component.

Add a Stack Layout to a Project

Follow the steps below to add the Stack Layout component to an application:

1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
2. Add the <DxStackLayout>…</DxStackLayout> markup to a .razor file.
3. Add layout items.

.NET 8 and .NET 9 Specifics

Blazor Stack Layout is a static component and can be used in static render mode.

Items

Follow the steps below to create layout items:

1. Add <Items>...</Items> into the component’s markup to define Items collection.

2. Add DxStackLayoutItem objects to the collection. Use the Length property to specify the item length (auto, pixel, percentage, fr, etc.). You can also apply a CSS class to the whole item.

   Stack layout items whose length is specified with the fr unit are arranged last because they occupy the remaining space (space is divided between these items in proportion to the prefix number).

3. Use the Template property to specify item content.

Razor

<DxStackLayout>
    <Items>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-header stacklayout-item">
                    Item 1
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem Length="2fr">
            <Template>
                <div class="stacklayout-content stacklayout-item">
                    Item 2
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-left-side-bar stacklayout-item">
                    Item 3
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-right-side-bar stacklayout-item">
                    Item 4
                </div> 
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-footer stacklayout-item">
                    Item 5
                </div>
            </Template>
        </DxStackLayoutItem>
    </Items>
</DxStackLayout>

CSS

.stacklayout-item {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    height: 100%;
    padding-top: 10px;
    text-align: center;
    position: relative;
    z-index: 0;
}

.stacklayout-item:before {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.6;
}

.stacklayout-header:before {
    background-color: var(--bs-red);
}

.stacklayout-content:before {
    background-color: var(--bs-yellow);
}

.stacklayout-left-side-bar:before {
    background-color: var(--bs-green);
}

.stacklayout-right-side-bar:before {
    background-color: var(--bs-info);
}

.stacklayout-footer:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

Orientation

The component’s default orientation is Horizontal (layout items are arranged in a row).

To arrange items in a column, set the Orientation property to Vertical.

<DxStackLayout Orientation="Orientation.Vertical">
    <Items>
        ...
    </Items>
</DxStackLayout>

Adaptivity

You can use the DxLayoutBreakpoint component to adapt a stack layout to different screen sizes.

The following code snippet does the following:

• Creates an IsSmallScreen data field.
• Adds a DxStackLayout component and uses the IsSmallScreen field to manage the items’ orientation depending on a device screen size.
• Adds a DxLayoutBreakpoint component, binds it to the IsSmallScreen field, and specifies the device size when the breakpoint should be activated.

<DxLayoutBreakpoint DeviceSize="DeviceSize.Medium | DeviceSize.Small | DeviceSize.XSmall" @bind-IsActive="IsSmallScreen"/>

<DxStackLayout style="height:500px" Orientation="IsSmallScreen ? Orientation.Vertical : Orientation.Horizontal">
    <Items>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-header stacklayout-item">
                    Item 1
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem Length="2fr">
            <Template>
                <div class="stacklayout-content stacklayout-item">
                    Item 2
                </div>
            </Template>
        </DxStackLayoutItem>
        ...
    </Items>
</DxStackLayout>

@code {​​​​​​​
    bool IsSmallScreen;
}​​​​​​​

Troubleshooting

If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

Implements

IHandleEvent

IHandleAfterRender

IAsyncDisposable

IComponent

Inheritance

Object

ComponentBase

DevExpress.Blazor.Base.DxAsyncDisposableComponent

DevExpress.Blazor.Base.DxDecoratedComponent

DxComponentBase

DxControlComponentBase

DxStackLayout