Chapter 3: Understanding .NET MAUI Project Structure
In this chapter, we'll walk through the default structure of a .NET MAUI application, explore platform-specific folders, and understand the role of App.xaml and MainPage.xaml. You'll also be introduced to the MVVM (Model-View-ViewModel) pattern, which is highly recommended for building scalable and maintainable applications.
π Exploring the Default Project Structure
The main folders generated in a .NET MAUI app include:
MyMauiApp/
βββ Platforms/
β βββ Android/
β βββ iOS/
β βββ MacCatalyst/
β βββ Windows/
βββ Resources/
β βββ Fonts/
β βββ Images/
β βββ Raw/
βββ App.xaml
βββ App.xaml.cs
βββ MainPage.xaml
βββ MainPage.xaml.cs
βββ MauiProgram.cs
βοΈ Platform-Specific Configurations
Each folder under Platforms/ provides per-OS features and settings like:
- Android:
AndroidManifest.xml, splash screen config, permissions
- iOS:
Info.plist and launch storyboards
- Windows:
Package.appxmanifest, images, tile settings
- MacCatalyst: Similar to iOS, but for macOS apps
𧩠Understanding App.xaml and MainPage.xaml
App.xaml is used to define shared resources like global styles and colors:
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
x:Class="MyMauiApp.App">
<Application.Resources>
<Style TargetType="Label">
<Setter Property="TextColor" Value="DarkSlateBlue" />
</Style>
</Application.Resources>
</Application>
App.xaml.cs is where you set the startup page for your app:
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new MainPage();
}
}
MainPage.xaml is your first UI screen. Hereβs a basic example:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
x:Class="MyMauiApp.MainPage">
<VerticalStackLayout Spacing="25" Padding="30">
<Label Text="Welcome to .NET MAUI!" FontSize="32"/>
<Button Text="Click Me!" Clicked="OnCounterClicked"/>
</VerticalStackLayout>
</ContentPage>
π Working with MVVM Pattern
MVVM promotes separation of concerns and better maintainability. Below is a simple ViewModel:
public class MainViewModel : INotifyPropertyChanged
{
private string _greeting;
public string Greeting
{
get => _greeting;
set { _greeting = value; OnPropertyChanged(); }
}
public ICommand SayHelloCommand { get; }
public MainViewModel()
{
Greeting = "Welcome!";
SayHelloCommand = new Command(() => Greeting = "Hello from MVVM!");
}
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string name = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
Set this ViewModel in your code-behind like this:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new MainViewModel();
}
}
And bind it to XAML controls:
<Label Text="{Binding Greeting}" FontSize="24" />
<Button Text="Say Hello" Command="{Binding SayHelloCommand}" />
π Summary
You now understand how .NET MAUI projects are structured, what each folder and file does, and how to implement MVVM for real-world app development. This knowledge is foundational for building scalable, clean, and cross-platform apps with ease.
