Telerik UI for ASP.NET Core StackLayout Overview

The Telerik UI for ASP.NET Core StackLayout arranges its inner elements horizontally or vertically in a stack. Nesting stack layouts helps you accommodate more complex information structures into easy to navigate layouts.

The name StackLayout derives from the way this type of layout is used in mobile or WPF applications, and the component aims at making it simple to create such a layout type that you are familiar with from mobile experiences.

You can tailor the Blazor StackLayout component to perfectly align with you project by customizing its width and height, changing the styling, adding spacing between inner elements or changing the orientation from vertical to horizontal and vice versa. The orientation options provide the opportunity to align inner items to the left, right, center or to stretch them.

While the naming and code usage are similar to native applications, the StackLayout is a purely web component that utilizes HTML and modern CSS rules to achieve this layout in a web browser.

While typically used for aligning several elements in the same pattern (in a row or column), you can also use the Telerik UI for ASP.NET Core StackLayout to define more complex layouts by nesting more than one component instance with the appropriate settings. Thus, with a few lines of code, you could create common layouts such as header, footer and content rows, and split the content into several columns, all without the need to use HTML and CSS directly.

This StackLayout example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.