.NET MAUI Project Overview
Learn .NET MAUI creating projects
Learn how to create cross-platform applications, thanks to the power of .NET MAUI and a series of real projects.
Once we have logged in with a Microsoft account and installed Visual Studio, we are ready to create projects with .NET MAUI.
How to create a new .NET MAUI project?
To create a project with .NET MAUI, click on the Create a new project option:
This will open a new window, in which all the templates that you can use to create different types of solutions will appear, here you must apply a filter with the term “maui” in All Project Types, which will return the .NET MAUI App template, which is the template we are interested in:
Select the template and click Next. In the new window, you can leave the default project name, as we will only examine the project structure, and finally click on the Create button:
The first time you create a project with .NET MAUI, you will have to wait a few seconds, as the installation of necessary nuget packages will take place:
Subsequently, you may be shown a window to accept the license to use the Android SDK, which you must accept:
Once the license is accepted, the process of downloading the SDK and corresponding tools to create applications based on this platform will start, so you should wait a few more seconds while the process finishes.
Once the task is finished, you must compile the project to make sure that everything works correctly. To do this, right click on the project and select the compile option:
After a few seconds, if everything goes well, you will see that the process has completed successfully. You can tell this because a legend appears at the bottom left indicating that the project is ready and has been successfully compiled:
What is the structure of a .NET MAUI project?
The structure of a .NET MAUI project consists of a single project that will house all the configurations for each platform:
Among the main sections of the project, you will see the dependencies section for each platform, from Android, through iOS, Mac Catalyst and Windows as well.
We also have a Properties folder, in which you can find a JSON file that allows you to make settings in the application. We also see a folder called Platforms, which is the one that contains specific files for each of the platforms (depending on when you read this, you may find some additional platforms such as Tizen):
For example, in the image we see the contents of the Android folder, which contains specific configuration files such as the Resources folder, the AndroidManifest.xml file and the MainActivity.cs class.
On the other hand, in the iOS folder we can find the AppDelegate.cs class, the Info.plist file. In the case of MacCatalyst we find similar files that we saw in the iOS platform:
Finally, as part of the Windows platform, we see some files such as App.xaml, the application manifest for the Windows package, among others:
We can also see a section called Resources, which is different from the Android folder. This is where you should place common resources throughout the project.
Resources folder in .NET MAUI
For example, if you want to add a font to your project, just place the font in the folder called Fonts. Below, I will describe what type of resources you should place in each folder:
- AppIcon: Application icons, preferably in an svg format to allow automatic scaling.
- Fonts: Fonts you want to add to your application
- Images: Images you want to place in your application, from the classic jpg, through png and svg files for automatic scaling.
- Raw: Raw files that you want to distribute in your application, such as text files, pdf's, csv files, etc.
- Splash: Images that you will use for the splashscreen of the application. An svg format is recommended to take advantage of the auto scaling feature.
- Styles: Diccionarios de recursos para ser utilizados en la aplicación.
Overview of App.xaml, MainPage.xaml and AppShell.xaml in a .NET MAUI project
You can also see some files that you will get to know little by little, such as the App.xaml file, in which elements common to the whole application are defined, such as style dictionaries to define the visual appearance of the application elements.
You can also see a file called AppShell.xaml, which allows you to create applications quickly, defining the content pages and arranging them as if they were a puzzle, automatically creating a menu and a tab-based navigation.
As part of the shell content, you can quickly define elements such as the title, the reference to one of the content pages, whether or not you want a sliding menu, a path to specify how to access this page.
In addition, we also see a page called MainPage.xaml, which is a ContentPage, in another post we will see this type of page in more detail.
In this content page of the default template, we see the definition of controls through labels, such as a ScrollView, a Label control, a Button control, an Image control, which I will talk about in depth in another post.
We can also see a class called MauiProgram.cs, which is a special class that allows to configure the application. For example, we can see that in each new project the fonts that will be used in the application are registered, although it is possible to configure many other things.
This is the structure of a .NET MAUI application at first sight, if you want to see how to run it I suggest you to read the next lesson of the course called Installing and creating emulators for .NET MAUI.
Video about the Overview of a .NET MAUI project
If you want to see in action how a .NET MAUI project is composed, you can do so by watching the following video.