StackLayout Overview

The ASP.NET Core StackLayout is a component that easily aligns multiple elements in a vertical or horizontal order.

The StackLayout is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The StackLayout is supported only when you use Kendo UI Sass themes.

Initializing the StackLayout

Use the Stack HtmlHelper or TagHelper to add the component and set the desired options:

• Set the Width and Height for the component.
• Set the Orientation to control the layout of the component.
• Add the desired content. Each immediate child element will represent one stack layout item.

The following example demonstrates how to initialize a StackLayout component:

    @(Html.Kendo().StackLayout()
        .Name("stacklayout")
        .Width("100%")
        .Height("100%")
        .Orientation(StackLayoutOrientation.Horizontal)
        .Items(i=>{
            i.Add().Content(@<text>
                    <div style="background-color: aqua;">
                        Aqua colored stack item
                    </div>
                </text>);
            i.Add().Content(@<text>
                    <div style="background-color: cornflowerblue;">
                        Cornflowerblue colored stack item
                    </div>
                </text>);
            i.Add().Content(@<text>
                    <div style="background-color: blue;">
                        Blue colored stack item
                    </div>
                </text>);
        })
    )

    <kendo-stacklayout name="stacklayout"
        width="100%"
        height="100%"
        orientation="Horizontal">
            <container>
                <div style="background-color: aqua;">
                    Aqua colored stack item
                </div>
            </container>
            <container>
                <div style="background-color: cornflowerblue;">
                    Cornflowerblue colored stack item
                </div>
            </container>
            <container>
                <div style="background-color: blue;">
                    Blue colored stack item
                </div>
            </container>
    </kendo-stacklayout>

Functionality and Features

• Layout—To control the appearance of the component, you can use the built-in layout configuration.
• Width and Height—The Width and Height configuration properties allow you to adjust the dimensions of the StackLayout component.

Next Steps

• Configure the orientation, spacing and alignment of the StackLayout