CODEWITHSUNDEEP
xamarinnavigationxamarin.forms
Kedu
Kedu

Reputation: 1370

Push multiple pages in Xamarin Forms

I have several situations in which i'd like to push multiple pages modally as one action. One situation is at the start of my application, where i'd like to initialize my Main-Page and push a Splash-Page above it. I think this is a clean way to initialize the app, because my Main-Page is loaded upfront and the spash page is pushed above it. When the user dismisses the splash page i can simply pop the splash page and be done. Currently i do the follwing in my Application Class:

public App()
    {
        InitializeComponent();

        MainPage mainPage = new MainPage();
        SplashPage splashPage = new SplashPage();
        MainPage = mainPage;
        mainpage.Navigation.PushModalAsync(splashPage,false);
    }

My problem is, while on android everything works as expected, on iOS there is short timeframe in which the Mainpage is shown, which is than overlayed by the splash page. This doesn't look good and is irretating for the user.

I'm aware, that i can handle the above example in other ways, like setting the splash page as the mainpage and swapping it with another page when the user dismissed the splash page. But i have other situations in which it's not that easy, and where its just logical to design the page stack upfront.

So, my question is, how do i push several pages to the modal stack without showing each page for a short timeframe on iOS.

Upvotes: 2

Views: 2067

Answers (1)

hvaughan3
hvaughan3

Reputation: 11105

My answer would be to use Navigation.InsertPageBefore().

iOS now suggests that you make your splash page look like a super simple version of your main page. Obviously a lot of people do not like that because they want to show their stylish splash page to the world. But you might be able to use that same idea for this. If your splash page is a red background with a logo in the middle, you could set MainPage to an empty ContentPage with a red background, then PushModalAsync your splash page on top, then add your MainPage in front of the basic ContentPage. Once that is done, you could just pop your Splash and the user would be left staring at the Main.

Code time:

ContentPage basicSplash = new ContentPage { BackgroundColor = Color.Red };
NavigationPage nav = new NavigationPage(basicSplash); //Do Navigation Page here with basic in it

MainPage = nav; //Set basic splash

nav.Navigation.PushModalAsync(new SplashPage(), false); //Show SplashPage modal over basic

nav.Navigation.InsertPageBefore(new MainPage(), basicSplash); //You are now adding MainPage to the NavigationStack, not the ModalStack

nav.Navigation.RemovePage(basicSplash); //Remove basic splash, so now only MainPage is left sitting in NavigationStack

//Now you can do nav.PopModalAsync() when ready and the user should be looking at the MainPage since there is nothing left in the ModalStack and only MainPage is sitting in the NavigationStack

The only problem here would be that you would need to prevent the user from going back to basicSplash either by removing the page from the stack, setting mainPage to your.... MainPage, or by removing the back button and/or overriding ContentPage.OnBackButtonPressed

Upvotes: 5

Related Questions