Xamarin Forms Splash Screen

This is how I add a Splash Screen in my Xamarin Forms apps

1. Create a new ContentPage ie Splash.xaml
2. Set the MainPage in your App.xaml.cs file to MainPage = new Splash();
3. On the Splash.xaml I add an image (logo) and set the ContentPage backgroundcolor to my desired color for the app.
4. On the Splash.xaml.cs OnAppearing() function I run a Task to animate the logo or fade it in/out. Once the animation is done in the Splash.xaml.cs OnAppearing function I then set the MainPage to a new page ie. a Login page or Main.xaml
5. In the Android project, I leave the MainActivity “MainLauncher = true” as is.
6. In the iOS Project, I remove the Xamarin logo from the StoryBoard and set the background color to my desired color for the app.

App.cs file

public App()
{
InitializeComponent();
MainPage = new Splash();
}

Splash.xaml file

<ContentPage.Content>
<Image x:Name="imgLogo" Aspect="AspectFit" Margin="5" HorizontalOptions="Center" VerticalOptions="Center"></Image>
</ContentPage.Content>

Splash.xaml.cs File with Fade and Animation

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Xamarin.Essentials;

namespace MyApp
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Splash : ContentPage
{
public Splash()
{
InitializeComponent();
}

protected async override void OnAppearing()
{
base.OnAppearing();

imgLogo.Opacity = 0;
await Task.WhenAny<bool>
(
imgLogo.FadeTo(1, 5000)
);
await Task.WhenAny<bool>
(
imgLogo.TranslateTo(-DeviceDisplay.MainDisplayInfo.Width, 0, 500)
);
App.Current.MainPage = new Views.ListOfItems();
}
}
}