Experimenting with .Net MAUI
.Net Multi-platform App UI (MAUI) is an app development framework used for creating cross-platform native mobile and desktop apps using C# and XAML.
It is based on Xamarin.Forms and replaces it in Visual Studio 2022. After some time of being available for use only on the preview version of Visual Studio 2022, .Net MAUI is now available for use in the non-preview version.
I created a minimal to-do list app to experience the process of setting up and using the .Net MAUI Framework.
Installing .Net MAUI
As of the 17.3 update of Visual Studio 2022 the .Net MAUI workload is available for installation in the Visual Studio Installer. Adding the workload is as simple as selecting the “.NET Multi-platform App UI development” workload, shown in the image below, and selecting Modify or Install.
Creating an App
There are three options that are available for creating a .Net MAUI app: .Net MAUI App, .Net MAUI Blazor App and .Net MAUI Class Library.
For my To-do list App I chose the .Net MAUI App option. After selecting the option, a template app with one page (which is depicted below) is created. There is a counter that increments every time the button is clicked.
There are a few options for running the mobile app including remote devices and emulators. For my experimentation I chose an Android Emulator created using the Android Device Manager.
Multiple Android devices with different specifications can be easily created, started, and stopped using Android Device Manager.
The app that I created has a straightforward file structure. There are folders for platform specific code for each platform. Each page is a .xaml file with an associated .xaml.cs code behind file (e.g. MainPage.xaml and MainPage.xaml.cs in the screenshot below).
There are three pages with various controls and points of interactions, that make up the app. Each of the control is defined in the XAML of the page. For example, the button Add Item is defined as shown in the image below.
Each interaction is defined in the handlers that are defined in the code behind and referenced in the XAML. For example, the OnAddItemClicked event handler referenced in the Clicked event of the Button in the screenshot above, is defined in the code behind as shown in the image below.
The final result of the To-Do List App is shown in the image below.
Learning and observations
As someone who has not worked with Xamarin.Forms before, experimenting with .Net MAUI was somewhat synonymous with learning Xamarin.Forms. With regards to syntax and some of the controls, the commonalities between .Net MAUI and Xamarin.Forms made the Xamarin.Forms documentation a useful reference when working on the app.
.Net MAUI was relatively simple to learn as someone with prior .Net experience. The main challenges in this exploration were related to keeping up with the updates made to .Net MAUI whilst it was still in preview. However, these challenges were not too difficult to overcome.
Useful Links
.Net MAUI Microsoft Learning Path