How to build UI with .NET MAUI

1. Introduction

In this article, I will guide you on how to build a simple UI with MAUI, including transition and mapping data. We will make a TODO app, which needs authentication, and then the main application where you can create/ edit, or mark the Todo task. The below mockup image will give you some hints about how the UI will look like

Figure 1. TODO app’s UI Mockup

2. Screens

2.1  Sign In

In the first screen, we will use the VerticalStackLayout to stack components vertically from top to bottom. We will use 2 Entry controls for Email and Password, and 3 buttons for Sign In, Register and Forget password.

The Application’s title and “Forget Password” buttons will stick to the top and bottom respectively. The rest of the UI will stay in the middle when the height is increasing or narrowing.

Let’s create a new ContentPage and name it “SignIn” in the folder “Pages” as in the image shown below:

Figure 2. Sign In page’s content

We modify the AppShell.xaml a little to make the application start from the page we created recently

Figure 3. AppShell’s content

To achieve the requirements stated above. We need to use StackLayout and divide the UI into 3 sections separately: Top, Middle, and Bottom

Figure 4. Sign In page’s structure

Now, we add the Label control to the TOP section

Figure 5. Sign In page’s top section

For Email and Password inputs, we use Entry control to draw it in UI. Entry has a property named IsPassword, if we set it to True, the UI will hide what the user typed in as usual.

Figure 6. Entry code examples

For buttons, we use Button controls to achieve the click event. The event will be explained more clearly later in this article

Figure 7. Button code examples

The final result will look like this:

Figure 8. The final result of Sign In page

Figure 9. The code behind it looks like this

Let’s continue by adding some logic to the “Sign In” button. For example, we will display an alert if the user is not type in the Email or Password field; otherwise, we will navigate to the MainPage

Figure 10. The code to achieve the logic above

Figure 11. The alert will pop up if Email or Password is empty

Figure 12. Otherwise, it will navigate to the MainPage

2.2 Register & Forget Password

Let’s try to create 2 other pages and name them Register and Forgot Password respectively. Play with it by adding more controls. This article will only use them for navigation purposes.

Figure 13. The Register page

Figure 14. The Forgot Password page

2.3 Main Page

This is the main page of our application, where we will display the list of TODO. For demo purposes, we will add a button to simulate the add event to the list.

This page utilizes the CollectionView to present a list of items. The appearance of each item is specified through the CollectionView.ItemTemplate. To enable scrolling in case the list is extensive, we enclose the entire content within a ScrollView.

Figure 15. The final code example of MainPage

The result:

Figure 16. The final result of MainPage

3. Navigation

There are multiple ways to handle navigation in the MAUI app. For example: 

• NavigationPage

• Shell

• TabbedPage

• CarouselPage

• Modal Navigation or URI-based navigation.

This article will show you how to use 3 common navigation

3.1 NavigationPage:

NavigationPage is a built-in navigation container that manages a stack of pages. You can push new pages onto the stack and pop them off to go back. It provides a navigation bar with a back button by default.

Figure 17. Example code of NavigationPage

Figure 18. Example code of how to navigate to another page

3.2 Shell

Shell is a higher-level navigation container that offers a simplified and declarative way to define your application’s navigation structure. It allows you to define routes, handle navigation events, and easily customize the appearance of your app’s navigation.

Figure 19. Example code of AppShell

Figure 20. Example code of how to register a route

Figure 21. Example code of how to navigate to another page by using Shell

3.3 URI-based navigation (Based on Shell)

MAUI supports URI-based navigation, where you can define routes and navigate to specific pages by using a URI. This allows for deep linking and handling navigation based on incoming URLs.

Figure 22. Example code of navigation with parameters

Figure 23. Example code of how to access parameters at the destination page

4. Design Pattern – Model-View-ViewModel (MVVM)

MVVM stands for Model-View-ViewModel and is a design pattern commonly used in application development, including in .NET MAUI apps. MVVM provides a structured approach to separating concerns and organizing code in a way that enhances maintainability and testability.

In the context of a .NET MAUI app, the MVVM pattern typically involves the following components:

Model: The Model represents the data and business logic of the application.

Figure 24. TodoItem model class

View: It defined how the application is presented to the user by defining controls, layout, and others

Figure 25. View example

ViewModel: plays a key role between View and Model. To connect and handle business logic in UI reactions

Figure 26. ViewModel example

In a .NET MAUI app, you typically use data binding and commands to establish the communication between the View and the ViewModel. The data binding mechanism allows the View to automatically update when the ViewModel’s properties change, and commands enable the View to trigger actions in the ViewModel.

By adopting the MVVM pattern in a .NET MAUI app, you can achieve a clean separation of concerns, easier testing, and improved code maintainability.

Resources:

• https://github.com/minhphansts/maui-todo-example.git

References:

• https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/?view=net-maui-7.0
• https://www.youtube.com/watch?v=msqHEVgPap8