Building Our First .NET MAUI App

In this chapter, we will create a to-do list app and, in doing so, explore all the bits and pieces of what makes up an app. We will look at creating pages, adding content to pages, navigating between pages, and creating a stunning layout. Well, stunning might be a bit of a stretch, but we will be sure to design the app so that you can tweak it to your needs once it is complete!

The following topics will be covered in this chapter:

• Setting up the project
• Persisting data locally on a device using the repository pattern
• What MVVM is and why it’s a great fit for .NET MAUI
• Using .NET MAUI pages (as views) and navigating between them using .NET MAUI controls in XAML
• Using data binding
• Using styling in .NET MAUI

Technical requirements

To complete this project, you need to have Visual Studio installed on your Macintosh (Mac) or PC, as well as the .NET mobile components. Refer to Chapter 1, Introduction to .NET MAUI, for more details on how to set up your environment. This chapter provides screenshots and instructions for Visual Studio on Windows.

This chapter will be a classic File | New | Project chapter, guiding you step by step through the process of creating your first to-do list app. No downloads will be required whatsoever, apart from a few NuGet packages.

You can find the full source for the code in this chapter at https://github.com/Packt
Publishing/MAUI-Projects-3rd-Edition in the Chapter02 folder.

Project overview

Everyone needs a way of keeping track of things. To kick-start our .NET MAUI development learning curve, we’ve decided that a to-do list app is the best way to get started and to help you keep track of things. A simple, classic win-win scenario.

We will start by creating a project and defining a repository to store the items of a to-do list. We will render these items in list form and allow the user to edit them using a detailed user interface. We will also look at how to store the to-do list items locally on a device through SQLite.NET so that they don’t get lost when we exit the app.

The build time for this project is about 2 hours.

Setting up the project

.NET MAUI introduces a new code-sharing paradigm called single project. Previously, in Xamarin.Forms, you would have had a separate project for each platform your app would be deployed to. In .NET MAUI, all platforms are in a single project that is multi-targeted to all the supported platforms. By default, all code is considered shared, unless it is in one of the platform-specific subfolders. We will explore this further as we progress through this and future chapters.

Let’s get started!

Creating the new project

The first step is to create a new .NET MAUI project. Open Visual Studio 2022 and select Create a new project:

Figure 2.1 – Visual Studio 2022

This will open the Create a new project wizard. In the search field, type in maui and select the .NET MAUI App item from the list:

Figure 2.2 – Create a new project

Complete the next page of the wizard by naming your project...

Creating a repository and a TodoItem model

Any good architecture always involves abstraction. In this app, we need something to store and retrieve the items of our to-do list. Later, these will be stored in a SQLite database, but adding a reference to the database directly in the code that is responsible for the GUI is generally a bad idea as it tightly couples your data storage implementation to the UI layer, making it harder to test your UI code independently from the database.

So, what we need is something to abstract our database from the GUI. For this app, we’ve chosen to use a simple repository pattern. This repository is simply a class that sits between the SQLite database and our upcoming ViewModel class. This is the class that handles the interaction with the view, which, in turn, handles the GUI.

The repository will expose methods for getting, adding, and updating items, as well as events that allow other parts of the app to react to changes in the repository...

Using MVVM – creating views and ViewModels

Model-View-ViewModel, or MVVM for short, is all about separation of concerns. It is an architectural pattern that defines three parts, each of which has a specific meaning:

• Model: This relates to anything that represents data and that can be referenced with ViewModel.
• View: This is the visual component. In .NET MAUI, this is represented by a page.
• ViewModel: This is the class that acts as the glue between the model and the view.

We are introducing MVVM here because the MVVM pattern was designed specifically around XAML-based GUIs. This app and the rest of the apps in this book will use XAML to define the GUI and we will use the MVVM pattern to separate the code into the three aforementioned parts.

In this app, we could say that the model is the repository and the to-do list items it returns. ViewModel refers to this repository and exposes properties that the view can bind to. The ground rule is that any logic...

Adding data bindings

Data binding is the heart and soul of MVVM. This is the way that the views and ViewModel communicate with each other. In .NET MAUI, we need two things to make data binding happen:

• We need an object to implement INotifyPropertyChanged.
• We need to set the BindingContext class of the page to that object. We already do this on both ItemView and MainView.

A useful feature of data binding is that it allows us to use two-way communication. For example, when data binding text to an Entry control, the property on the data-bound object is updated directly. Consider the following XAML:

<Entry Text="{Binding Title}" />

To make this work, we need a property named Title on the string object. We have to look at the documentation, define an object, and let IntelliSense provide us with a hint to find out what type our property should be.

Controls that perform an action, such as Button, usually expose a property called Command. This property...

Laying out the contents

This last section is about making the app look a bit nicer. We will just scratch the surface of the possibilities here, but this should give you some ideas about how styling works.

Setting an application-wide background color

Styles are a great way of applying styling to elements. They can be applied either to all elements of a type or the elements referenced by a key if you add an x:Key attribute:

1. Open App.xaml.
2. Add the following XAML, which is in bold, to the file:

   <ResourceDictionary>
     <Style TargetType="NavigationPage">
       <Setter Property="BarBackgroundColor" Value="#A25EBB" />
       <Setter Property="BarTextColor" Value="#FFFFFF" />
     </Style>
     <Style x:Key="FilterButton" TargetType="Button">
       <Setter Property="Margin" Value=...

Summary

You should now have a good grasp of all the steps involved in creating a .NET MAUI app from scratch. In this chapter, we learned about the project structure and the important files in a newly created project. We talked about dependency injection and learned the basics of MVVM by creating all the views and the ViewModel classes needed. We also covered data storage in SQLite to persist data on our device in a fast and secure way. Using the knowledge you’ve gained from this chapter, you should now be able to create the backbone of any app you’d like.

The next chapter will focus on upgrading an existing Xamarin.Forms application to .NET MAUI.