Basics of UI Layouts, Controls, and Navigation in .NET MAUI

A Detailed Guide to UI Layouts, Controls, and Navigation in .NET MAUI

Introduction

Creating intuitive, functional, and visually appealing user interfaces is a key aspect of mobile app development. .NET MAUI (Multi-platform App UI) empowers developers to create cross-platform applications for Android, iOS, macOS, and Windows with a single codebase. In this blog, we’ll take a detailed look at UI layouts, controls, and navigation in .NET MAUI. By mastering these concepts, you'll not only be able to build great apps but also be well-prepared to crack your next interview!

Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community.

Please, support my blog by clicking on our sponsors ad!

This blog will walk you through essential concepts, provide detailed code examples, and explain the purpose and usage of various properties. Let’s dive in!

UI Layouts in .NET MAUI

In .NET MAUI, Layouts are containers that determine how elements are arranged within an app's screen. Layouts define the position, size, and behavior of controls inside them. Below are some of the key layouts in .NET MAUI:

1. VerticalStackLayout and HorizontalStackLayout

These layouts are more optimized versions of the standard StackLayout. They allow you to arrange elements either vertically or horizontally.

VerticalStackLayout

VerticalStackLayout arranges its child elements in a vertical stack, one below the other. It’s perfect for forms or stacked content.

<VerticalStackLayout Padding="10">
    <Label Text="Enter your name" FontSize="18" />
    <Entry Placeholder="Enter your name" />
    <Button Text="Submit" Clicked="OnSubmitClicked" />
</VerticalStackLayout>
    

Padding: Adds space around the layout, ensuring the content does not touch the screen edges.

Label: Displays static text, in this case, a prompt to enter the name.

Text: Specifies the content to display.

FontSize: Defines the size of the text displayed by the label.

Entry: A user input control where the user can type text.

Placeholder: Provides a hint or guidance on what should be typed in the Entry field.

Button: A clickable control that performs an action when pressed.

Text: Sets the text label of the button.

Clicked: The event handler that gets called when the button is clicked.

HorizontalStackLayout

HorizontalStackLayout arranges its child elements in a horizontal stack, side by side. It’s useful for placing elements such as buttons or icons in a row.

<HorizontalStackLayout Spacing="10">
    <Button Text="First Button" />
    <Button Text="Second Button" />
    <Button Text="Third Button" />
</HorizontalStackLayout>
    

Spacing: Defines the space between elements inside the layout.

Button: Again, this represents a button control. Each button is spaced equally from the others, based on the Spacing property.

Which Layout to Use: VerticalStackLayout vs HorizontalStackLayout

Use VerticalStackLayout: When you need a vertical arrangement of items, such as in a form or a list.

Use HorizontalStackLayout: When you need elements arranged side by side, such as for a row of action buttons.

Table of Contents for .Net Maui

• What is .NET MAUI and why it’s important
• Applying the MVVM pattern for cleaner architecture
• Working with Renderers and Mappers
• Storing data locally using SQLite and Preferences
• Image Picker from gallery
• Sending push notifications using Firebase
• Publishing your app to Android and iOS stores
• 🌟 Explore More Topics

2. Grid Layout

The Grid layout is one of the most versatile and widely used layouts. It organizes child elements into rows and columns, making it ideal for more complex UIs like forms or data tables.

<Grid RowDefinitions="Auto, *, Auto" ColumnDefinitions="*, *">
    <Label Text="Name" Grid.Row="0" Grid.Column="0"/>
    <Entry Placeholder="Enter your name" Grid.Row="0" Grid.Column="1"/>
    <Button Text="Submit" Grid.Row="2" Grid.ColumnSpan="2"/>
</Grid>
    

RowDefinitions: Defines the rows of the grid.

Auto: The row size is determined based on the content inside it.

*: The row takes up the remaining available space.

ColumnDefinitions: Defines the columns of the grid.

*: A column that takes up the remaining available space.

Grid.Row and Grid.Column: These properties specify where an element should appear in the grid.

Grid.Row="0": The element is placed in the first row.

Grid.Column="1": The element is placed in the second column.

Grid.ColumnSpan: This property allows an element to span across multiple columns. In the example, the button spans across two columns.

3. AbsoluteLayout

AbsoluteLayout allows you to place elements at specific positions using absolute or relative coordinates. This layout is ideal for custom UIs that require precise control over placement.

