DxStackLayout Class

A Stack Layout component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxStackLayout :
    DxControlComponent<DxStackLayout, 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 Stack Layout to a Project

To add the <DxStackLayout> component to an application, follow the steps below:

  1. Create an application. If you use Microsoft project templates, configure the application as described in this topic: Microsoft Templates.
  2. Add the <DxStackLayout>...</DxStackLayout> markup to your application.
  3. Add layout items.

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

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

  3. Use the Template property to specify item content.

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

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

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.StackLayoutJSInteropProxy>
DxControlComponent<DxStackLayout, DevExpress.Blazor.Internal.JSInterop.StackLayoutJSInteropProxy>
DxStackLayout
See Also