Brad Dean

Splash screens in Maui

Dotnet Maui offers a great new way to handle splash screens!

In Xamarin, a common way to handle splash screens was to create a SplashPage with a SplashViewModel. This was set as your MainPage in App.cs. Any needed startup processing was handled here, and then at the end you navigated to your next page (or reset MainPage). It worked well, but it did duplicate the actual splash pages that iOS and Android use so you get an odd effect at startup.

Maui has a cleaner way to handle this.

In your .csproj, set the MauiSplashScreen item

<MauiSplashScreen Include="Resources\Images\your_logo.svg" Color="#808080" BaseSize="128,128" />

By default it’s the .net logo. You can use this file in other places, but note that Maui will automagically change your SVG to a PNG on each platform. So the reference to this file above would simply be:

<Image Source="your_logo.png" />

Back to the splash screen! That one “MauiSplashScreen” reference will take care of creating the splash screen on iOS and Android. (Windows and Mac don’t have splash screens) The splash screen will show until your app is ready. Which means if you need to take care of anything like checking for a user token async (in secure storage) or downloading the latest version of some data from an API, you can do that in MauiProgram.cs and the splash screen will wait for you.

Open MauiProgram.cs and in CreateMauiApp() try something like this:

	public static MauiApp CreateMauiApp()
	{

		var builder = MauiApp.CreateBuilder();

		builder
			.UseMauiApp<App>()
			.UseMauiCommunityToolkit()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

		// splash screen will continue to show while this code is executed
		Task.Run(async () =>
		{

            // check if user is logged in:
            await new Services().DownloadLatestDataCache();

		}).Wait();

        return builder.Build();

	}

And there you go. Async startup with a splash screen shown to your users without having to create a Splash Page or Splash View Model!