<AbsoluteLayout>
    <Label Text="Top Left" AbsoluteLayout.LayoutBounds="0, 0, AutoSize, AutoSize"/>
    <Button Text="Click Me" AbsoluteLayout.LayoutBounds="0.5, 0.5, AutoSize, AutoSize"/>
</AbsoluteLayout>
    

LayoutBounds: Defines the position and size of an element.

X, Y (0, 0): Specifies the position of the element in the layout. The values are relative to the parent layout, where 0 is the start and 1 is the end.

AutoSize: The width and height will automatically adjust to the content inside the element.

4. FlexLayout

FlexLayout is similar to CSS Flexbox. It arranges child elements based on available space, making it perfect for responsive UIs.

<FlexLayout Direction="Row" JustifyContent="SpaceBetween" AlignItems="Center">
    <Button Text="Button 1"/>
    <Button Text="Button 2"/>
    <Button Text="Button 3"/>
</FlexLayout>
    

Direction: Defines the primary axis of the layout. It can be:

• Row: Items are arranged horizontally (side by side).
• Column: Items are arranged vertically.

JustifyContent: Defines how elements are spaced along the main axis (horizontal for row, vertical for column).

SpaceBetween: Spaces the items evenly, with no space at the ends.

AlignItems: Defines how items are aligned along the cross faxis (vertical for row, horizontal for column).

Center: Centers the items within the layout.

UI Controls in .NET MAUI

.NET MAUI provides various controls for creating interactive user interfaces, such as Buttons, Labels, Entries, and more. Here are some common controls explained in detail:

1. Button

Button triggers an action when clicked.

<Button Text="Submit" Clicked="OnSubmitClicked" BackgroundColor="RoyalBlue" TextColor="White"/>
    

Text: Specifies the label on the button.

Clicked: Defines the event handler that will be called when the button is clicked.

BackgroundColor: Sets the background color of the button.

TextColor: Sets the text color of the button.

2. Label

Label is used to display static text in the UI.

<Label Text="Welcome to .NET MAUI" FontSize="24" TextColor="DarkSlateGray" HorizontalTextAlignment="Center"/>
    

Text: Defines the text to be displayed.

FontSize: Specifies the size of the text.

TextColor: Sets the color of the text.

HorizontalTextAlignment: Aligns the text horizontally (e.g., Center, Start, End).

3. Entry

Entry allows the user to input text.

<Entry Placeholder="Enter your name" TextColor="DarkGreen" IsPassword="False"/>
    

Placeholder: A hint displayed in the Entry when it is empty.

TextColor: Specifies the color of the entered text.

IsPassword: If set to True, the input will be masked (useful for password fields).

Navigation in .NET MAUI

Navigation allows users to transition from one screen to another within an app. .NET MAUI provides two primary approaches for navigation: NavigationPage and Shell.

1. NavigationPage

A NavigationPage provides a navigation stack, enabling users to push and pop pages.

var page = new MainPage();
var navigationPage = new NavigationPage(page);
await navigationPage.PushAsync(new SecondPage());
    

PushAsync: Navigates to the specified page and adds it to the navigation stack.

PopAsync: Removes the current page from the stack and navigates back to the previous page.

2. Shell

Shell is a higher-level abstraction for managing complex navigation schemes, such as tabs, flyouts, and nested pages.

<Shell>
    <TabBar>
        <ShellContent Title="Home" ContentTemplate="{DataTemplate HomePage}"/>
        <ShellContent Title="Settings" ContentTemplate="{DataTemplate SettingsPage}"/>
    </TabBar>
</Shell>
    

TabBar: Provides a set of tabs to navigate between different content pages.

Conclusion

In this blog, we explored the fundamentals of UI layouts, controls, and navigation in .NET MAUI. With these concepts in hand, you can create dynamic, responsive, and feature-rich UIs for your apps.

By mastering these concepts, you'll not only improve your development skills but also be better prepared for technical interviews!

Interview Questions for Readers

1. What is the difference between `VerticalStackLayout` and `HorizontalStackLayout`?
2. When would you use `AbsoluteLayout` over other layouts?
3. How does `FlexLayout` help in creating responsive layouts?
4. What is the difference between `NavigationPage` and `Shell` for navigation in .NET MAUI?

Please share your answers in the comments section below! Let's discuss them together.

Previous Next