CODEWITHSUNDEEP
splash-screenmaui
Vired
Vired

Reputation: 59

Splash screen with version In MAUI

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.

Upvotes: 4

Views: 2975

Answers (2)

Mike Liang
Mike Liang

Reputation: 11

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();
        };
    }
}

Upvotes: 1

Jessie Zhang -MSFT
Jessie Zhang -MSFT

Reputation: 13889

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.

Upvotes: 2

Related Questions