CODEWITHSUNDEEP
xamarinxamarin.forms
Ganeshgm7
Ganeshgm7

Reputation: 455

Different Types of Navigation in Xamarin Forms

What is the difference between these two Navigation paradigms in Xamarin.Forms?

await Navigation.PushModalAsync(new Dashboard());

await Navigation.PushModalAsync(new NavigationPage(new Dashboard()));

Upvotes: 2

Views: 1527

Answers (2)

Brandon Minnick
Brandon Minnick

Reputation: 15322

What is a Modal Page

Navigation.PushModalAsync will cause the new Xamarin.Forms.Page to appear Modally, meaning its animation will start from the bottom of the screen, covering the previous current page and it will not contain a back-button.

On iOS, a user will not be able to swipe-left to return to the previous page.

Android users are able to use the hardware back button to dismiss a modal page.

Modal pages are useful when you want the user to make a conscious decision to dismiss the page.

Example

When an iOS user is filling out a form and they swipe left to go back, does it save the form or discard the form? It is unclear to the user. To make the UX more intuitive, you should display the form modally

UI Differences

Using await Navigation.PushModalAsync(new Dashboard()); will display the Dashboard Page Modally, but the new Page will not have a NavigationBar.

enter image description here

Using await Navigation.PushModalAsync(new NavigationPage(new Dashboard())); will also display the Dashboard Page Modally, but the new Page will have a NavigationBar.

enter image description here

Sample App Source Code: https://github.com/brminnick/XamList

Edit

@AlessandroCaliaro and I had a good discussion in the comments of his answer, below:

It's important to note that Xamarin.Forms.INavigation uses two different stacks, ModalStack and NavigationStack. Navigation.PushModalAsync adds a Page to the ModalStack and Navigation.PushAsync adds a Page to the NavigationStack.

And to pop a Page from the ModalStack, you need to use Navigation.PopModalAsync(), whereas you would use Navigation.PopAsync() to remove a Page from the NavigationStack.

Upvotes: 8

Alessandro Caliaro
Alessandro Caliaro

Reputation: 5768

The first, push a page in a "modal" way (without navigation bar on the top) the second... is an error because you try to add a navigationpage to a navigationstack, but I think it is not possible....

Upvotes: -1

Related Questions