Splash screen with version In MAUI

Question

I am trying to make a splash screen in .Net MAUI that contains app version. I have looked for many examples but none of them shows how to customize splash screen with version or text. Is it possible in .Net MAUI. If there is an example or a way to add app verion with logo in .Net MAUI please let me know.

Answer 1

Yes,you can create a ContentPage that acts as a Splash screen ,just as FreakyAli said.

There is a sample code, you can refer to it.

MySplashScreen.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamSample.MySplashScreen"
                          BackgroundColor="#000">

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Padding="10">
        <Image Source="test.png" x:Name="imgLogo" HeightRequest="100" WidthRequest="100"
               Margin="5"/>
        <Label Text="WHATSAPP" FontSize="Large" TextColor="#f7f7f7" Margin="5"/>
    </StackLayout>
</ContentPage>

MySplashScreen.xaml.cs

    public partial class MySplashScreen : ContentPage 
      {
            public MySplashScreen ()
            {
                  InitializeComponent ();
            NavigationPage.SetHasNavigationBar(this, false);
            LogoAnimation();
        }

        public async Task LogoAnimation()
        {
            imgLogo.Opacity = 0;
            await imgLogo.FadeTo(1, 3000);
            Application.Current.MainPage = new NavigationPage(new MainPage());
        }
    }

App.xaml.cs

public partial class App : Application 
{
    public App()
    {
        InitializeComponent();

        MainPage = new DarkScreen();
    }
}

Note:

1.Here, I used FadeTo function to simulate the time delay. Of course, you can also use a Timer to acheve this.

2.You can add a Label to display the version name to page MySplashScreen as needed.

Answer 2

You can try a countdown timer to control the display time of your splash screen or loading page.

public partial class App : Application 
{
    public App()
    {
        InitializeComponent();
        MainPage = new LoadingPage();
    }
}

and the LoadingPage.cs

public partial class LoadingPage : ContentPage
{
    private TimeSpan _countdownTimeout => TimeSpan.FromSeconds(5);   //n secs
    private IDispatcherTimer _countdownTimer { get; set; }

    public LoadingPage()
    {
        InitializeComponent();
        //***redirect to appshell countdown timer initialize
        this.Loaded += (s, e) =>
        {
            _countdownTimer = LoadingLayout.Dispatcher.CreateTimer();
            _countdownTimer.Interval = _countdownTimeout;
            _countdownTimer.Tick += (s, e) =>
            {
                _countdownTimer.Stop();
                Application.Current.MainPage = new MainShell();  //redirect to main shell or page
            };
            _countdownTimer.Start();
        };
    }
}