App development is a broad and dynamic field with a wide range of available tools, frameworks, and platforms. The promising.NET MAUI (Multi-platform App UI) framework is one of the up-and-coming titans in this field. It’s easier than ever to get started with .NET MAUI thanks to a variety of tools like Visual Studio 2022 and a strong development environment.
Is it Possible to use .NET Multi-platform App UI to Create Web Apps?
Technically speaking, .NET MAUI simplifies cross-platform development and is particularly intended for desktop and mobile applications. However, other .NET technologies like Blazor might be more appropriate if you seek web applications. The primary competency of MAUI is in developing native applications for desktop and mobile platforms.
Is MAUI a Useful Tool for Creating Apps?
Of course! When used with programs like Visual Studio 2022, MAUI provides a better development environment. This is a blessing for developers who want to create cross-platform applications without worrying about maintaining various codebases for each platform.
Here are a few strong reasons for MAUI’s success:
- Unified Project Structure: The days of handling several project files for several platforms are long gone. Working on a single project with MAUI makes it easier to manage and more productive.
- Hot Reload: By integrating Hot Reload into the development environment, tiresome restarts are avoided and all code changes are shown instantly. This is very beneficial for optimizing the user interface.
- Rich Set of Controls: MAUI has several customizable controls that you may adjust to fit the unique requirements and design style of your application.
- Backward Compatibility: Since MAUI supports Forms projects that already exist, those who are familiar with Xamarin Forms will find a smoother transition.
Build First .Net Multi-platform App UI – Simple Steps to Follow
Set up your development environment and build your first .NET Multi-platform App UI (.NET MAUI) app.
The minimum requirements for the latest version of Xcode.
The minimum requirements for the latest version of Xcode.
1.Download and Install the .NET SDK:
Download .NET 8 SDK x64 (Intel)
2. Download and install VS Code:
3. Open VS Code and select the Extensions button in VS Code’s Activity Bar to the left. Type MAUI in the search bar, select .NET MAUI, and then select the Install button on the .NET MAUI extension page.
4. Open a new terminal and install the .NET MAUI workload by running the following command:
Terminal -> sudo dotnet workload install maui -> Successfully installed workload maui.
Create your app
Create a new .NET MAUI app:
- Open the command palette in VS Code by pressing CMD+SHIFT+P.
- Type .NET: to see the commands you can run with C# Dev Kit!
- Find and select .NET: New Project to create a new .NET project.
- Select .NET MAUI App.
- Choose the folder location you’d like to save your project.
- Name the project MyFirstMauiApp in the command palette when prompted.
In VS Code’s SideBar, make sure the Explorer is open. Here you should see a folder and the Solution Explorer. If you’ve opened a new instance of VS Code, the Solution Explorer may be near the bottom of the sidebar.
Under the Solution Explorer, select MainPage.xaml. This file contains the markup that describes the structure and layout of the user interface elements in your MAUI application.
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.
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 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.
Conclusion
When it comes to developing desktop and mobile apps,.NET MAUI has established itself as a formidable competitor. With its well-rounded development experience, extensive toolkit, and active community, MAUI is a potential starting point for developers of all skill levels, including beginners wishing to explore the world of cross-platform apps.
You can hire Android developers from CMARIX, a leading .NET multi-platform app UI development firm, as they have successfully finished numerous projects using cutting-edge techniques like Blazor, Hot Reload, Xamarin, and .NET 6. With a single codebase, our skilled team can produce top-notch native apps for several platforms.
