What you will learn

  • Use Grid and VerticalStackLayout effectively
  • Keep content scrollable on smaller screens
  • Apply reusable styling through ResourceDictionary
How to use this example: Start from a new .NET MAUI App project called MauiLayout with .NET 10. Use the complete file listings below, and leave other template-generated files unchanged unless the lesson explicitly says otherwise. Run the Android target on Windows.

1. Start a separate app

Create a new .NET MAUI App project named MauiLayout. Replace MainPage.xaml with the example. This project intentionally uses only XAML, so no changes to MainPage.xaml.cs are needed.

2. Lay out the interface

ScrollView lets the page scroll on smaller phones. The Grid uses ColumnDefinitions="*,Auto": the first column fills available width, while the second takes only as much space as needed. VerticalStackLayout simplifies vertically arranged fields and labels.

3. Style controls consistently

The page-level ContentPage.Resources dictionary defines a reusable Style for section headings. The cards use Border rather than the older Frame control. Try changing the margin, padding and StrokeShape values to study their effect.

4. Test different screen sizes

Run the sample on the Android emulator. Rotate the emulator and, if possible, test a smaller screen profile. Confirm that long labels do not clip and that the bottom card remains reachable by scrolling.

Complete sample code

Use the exact file names and folder locations shown below. Copy each listing into your MAUI project. The separate source files can also be downloaded individually.

MainPage.xaml
Download
<?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="MauiLayout.MainPage"
             Title="Profile">
    <ContentPage.Resources>
        <Style x:Key="SectionHeading" TargetType="Label">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="FontAttributes" Value="Bold" />
            <Setter Property="TextColor" Value="#163B5F" />
        </Style>
    </ContentPage.Resources>
    <ScrollView>
        <VerticalStackLayout Padding="22" Spacing="18">
            <Label Text="Student Profile"
                   FontSize="28" FontAttributes="Bold" />
            <Border Padding="18" BackgroundColor="#EAF5FF"
                    Stroke="#BFDDF7" StrokeShape="RoundRectangle 16">
                <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto"
                      ColumnSpacing="12" RowSpacing="6">
                    <Label Text="Alex Tan" FontSize="22" FontAttributes="Bold" />
                    <Label Grid.Column="1" Text="ACTIVE"
                           TextColor="#087C66" FontAttributes="Bold" />
                    <Label Grid.Row="1" Grid.ColumnSpan="2"
                           Text="Mobile development learner" />
                </Grid>
            </Border>
            <Label Text="Contact information"
                   Style="{StaticResource SectionHeading}" />
            <Grid ColumnDefinitions="110,*" RowDefinitions="Auto,Auto"
                  ColumnSpacing="12" RowSpacing="14">
                <Label Text="Email" />
                <Label Grid.Column="1" Text="alex@example.com" />
                <Label Grid.Row="1" Text="Course" />
                <Label Grid.Row="1" Grid.Column="1"
                       Text="Visual Studio 2026" />
            </Grid>
            <Border Padding="18" Stroke="#CCDDEE"
                    StrokeShape="RoundRectangle 16">
                <VerticalStackLayout Spacing="10">
                    <Label Text="Skills" Style="{StaticResource SectionHeading}" />
                    <Label Text="C#  •  XAML  •  .NET MAUI" />
                    <ProgressBar Progress="0.65" ProgressColor="#1779C4" />
                    <Label Text="65% learning plan completed" FontSize="12" />
                </VerticalStackLayout>
            </Border>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Common problems and solutions

  • Grid layout seems cramped: Increase the second column or use a VerticalStackLayout for narrow content.
  • Content gets cut off: Keep the ScrollView as the single parent of the main stack.

Practice exercise

Add a third card for “Learning goals” with two bullet-like Label controls.

Expected result: A scrollable profile screen renders with a structured grid and consistent headings.
← Lesson 3Lesson 5 →