.Net Maui Layout Controls Stacklayout Grid Complete Guide

Example 1: Using a StackLayout

Objective: Create a simple interface with a vertical StackLayout containing three labels and a button.

1. Create a new .NET MAUI project:

   • Open Visual Studio.
   • Create a new project and select ".NET MAUI App".
   • Name your project and click "Create".

2. Modify the MainPage.xaml file:

   • Open MainPage.xaml.

3. Add the StackLayout and its children:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="MauiApp1.MainPage"
                Title="StackLayout Example">
   
       <StackLayout Margin="20">
           <Label Text="Welcome to .NET MAUI!" 
                  FontSize="Title" 
                  HorizontalOptions="Center" 
                  VerticalOptions="CenterAndExpand"/>
   
           <Label Text="This is a simple example of a StackLayout." 
                  FontSize="Medium" 
                  HorizontalOptions="Center" 
                  VerticalOptions="Start"/>
   
           <Button Text="Click Me" 
                   HorizontalOptions="Center" 
                   VerticalOptions="EndAndExpand"/>
       </StackLayout>
   </ContentPage>
   

4. Explanation:

   • StackLayout places its child elements either horizontally or vertically. In this example, we are stacking them vertically (default behavior).
   • Each Label and Button has the HorizontalOptions set to Center, so they align in the middle horizontally.
   • The first Label uses VerticalOptions="CenterAndExpand" which expands it to take up remaining space while centering it vertically within the parent.
   • The second Label uses VerticalOptions="Start" which aligns it at the top within the available space.
   • The Button uses VerticalOptions="EndAndExpand" which pushes it to the bottom while taking up the remaining space.

5. Run the application:

   • Click on the run button in Visual Studio to execute the application.
   • You should see three centered elements in a single column.

Example 2: Using a Grid

Objective: Create a more complex interface with a Grid that contains two rows and three columns, demonstrating various alignment and spacing options.

1. Modify the MainPage.xaml file:

   • Open MainPage.xaml.

2. Add the grid and populate it:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="MauiApp1.MainPage"
                Title="Grid Example">
   
       <Grid Margin="20" RowSpacing="15" ColumnSpacing="5">
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="*"/>
           </Grid.RowDefinitions>
   
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="*"/>
               <ColumnDefinition Width="*"/>
               <ColumnDefinition Width="*"/>
           </Grid.ColumnDefinitions>
   
           <Label Grid.Row="0" Grid.Column="0" Text="First Name:" 
                  HorizontalTextAlignment="End" 
                  VerticalTextAlignment="Center"/>
           <Entry Grid.Row="0" Grid.Column="1" Placeholder="Enter First Name"/>
   
           <Label Grid.Row="0" Grid.Column="2" Text="Last Name:" 
                  HorizontalTextAlignment="End" 
                  VerticalTextAlignment="Center"/>
   
           <Entry Grid.Row="1" Grid.Column="0" Placeholder="Enter First Name"/>
   
           <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" 
                  Text="This is an entry field for Last Name." 
                  VerticalTextAlignment="Center" 
                  HorizontalTextAlignment="Center"/>
       </Grid>
   </ContentPage>
   

3. Explanation:

   • The Grid is divided into two rows and three columns.
   • The first row (Grid.Row="0") has two cells with labels and entries for First Name and Last Name.
     • The first label is aligned to the right and vertically centered using HorizontalTextAlignment="End" and VerticalTextAlignment="Center".
     • There’s an entry field next to the First Name label where users can type their first name.
     • The last name label is also aligned to the right and vertically centered.
   • The second row (Grid.Row="1") occupies the entire width of the first column and includes another entry field.
   • Below the second entry field, there’s a third label spanning across two columns (Grid.ColumnSpan="2") displaying instructional text.
   • The RowSpacing and ColumnSpacing control the amount of space between the grid cells.

4. Run the application:

   • Click on the run button in Visual Studio to execute the application.
   • You should see a two-row layout with three columns. Each label and entry takes up appropriate spaces based on the properties provided.

Full Code Review

StackLayout Example Code: