The first project with .NET MAUI

The first project with .NET MAUI

14 March 2021

MAUI/Xamarin

Share:

Hello!

Today we will migrate an existing Xamarin.Forms Application to .NET MAUI! As a victim I chose my KanbanBoard app.

Installation

First of all, we need to verify if we have prepared the development environment. The best tool for that is MAUI Check. Run the next commands in PowerShell:

dotnet tool install -g Redth.Net.Maui.Check
maui-check

It will automatically attempt to fix any issues.

Solution Configuration

  1. Edit solution file
  • Remove Platform-specific projects;
  • Remove unused Solution Configuration Platforms

The base solution configuration is done.

It's project time

.NET MAUI introduces the Single project concept, SDK-project style, and much more. Let's first migrate our platforms to the “Shared” project.

  1. Create the “Platforms” folder in the “Shared” project. Then for each platform create a folder in the “Platforms” project:
  • Android
  • iOS
  • MacCatalyst
  • Windows

1.1. Android

  • Copy AndroidManifest.xml, MainActivity.cs, MainApplication.cs, all your services, Resources folder to the Android folder.

1.2. iOS, macOS

  • Copy Main.cs, Info.plist, Entitlements.plist, AppDelegate.cs, LaunchScreen.storyboard, and all your services to the iOS/MacCatalyst folder
  1. Delete Old platforms projects folders.

  2. Now we need to modify and change these files

  • From AndroidManifest.xml remove package name, version code, version name. We will set these settings later in csproj file.
  • Replace MainActivity.cs content with:
namespace YourNamespace
{
	using Android.App;
	using Microsoft.Maui;

	[Activity(Theme = "@style/MainTheme", MainLauncher = true)]
	public class MainActivity : MauiAppCompatActivity
	{
	}
}
  • Replace MainApplication.cs content with:
namespace YourNamespace
{
	using System;
	using Android.App;
	using Android.Runtime;
	using Microsoft.Maui;

	[Application]
	public class MainApplication : MauiApplication
	{
		public MainApplication(IntPtr handle, JniHandleOwnership ownership)
			: base(handle, ownership)
		{
		}

		protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
	}
}
  • Replace AppDelegate.cs content with:
using Foundation;
using Microsoft.Maui;

namespace YourNamespace
{
	[Register(nameof(AppDelegate))]
	public class AppDelegate : MauiUIApplicationDelegate
	{
		protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
	}
}
  1. Replace all Xamarin.Forms with Microsoft.Maui
  2. Replace App.xaml.cs file content with the next code:
namespace YourNamespace
{
    public partial class App : Application
    {
        public App(IServiceProvider serviceProvider) // You can inject and resolve any service
        {
            InitializeComponent();
            MainPage = new MainPage();
        }
    }
}
  1. Create MauiProgram.cs with content:
namespace YourNamespace
{
	using System.Linq;
	using Microsoft.Extensions.DependencyInjection;
	using Microsoft.Maui;
	using Microsoft.Maui.Hosting;

	public static class MauiProgram
	{
		public static MauiApp CreateMauiApp()
		{
			var builder = MauiApp.CreateBuilder();
			builder
				.UseMauiApp<App>()
				.UseMauiServiceProviderFactory(constructorInjection: true)                               
				.ConfigureServices(services =>
				{
					services.AddTransient<IPath, DbPath>(); // here you register all your services for DI
				})
				.ConfigureFonts(fonts =>
				{
					fonts.AddFont("fasolid.otf", "FASolid"); // move you fonts from AssemblyInfo here
				});

			return builder.Build();
		}
	}
}
  1. Replace xmlns="http://xamarin.com/schemas/2014/forms" with xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  2. Finally update csproj file with:
<Project Sdk="Microsoft.NET.Sdk">

	<PropertyGroup>
		<!-- iOS, Android, MacCatalyst -->
		<TargetFrameworks>net6.0-ios;net6.0-android;net6.0-maccatalyst</TargetFrameworks>
		<UseMaui>true</UseMaui>
		<OutputType>Exe</OutputType>
		<SingleProject>true</SingleProject>
		<RootNamespace>KanbanBoard</RootNamespace>
		<EnablePreviewMsixTooling>true</EnablePreviewMsixTooling>

		<!-- Display name -->
		<ApplicationTitle>KanbanBoard</ApplicationTitle>

		<!-- App Identifier -->
		<ApplicationId>com.vladislavantonyuk.kanbanboard</ApplicationId>

		<!-- Versions -->
		<ApplicationVersion>1.0</ApplicationVersion>
		<AndroidVersionCode>1</AndroidVersionCode>

		<!-- Required for C# Hot Reload -->
		<UseInterpreter Condition="'$(Configuration)' == 'Debug'">True</UseInterpreter>
	</PropertyGroup>

	<ItemGroup>
		<!-- App Icon -->
		<MauiImage
			Include="Resources\appicon.svg"
			ForegroundFile="Resources\appiconfg.svg"
			IsAppIcon="true" />

		<!-- Splash Screen -->
		<MauiSplashScreen Include="Resources\appiconfg.svg" Color="#512BD4" />

		<!-- Images -->
		<MauiImage Include="Resources\Images\*" />

		<!-- Custom Fonts -->
		<MauiFont Include="Resources\Fonts\*" />
	</ItemGroup>

</Project>

Pay attention to the last ItemGroup. .NET MAUI is integrated with Resizetizer NT, so MauiImage and MauiFont will automatically prepare resources for all your applications.

Build and Run

# For Android
dotnet build KanbanBoard -t:Run -f net6.0-android
# For iOS
dotnet build KanbanBoard -t:Run -f net6.0-ios
# For macOS
dotnet build KanbanBoard -t:Run -f net6.0-maccatalyst

Issues

1. Android deployment (Solved)

I was not able to deploy the application to the device until specified the RuntimeIdentifiers for Android. Add this line to your csproj file:

<RuntimeIdentifiers Condition="$(TargetFramework.Contains('-android'))">android-arm;android-arm64;android-x86;android-x64</RuntimeIdentifiers>

After some unsuccessful attempts I made it running: Kanban MAUI

You can find the code changes here: https://github.com/VladislavAntonyuk/KanbanBoard/tree/maui

Related:

Drawing View in Xamarin Community toolkit

Drawing View in Xamarin Community toolkit

The SignaturePad successor is now available in XCT. This article describes how to add it to your project

Creating Kanban Board using Xamarin Forms 5

Creating Kanban Board using Xamarin Forms 5

This article describes how to create Kanban Board using Xamarin Forms 5 only. Drag & Drop Cards, Set Column WIP, Store data in Local Db.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