10.9K

Can you think of a day without looking at your smartphone? Nope, me neither. These little devices are really important for most of us humans. More and more developers start to create mobile applications because they are small and (mostly) easy to use. But creating such an app was hard, annoying, bound to Java or Swift, and the learning curve was just a vertical line. But now we have MAUI!

This article is a starter tutorial for MAUI. It shows you how to create a very simple app and how you can run it in Windows and an Android emulator. Since I like to keep my articles short (enough) I think going from A to Z is just too much for one article about this subject.

If you want to be kept up to date about new articles, fill in your name and e-mail. I will send you an update each month with new articles, blogs, tutorials, and more!

Introduction To MAUI

I never really was into creating mobile apps. I use C# for a very long time now and never had the time to switch to Java or Swift. Yes, there are ways of creating mobile apps, like Android Studio. But it never got to me.

But with all software companies going cross-platform, with Microsoft as one of the last ones to open up, a new technique was born: Xamarin. There is a whole history of Xamarin, but I think you are not here for a history lesson. The idea behind Xamarin was simple: Support building apps for Android and iOS using .NET and C# (this is literally on their homepage).

Why am I telling you this? Well, MAUI (released in 2022) is an evolution of Xamarin. While a lot looks the same, it isn’t. The file and project structure of MAUI is way easier to understand. Xamarin is/was a lot more robust, whereas MAUI has just a few clear projects.

Another big difference is that Xamarin had projects per platform (Android or iOS). MAUI has the same, but you work more from one general project. MAUI also supports Android and iOS, but also UWP (Universal Windows Platform). This means, that with one solution you can spit out 3 different platforms!

MAUI will keep growing until it’s outgrown Xamarin. They guess that will be somewhere in 2024.

Modifying Visual Studio

If you have never worked with MAUI chances are that you don’t have the necessary software installed. Visual Studio comes with a lot of tools, but some need to be activated manually.

Let’s install everything we need to use Visual Studio with MAUI. Make sure you have closed all Visual Studios and open the Visual Studio Installer application. Click on the Modify button on the right side of your Visual Studio application.

The first tab is Workloads find the category Desktop & Mobile and check the workload .NET Multi-platform App UI development. For those that are paying attention… Yes, MAUI stands for Multi-platform App UI.

If you already have it checked, just exit the installer and open Visual Studio. If you haven’t checked it, check it and press the Modify button, which is on the right bottom of the screen. This could take a while. Visual Studio will not only install MAUI, but also Android and everything that is needed to run an Android emulator.

When everything is done, exit the installer and open Visual Studio.

MAUI Project

We are now ready to create an MAUI project. Fire up Visual Studio and create a new project. You know how to do this, just look for “maui” in the search bar. Notice there are a few templates for MAUI. The .NET MAUI Blazor App is a combination of MAUI and Blazor. I worked with this one and it’s pretty cool, but the ‘normal’ MAUI apps work just a little bit better.

Choose the .NET MAUI App template and click next. In the configuration of the project, give it a good name. I call it Expenser.MauiAppl. Yes, there is an ‘l’ at the end. As you might know, I like to see what type of project it is by adding the project type, or a part of it, behind the name of the application. For a console application, it would be Expenser.Console. But there is already a class called MauiApp, so I can’t use that one or I’ll get conflicts.

Choose a location for the project and give the solution a name. I name my solution Expenser. Click next. I will be using .NET 7. Click Create and wait a bit. When Visual Studio is done loading and creating it all, you will see this in your Solution Explorer:

Let’s walk through the files. I will walk through them in a specific order, not from top to bottom.

MauiProgram.cs

“All projects have a Program.cs” is what I always tell people, and this would be correct if it wasn’t for MAUI. Here we have a MauiProgram.cs. Same idea, same function, different name. This is also the file where you add configuration and you set up the dependency injection.

This file will create and initialize the MauiApp, which is the base for MAUI apps. Not really anything special here.

App.xaml / App.xaml.cs

This class inherits from Application, which holds the core for the MAUI controls. It also initializes the AppShell, which can be described as an index.html for websites: The starting point of the visual aspect.

The App.xaml also holds the general styles for the application. You can see this by opening the XAML and looking at the Application.Resources.

AppShell.xaml / AppShell.xaml.cs

The AppShell is the shell around your application. This is where you start with the design of the visual stuff. Menu’s, tabs, or a ShellContent are parts that could be placed here. It also holds a collection of pages, if you have those.

