DxStackLayout Class

A Stack Layout component.

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

public class DxStackLayout :
    DxControlComponent<StackLayoutJSInteropProxy>,
    IStackLayoutJSInteropProxyServer,
    IJSCallback,
    IModelWrapper<IStackLayoutModel>

Remarks

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

Stack Layout

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:

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.
Add the <DxStackLayout>…</DxStackLayout> markup to a .razor file.
Add layout items.

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.

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).
Use the Template property to specify item content.

Razor
CSS

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

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

Stack Layout

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

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

Stack Layout

Adaptivity

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

The code below 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;
}

Adaptive Stack Layout