Replace application main page with animation

[mu-dawood]

Description

i know that we can change main page using this
App.Current.MainPage
but is it possible to change main page with some animation

[adrianknight89]

Can you expand on what kind of animation you're wanting? Would the new MainPage animate onto the existing one? Would it reveal itself atop a blank background (changing opacity from 0 to 1)? Etc.

I'd also question the need for switching main pages. Whatever you're trying to do can possibly be done with modal pages (e.g. use login page modally without animation while the TabbedPage is the MainPage).

[mu-dawood]

i have 2 application cycles
1- navigation page that will push security pages(select user type,login, forgot password,verify password, registration page)
2- main cycle that is master details page and many other pages

the two cycles need navigation bar so i can't use push modal without doing some extra code to handle navigation

i tried to use this method

i have 2 cases

• the application is not in background and started
  • the animation is slow and uggly
• the application is in background and started
  • the animation is good

i used SizeChanged or LayoutChanged events because its occurs after Appearing event
this video is showing two cases
https://1drv.ms/v/s!Aqxak4UqqG0AbyK1xXk7Iu798tU

the marks shows when i replaced main page

[mu-dawood]

i just want to replace main page with any kind of animation to make the app have a good look in the case i want to replace it

[mu-dawood]

this video is for same app but with 1000 milliseconds animation
https://drive.google.com/file/d/1iJJ6-1Lpl0mEQT9D6icohJLnpKKKHybP/view

[Mikilll94]

I agree that this feature would be very useful because it is common in apps to separate login flow from normal application flow.

[AndreiMisiukevich]

var oldPage = new ContentPage();
var navPage = new NavigationPage(oldPage);
...
await navPage.PushAsync(new ContentPage()); //push new page
navPage.RemovePage(oldPage); //remove old from navigation stack

[programmation]

@Mikilll94 I use a ControlTemplate for this, with the login view as one of its subviews and the main view as the ContentPresenter. I use a Behavior to animate them visible/invisible depending on the user's authentication status.

[Mikilll94]

@programmation This approach becomes problematic if your app does not have a homepage (i.e. user after launching an app can see many different views)

[AndreiMisiukevich]

@Mikilll94 why don't you want to use NavigationPage ?

[Mikilll94]

Because I want to have two separate navigation stacks: one for login flow and second for normal flow.

[GalaxiaGuy]

@Mikilll94 It's not perfect, but when I've needed to do this, I've used a NavigationPage and then after pushing, removed the previous page(s) from the stack.

[AndreiMisiukevich]

@GalaxiaGuy @Mikilll94 Re #2957 (comment)

[mu-dawood]

in my case my first page is navigation page that have 5 pages until login
the second one is master details page that have a navigation page as its details page

[programmation]

@programmation This approach becomes problematic if your app does not have a homepage (i.e. user after launching an app can see many different views)

@Mikilll94 I solve that issue by making each of the potential startup views have the same ControlTemplate. In fact all pages in the app that require authentication for access have the "authentication" ControlTemplate. Then I have a master switch inside the app that toggles true or false to match the user's authenticated status. The ControlTemplate shows the content if the user is authenticated, and the login page if not. It's actually a lot simpler than I make it sound here, and with Behaviors I can animate transitions between the states.

[abdu292]

Really looking for this as well!

[newky2k]

@samhouts has anyone looked at this -> https://forums.xamarin.com/discussion/90474/potential-proposal-animation-of-mainpage-transition

[ChocoWhoopies]

Hello,
I'm not sure if this is a direct answer but try to see how i solved my similar problem:

Navigation.InsertPageBefore(new Page(), this); //Insert page ontop of current Main Page
Navigation.RemovePage(Navigation.NavigationStack.First()); //Remove Main Page (root page)
Navigation.PopAsync(); //Pop off current page, there will be an animation here to the new Main Page (root page)

[samhouts]

Duplicate of #6033