Here is a short guide to get you started with the basics in .NET MAUI. Navigate between pages, bind data in XAML, and add dependency injection quickly.
.NET MAUI is Microsoft’s approach to challenging established cross-platform frameworks like Flutter. It is the successor to Xamarin and enables you to develop apps for Android, iPhone, Mac, Windows, and the web platform. Here is a short guide to help you get started with the basics of .NET MAUI.
Add additional pages to the app
The default .NET MAUI template in Visual Studio 2022 contains an AppShell.xaml that reduces the complexity of app development by providing the fundamental features that most apps require, including:
- A single place to describe the visual hierarchy of an app.
- A common navigation user experience.
- A URI-based navigation scheme that permits navigation to any page in the app.
- An integrated search handler.
We’ll use it and add another page to it. Here is what you need to do.
1️⃣ Create a new .NET MAUI Content Page
Open the Add dialog and select .NET MAUI ContentPage (XAML). Don’t select the C# version or you’ll end up without a XAML file. For the difference between ContentPage and ContentView see this short explanation.
2️⃣ Create a new view model for the content page
Create a view model (an empty C# class for now) for the new page in the next step. We will use it for data-binding in a future step.
3️⃣ Add a new
ShellContent block in
AppShell.xaml. Add a new
ShellContent block, and reference the new page as the
ContentTemplate property. The
Route property indicates how to identify the page during navigation.
And that’s all it needs to add new pages to a .NET MAUI app!
Navigate between the pages
After the new page is set up, we want to navigate to it. Let’s use the existing button on
MainPage to trigger a navigation action. Open
MainPage.xaml.cs and change the
OnCounterClicked event handler to the following code:
Pay attention to the method being
async but not returning
This covers everything you need for navigation. It’s pretty simple. For more information on navigation in .NET MAUI, see the documentation.
Data-binding in XAML
Data-binding works pretty similar to what you might know from WPF or other XAML-related languages. Here is how to do it.
1️⃣ Create a property in your view model class (for example a simple string called
Heading to begin with) and assign an initial value.
2️⃣ Open the XAML of your second page and change the
Text property of the
3️⃣ Set the data type in the XAML file so that code navigation works in Visual Studio.
4️⃣ Set the
BindingContext of your second page to the view model. Open the
xaml.cs file and change it accordingly.
This is a short example of how static data-binding works. It won’t reflect changes made to bound properties since we didn’t implement the
INotifyPropertyChanged interface in our view model class.
Add dependency injection
Most modern applications rely on dependency injection. If you are familiar with the setup in other .NET 6 and newer project types, you won’t be surprised here. Let’s dive right in!
2️⃣ Create a getter-only property
Services of type
3️⃣ Create a private method that returns
IServiceProvider and adds all your dependencies to a
4️⃣ Assign the result of the created method to the
Services property in the class constructor.
5️⃣ Hide the static
App property with the
new keyword. Why? Otherwise you can’t access the
Services property from outside.
6️⃣ Change the
BindingContext in the XAML file of your second page to use the
This is an easy way to set up dependency injection in .NET MAUI apps.
This was a short guide to get you started with the basics in .NET MAUI. We covered navigation between pages, data-binding in XAML, and dependency injection. Once you have these skills under your belt, your app development journey can begin.