This is how I add a Splash Screen in my Xamarin Forms apps
- Create a new ContentPage ie Splash.xaml
- Set the MainPage in your App.xaml.cs file to MainPage = new Splash();
- On the Splash.xaml I add an image (logo) and set the ContentPage backgroundcolor to my desired color for the app.
- 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
- In the Android project, I leave the MainActivity “MainLauncher = true” as is.
- 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(); } } }
102320cookie-checkXamarin Forms Splash Screen