If you look carefully at the XAML of this file, you will see a ContentTemplate, which is set to MainPage.

MainPage.xaml / MainPage.xaml.cs

This is the page you are going to design at first (apart from menus and/or tabs, these go to the AppShell). The MainPage is a scaffolded page for showing you the basics of a XAML page. There is an image, some labels, and a button.

In the code behind you find the code for the button.

Folder Resources

I am not going into details for this folder, but this contains all the icons, styles, images, and more needed for your app.

The folder Styles is interesting for now. This folder contains 2 files where you can change the default settings for fonts, colors, and more. Just take a look, don’t change too much for now.

Folder Platforms

So far nothing I told you was special for a specific platform (Android, iOS, UWP). But the folder Platforms is dedicated to the different platforms you can use and build your app for.

Each platform that is supported is represented here and each platform has its own folder. And each folder has different content. It’s about the information MAUI needs to create the app. Android, for example, has a manifest that tells the Google Play Store what your app is, what permissions you need, etc. Feel free to look around, but be careful of what you change. You might break it.

Taking It For A Spin

Let’s see how it looks. Press F5 or the run button. Note that the first time you build and launch a MAUI application it could take some time.

But… Aren’t we building mobile apps? Yes, but MAUI also supports UWP. This means you can create Windows applications with it too.

So, one project, 5 different platforms. How cool is that?

If you are done clicking the button – nothing else to do here anyway – stop running it. Let’s run it on Android.

Running MAUI An Android

Before we can run an MAUI app on Android, we need to set up an Android emulator so we can test out the app on Android.

Keep in mind that this could consume a lot of disk space, especially the emulator. Emulators are virtual machines with disks and images. An emulator can grow up to 10 GB.

Create The Emulator

The first thing we need to do is create an emulator with the settings and specs we want. This is done with the Android Device Manager, which is installed when you installed the workload for mobile development. You can open this by going to Visual Studio menu Tools -> Android -> Android Device Manager.

The list is now empty, but we are going to create a new one by clicking on the new button. This screen can look a bit scary, but it isn’t. Just don’t touch too much and you will be just fine, trust me (…).

You can set up your fake Android device the way you want it. Front camera or not, the size of the memory, display size, sd card, and much more. You can always change a device after you have saved and created it.

Before I am going to select a base device (I would highly recommend that), I want to point out the checkbox with “Google Play Store”. You can’t check it, so why put it there? If you want to use the Google Play Store, you need to select a base device with (+ store) behind the name.

The API is pretty important. The older APIs don’t have the same functionality as the newer ones. It all depends on what you are creating the app for, but I rather stick to the newest version. This is API 33 when I write this article.

All other settings are left untouched, but feel free to fiddle around a little bit. If you break something, just start over. In Visual Studio, you can easily switch between emulators.

Alright, let’s create a simple device based on a Base Device. I select the Nexus 5 (+ Store), name it Nexus 5, and I check the Google Play Store. Then press Create.

This could take a while since the image and all need to be downloaded. If you create another Nexus 5 with the same API it will be created very quickly.

Launching

After it’s done you can start the emulator by clicking the start button, but you don’t have to. Visual Studio can launch it for you too. But let’s start it now.

Launching an emulator can take a long time, just like a normal smartphone. Sometimes it looks and feels as if it freezes, but you just have to wait.

On the right side of the emulator, you see some grayish buttons. From top to bottom: Shutdown, sound up, sound down, flip left, flip right, screenshot, zoom, back, home screen, active apps. You see you can do everything with a normal smartphone, except you use buttons now.

Let’s keep it running and go back to Visual Studio.

App On Emulator

If you look at the run configuration (the green run button) it is set to Windows Machine. If you run your application now, you will get the Windows variant. But we want the Android variant. There is a down arrow on the right side of that button, click it.

If you have a console application there isn’t much to choose from, but MAUI gives you a lot of options. These are all the configurations you can use, including the different platforms.

Now select Android Emulators and the emulator you just created.

The green run button text will change to the name of the emulator you just choose. Now press the button and wait… Long.

And there you go! An Android app made with C#, .NET, XAML, and Visual Studio!

Conclusion

This is the very start of our MAUI adventure. This article should give you a global idea of how to start a new MAUI project, create an Android emulator, and run the MAUI project on Windows and Android.

We have installed the needed workload to work with MAUI and you should also have an idea about the files in a MAUI project and what the purposes are of those files.

There will be more on this subject in the near future. Know that this is something different than a simple console application, API, or a WinForms application. But we will get there!