.NET MAUI : VerticalStackLayout and HorizontalStackLayout Layout using Visual Studio 2022

Labels MAUI Xamarin.Forms

This article provides an understanding of VerticalStacklayout and HorzontalStackLayout using .NET Multi-platform APP UI (MAUI), which is a cross-platform framework for creating native mobile and desktop apps with C# and XAML

A StackLayout organizes child views in a vertically oriented or horizontally one-dimensional stack, but the Microsoft team introduced VerticalStacklayout and HorzontalStackLayout same as stack layout with improved a lot more performance and avoided unnecessary layout calculations being performed. this article will show a quick demo of VerticalStacklayout and HorzontalStackLayout.

Environment Setup

I have shared a details explanation of the MAUI Development environment setup and getting started with the first MAUI application in my previous article. Microsoft MAUI team continuously releases changes, so make sure you have updated the latest visual studio 2022 preview version.

Create a new MAUI Application

You can open visual studio 2022 from your windows machine. You must follow the below 3 steps to create a new MAUI application

Step 1: Select Create a new project

Step 2: Search the MAUI project template or choose Project Type > MAUI from the dropdown.

Step 3: Provide the configuration Details as a project name, Location, and Solutions name.



The generated templates contain one project with Android, IOS, Windows, Mac and Tizen.

HorizontalStackLayout

The Xamarin forms already have StackLayout organizes child views in a one-dimensional stack, either horizontally or vertically. The HorizontalStackLayout organizes child views in a one-dimensional horizontal stack and is a more performant alternative to a StackLayout.

In this example, we have a design registration screen with 3 important sections label control, an entry box, and an error label.

Add the HorizontalStacklayout instead of Stacklayout with orientation.

Many of them asked questions like, How to align a label and entry box horizontally same line label at the start and Entry at the end? You could set VerticalOptions of that two control to Start/Centre, then the control would align horizontally .


Label, Entry, and Error label add same as Xamarin Forms Design



Once you did the design, the output looks like below

VerticalStacklayout

The VerticalStackLayout organizes child views in a one-dimensional vertical stack and is a more performant alternative to a StackLayout with a vertical. Position and size of views is based on the HeightRequest, WidthRequest, HorizontalOptions and Vertical Options. The following example we used VerticalStackLayout for designs the screen. VerticalStackLayout used for displaying your control one by one.

The LayoutOptions is set via the HorizontalOptions or VerticalOptions properties on any View. They can be set to any of the following options: Start, Center, End, Fill, StartAndExpand, CenterAndExpand, EndAndExpand, FillAndExpand and you can add the following code as per below



The layout looks like the below with 3 controls

Nested VerticalStackLayout/HorizontalStackLayout

A VerticalStackLayou and HorizontalStackLayout can be used as a parent layout that contains nested child of both objects, and other child layouts.

You can see the below example XAML for nested layout, the more the nested layouts will impact your performance., if you are trying to add multiple levels, you can try choosing the correct layout control.