.Net Maui Project Structure And Multi Targeting Complete Guide

Step 1: Set Up Your Development Environment

Before you start, ensure that you have the necessary tools installed:

• Visual Studio 2022 (with the latest .NET MAUI workload).
• .NET 6 SDK.

Step 2: Create a New .NET MAUI Project

1. Open Visual Studio.

2. Select Create a new project.

3. Search for and select the .NET MAUI App template.

4. Click Next.

   

5. Provide a name and location for your project then click Create.

6. Choose either the Blank App, App with Tabs, or any other template as per your preference, then click Create.

   

Step 3: Understand the Default Project Structure

A typical .NET MAUI project will include the following folders:

• Platforms: Contains platform-specific configuration and code.

  • Android
  • iOS
  • Windows
  • MacCatalyst

• Resources: Contains shared resources like images, styles, etc.

  • Images
  • Styles

• Pages: Contains the different pages of your application.

• Models: Contains data models or view models (if you are using MVVM pattern).

• Services: Contains services used throughout your application.

• App.xaml and App.xaml.cs: The entry point for your application.

Step 4: Add a New Page

Let's add a simple new page called AboutPage.

1. In Solution Explorer, right-click on your project, and go to Add > New Item....
2. Select Content Page and name it AboutPage.xaml.

<!-- AboutPage.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="MauiMultiTargeting.AboutPage">
    <StackLayout Padding="20" VerticalOptions="Center">
        <Label Text="Welcome to the About Page!" 
               FontSize="Large" 
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

// AboutPage.xaml.cs
namespace MauiMultiTargeting;

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

3. Navigate to MainPage.xaml (or your starting page) and add a button to navigate to AboutPage.

<!-- MainPage.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="MauiMultiTargeting.MainPage">

    <VerticalStackLayout 
        Spacing="25" 
        Padding="30,0" 
        VerticalOptions="Center">

        <Image Source="dotnet_bot.png" 
               SemanticProperties.Description="Cute dot net bot waving hi"
               WidthRequest="200" 
               HeightRequest="200" 
               HorizontalOptions="Center" />

        <Label 
            Text="Hello, .NET MAUI!"
            SemanticProperties.Description="Welcome label"
            FontSize="28" 
            HorizontalOptions="Center" />

        <Button 
            Text="Go to About Page"
            Clicked="OnAboutPageClicked"
            FontSize="Medium"
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

// MainPage.xaml.cs
using Microsoft.Maui.Controls;

namespace MauiMultiTargeting;

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

    private void OnAboutPageClicked(object sender, EventArgs e)
    {
        Navigation.PushAsync(new AboutPage());
    }
}

Step 5: Adding Multi-Targeting

.NET MAUI supports multiple platforms out of the box. If you created a new project using the template from Visual Studio, all major platforms should already be included (Android, iOS, Windows, MacCatalyst).

However, let's ensure we have the correct project settings for multi-targeting.

Check .csproj file:

1. Right-click on your project in Solution Explorer and select Edit Project File.

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <SingleProject>true</SingleProject>
    <UseMaui>true</UseMaui>
    <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
    <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">15.0</SupportedOSPlatformVersion>
    <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
    <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">15.0</SupportedOSPlatformVersion>

    <TargetFrameworks>net6.0-android;net6.0-ios;net6.0-windows10.0.17763.0;net6.0-maccatalyst</TargetFrameworks>
  </PropertyGroup>

  <!-- ... Other configuration ... -->
</Project>

Platform-Specific Code

You can also add platform-specific functionality if needed.

For example, let's create a platform-specific file to handle a different action on button click in the AboutPage.

1. Right-click on your project in Solution Explorer and select Add > New Folder. Name it Platforms.

2. Inside the Platforms folder, create subfolders for each platform:

   • Android
   • iOS
   • Windows
   • MacCatalyst

3. Add a new code file inside the Android folder named AboutPage.Android.cs.

// AboutPage.Android.cs
namespace MauiMultiTargeting.Platforms.Android;

public partial class AboutPage
{
    public void ShowToastMessage(string message)
    {
        Android.Toast.MakeText(Android.App.Application.Context, message, Android.Widget.ToastLength.Short).Show();
    }
}

4. Modify your AboutPage to call this method when navigating to this page.

// AboutPage.xaml.cs
partial void ShowPlatformSpecificMessage();

namespace MauiMultiTargeting;

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

    protected override void OnAppearing()
    {
        base.OnAppearing();
        ShowPlatformSpecificMessage();
    }
}

5. Then implement the platform-specific method inside the corresponding AboutPage.<Platform>.cs files.

   iOS

   // AboutPage.iOS.cs
   namespace MauiMultiTargeting.Platforms.iOS;
   
   public partial class AboutPage
   {
       public void ShowPlatformSpecificMessage()
       {
           var alert = new UIKit.UIAlertController("Info", "This is iOS!", UIKit.UIAlertControllerStyle.Alert);
           alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
           PresentViewController(alert, true, () => { });
       }
   }
   

   Windows

   // AboutPage.Windows.cs
   using Windows.UI.Xaml.Controls;
   
   namespace MauiMultiTargeting.Platforms.Windows;
   
   public partial class AboutPage
   {
       public void ShowPlatformSpecificMessage()
       {
           var dialog = new ContentDialog
           {
               Title = "Info",
               Content = "This is Windows!",
               CloseButtonText = "Ok"
           };
           dialog.ShowAsync();
       }
   }
   

   macOS

   using Foundation;
   using AppKit;
   
   namespace MauiMultiTargeting.Platforms.MacCatalyst;
   
   public partial class AboutPage
   {
       public void ShowPlatformSpecificMessage()
       {
           var alert = new NSAlert
           {
               AlertStyle = NSAlertStyle.Informational,
               MessageText = "Info",
               InformativeText = "This is macOS!"
           };
           alert.RunModal();
       }
   }
   

Step 6: Build and Run Your Application

To build and run your application on different platforms:

1. Android: Set the target framework in the toolbar to net6.0-android. Connect your Android device or start an emulator.
2. iOS: Set the target framework in the toolbar to net6.0-ios. Connect your iOS device or use an iOS simulator (requires macOS).
3. Windows: Set the target framework in the toolbar to net6.0-windows10.0.17763.0 and run the application.
4. macOS: Set the target framework in the toolbar to net6.0-maccatalyst and run the application (requires macOS).

Click Run to deploy and execute your application on the selected platform.

Conclusion:

You now have a basic understanding of the .NET MAUI project structure and how to apply multi-targeting. By organizing your code into a logical structure and implementing platform-specific methods where necessary, you can ensure your app behaves optimally across different devices and operating systems.