StackLayout Overview

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

Telerik UI for ASP.NET MVC Ninja image

The StackLayout is part of Telerik UI for ASP.NET MVC, 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.

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

Initializing the StackLayout

Use the Stack HtmlHelper 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>);
        })
    )

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

In this article