.Net Maui Architecture And Platform Support Android Ios Macos And Windows Complete Guide

Step 1: Install the Required Software

1. Install Visual Studio 2022:

   • Download and install the latest version of Visual Studio 2022.
   • Ensure you select the ".NET Multi-platform App UI development" workload during the installation.

2. Install .NET 7 SDK:

   • Download and install the .NET 7 SDK.
   • This ensures you have the latest version of .NET MAUI tools.

3. Android Development:

   • Install Android SDK and Android Emulator through Visual Studio's SDK Manager.
   • Alternatively, you can use a physical Android device.

4. iOS Development (macOS Only):

   • Install Xcode.
   • Connect an iOS device or use the iOS Simulator.

5. macOS and Windows Development:

   • Ensure you have the latest OS updates.

Step 2: Create a New .NET MAUI Project

1. Open Visual Studio.
2. Select "Create a new project".
3. Search for "MAUI" and select ".NET MAUI App".
4. Click "Next".
5. Configure your new project by entering a name (e.g., MauiAppDemo) and choosing a location.
6. Click "Next".
7. Select the .NET 7 SDK and click "Create".

Step 3: Understand the .NET MAUI Project Structure

When you create a new .NET MAUI project, you’ll get several directories and files:

• Platforms/: Contains platform-specific configuration files.
• Resources/: Contains shared resources like icons and images.
• Pages/: Your application pages (Views).
• ViewModels/: Your ViewModel classes (usually generated if you use MVVM).
• App.xaml: The main resource dictionary.
• App.xaml.cs: The startup class.
• MauiProgram.cs: Defines the MAUI app builder.

Step 4: Explore the App.xaml and MauiProgram.cs

App.xaml

App.xaml is where you define global resources and styles:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppDemo.App">
    <Application.Resources>
        <!-- Application resource dictionary -->
        <ResourceDictionary>
            <Style TargetType="Button">
                <Setter Property="BackgroundColor" Value="Blue" />
                <Setter Property="TextColor" Value="White" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MauiProgram.cs

MauiProgram.cs sets up your MAUI application with necessary services and configurations:

using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace MauiAppDemo;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        // Register Services
        builder.Services.AddSingleton<AppState>();
        builder.Services.AddSingleton<MainPage>();

        return builder.Build();
    }
}

Step 5: Create a Simple Page

Let’s create a simple page that shows a welcome message and a button.

MainPage.xaml

Create a MainPage.xaml in the Pages folder if it doesn't already exist:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppDemo.Pages.MainPage"
             Title="Welcome">

    <StackLayout Padding="30,0" VerticalOptions="Center">
        <Label Text="Hello .NET MAUI!"
               FontSize="24"
               HorizontalOptions="Center" />

        <Button Text="Click Me"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />
    </StackLayout>
</ContentPage>

MainPage.xaml.cs

Next, add the code-behind file MainPage.xaml.cs:

using Microsoft.Maui.Controls;

namespace MauiAppDemo.Pages;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        DisplayAlert("Message", "Hello, World!", "OK");
    }
}

Step 6: Update the App.xaml.cs to Set MainPage

Modify the App.xaml.cs to set MainPage as the MainPage of your application:

using Microsoft.Maui.Controls;
using Microsoft.Extensions.DependencyInjection;

namespace MauiAppDemo;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = Current.Services.GetRequiredService<MainPage>();
    }
}

Step 7: Run the Application

You can now run the application on different platforms:

On Android

1. Select the Android emulator or attached device from the toolbar.
2. Click on the "Start" button or press F5.

On iOS (macOS Only)

1. Ensure you have configured your macOS environment for iOS development.
2. Select the iOS simulator or attached device from the toolbar.
3. Click on the "Start" button or press F5.

On macOS

1. Select Mac Catalyst as the target platform from the toolbar.
2. Click on the "Start" button or press F5.

On Windows

1. Select Windows Machine as the target platform from the toolbar.
2. Click on the "Start" button or press F5.

Step 8: Platform-Specific Customization

You might want to customize the app for specific platforms. This can be done in the Platforms folder.

Example: Customizing Android MainActivity

1. Navigate to the Platforms/Android folder.
2. Open or create the MainActivity.cs file.
3. Add your custom code:

namespace MauiAppDemo.Platforms.Android;

[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize)]
public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        // Add your custom code here
    }
}

Step 9: Add Additional Pages and Navigation

You can add more pages and implement navigation using Shell or NavigationPage.

Create a Second Page

Create a new XAML page, e.g., SecondPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppDemo.Pages.SecondPage"
             Title="Second Page">

    <StackLayout Padding="30,0" VerticalOptions="Center">
        <Label Text="This is the Second Page"
               FontSize="24"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

Update MainPage to Navigate

Modify MainPage.xaml.cs to navigate to SecondPage on button click:

private async void OnButtonClicked(object sender, EventArgs e)
{
    await Shell.Current.GoToAsync(nameof(SecondPage));
}

Step 10: Build and Distribute

Once you're satisfied with your application, you can build and distribute it for each platform.

For Android

1. Use Android Studio or Visual Studio to generate a signed APK or App Bundle.
2. Upload to the Google Play Store.

For iOS

1. Archive the project in Visual Studio.
2. Use Xcode Organizer to distribute the app.

For macOS

1. Use Visual Studio to build the app.
2. Use Xcode to package and distribute the app.

For Windows

1. Use Visual Studio to build the app.
2. Package the app using MSIX packaging and distribute it through the Microsoft Store or privately.

Summary