DxStackLayout Class

A container that stacks its items horizontally or vertically.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxStackLayout :
    DxComponent,
    IModelWrapper<IStackLayoutModel>,
    IRequireSelfCascading

Remarks

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

Run Demo

YouTube 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:

Create a Blazor Server or Blazor WebAssembly application.
Add the <DxStackLayout>…</DxStackLayout> markup to a .razor file.
Add layout items.

API Reference

Refer to the following list for the component API reference: DxStackLayout Members.

Static Render Mode 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:

Add <Items>...</Items> into the component’s markup to define Items collection.
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.
Use the Template property to specify item content.

Razor
CSS

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>

html

.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.

razor

<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.
Razor
CSS

razor

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

<DxStackLayout class="h-500" 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;
}

css

.h-500 {
    height: 500px;
}

Troubleshooting

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

Implements

Inheritance

Object ComponentBase DxComponentBase DevExpress.Blazor.Base.DxAsyncDisposableComponent DevExpress.Blazor.Base.DxDecoratedComponent DxComponent DxStackLayout