Layout

The StackLayout component provides the following parameters that control its appearance:

• Orientation
• Spacing
• HorizontalAlign
• VerticalAlign

    @(Html.Kendo().StackLayout()
        .Name("stacklayout")
        .Width("100%")
        .Height("100%")
        .Spacing("15px")
        .Orientation(StackLayoutOrientation.Horizontal)
        .HorizontalAlign(HorizontalAlign.Stretch)
        .VerticalAlign(VerticalAlign.Stretch)
        .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>);
        })
    )

Orientation

The Orientation configuration option controls whether the items nested inside the ASP.NET MVC StackLayout will be aligned horizontally or vertically. The configuration option takes a member of the StackLayoutOrientation enum as a parameter:

• Horizontal—By default, the items will be aligned horizontally.
• Vertical—Allows you to align the items vertically.

Spacing

The Spacing configuration controls the spacing of the elements nested inside the StackLayout component. This parameter is mapped to the gap CSS rule and accepts each value you can pass to the gap CSS rule.

HorizontalAlign

The HorizontalAlign configuration option controls the alignment of the items in the ASP.NET MVC StackLayout based on the X axis. The configuration option takes a member of the HorizontalAlign enum:

• Left
• Right
• Center
• Stretch (default)

By default, the items will be stretched, taking all the available space.

VerticalAlign

The VerticalAlign configuraiton controls the alignment of the items in the StackLayout based on the Y axis. Takes a member of the VerticalAlign enum:

• Top
• Bottom
• Center
• Stretch (default)

By default, the items will be stretched, taking all the available space.

See Also

• Overview of the StackLayout (Demo)