Learn how to create a navigation page to quickly enable a navigable user interface with single method invocation to push a new page onto the stack.
- [Narrator] We now have two pages to find in our application, but we're only going to see that main page with the label because we don't really have any way to navigate between them. Let's go back to our app.xaml.cs, I mentioned there are different kinds of pages we can create, one of the kinds of pages we can create is a navigation page. So if we create a navigation page, and then we pass to that, the root page, that we want to start there. So we'll create a navigation page that starts with our main page display, but now we have the ability to call into navigation and move forward or backward through the UI Stack.
So on our main page, go here, let's go ahead and create a button to allow us to go to the next page, so we'll set on the text, show product detail, and on the clicked event, we'll go ahead and choose handle clicked. That's gonna allow us to move that where we want to insert it, go ahead and use Navigation.PushAsync. And this is gonna say push onto the navigation stack, particular class or view, put a new product detail, which is our other page, and push that onto the navigation stack.
Now you may have noticed it was also a push modal async, so if you need to pop up a user interface element or page as a modal dialogue on top of this page, you can do that as well. And we have pop async, will allow us to go back to the previous page and navigation stack. Now we've got that button in there to find, you will notice a little quirk with the previewer we saw it before as well, where we'd get some exceptions because we haven't built that particular base class with a handler in it so it's having some trouble with that particular bit of information. Let's close out our button class here, now our designer's happy.
Let's go ahead and switch over to iOS just to see that running, and choose an iPhone eight, and run that in the simulator. Got one error here, ah, we put a constructor there when I need to say a new main page. Got deleted by the editor as I was typing, now we have our simulator running, we should get our Welcome to Xamarin.Forms, but at the bottom we see our Show Product Detail, and we navigate to that product detail page, and we can see the back button now at the top, this is part of that navigation page.
So we have a navigation framework built into Xamarin.Forms simply by wrapping that root page with a navigation page. We can click the back button and go back here. Now on Android where you have a physical hardware back button, that or the software back button we just saw will give you the same result, and the same with a UWP device with a hardware back button.
- Creating a Xamarin.Forms solution
- Navigating between pages
- Screen layouts and controls in Xamarin.Forms
- Data binding
- Adding style to a control
- Using a Xamarin.Essentials package
- Embedding native controls in your shared forms
- Writing custom renderers