The NavigationPage provides automatic back navigation for a series of content pages. As the user moves through the pages in the app, the NavigationPage provides a back button for moving backward through the app pages. Content pages can also add additional toolbar items to the NavigationPage UI. This tutorial also looks using the Navigation class to push and pop items on the navigation stack.
- [Voiceover] This application has five content Pages shown here in the Pages Folder. I'll use the Navigation Page to move between these Pages. This is my Start Page. It's got a simple UI. Just a Stack Panel, an Explanatory Label, and some Buttons. To make this my Start Page, and the Navigation Page in the App, requires a small change in the App dot CS File. The key to using the Navigation Page is to instantiate it, and to assign it to the Main Page Property.
Don't look for a copy of a Navigation Page Sample File, here in the Portable Class Library. That's not how you make the Navigation Page. It's not defined as Xaml. Just create here in the App Class. Next, I instantiate my Start Page and pass it to the Constructor of the Navigation Page. Now when the App starts, Xamarin will load the Navigation Page. Then the Navigation Page creates the Start Page and loads it onto the Navigation Stack. Another way of saying it, is that our Start Page becomes the first Page in the Navigation Stack.
When User navigates to another Page, that Page is added to the Navigation Stack. Pressing the Back Button, pops the new Page off the Stack, and we're back at the Start Page. This is the Navigation App. I'm showing it on an Android device. The Iphone version looks similar. Look at this Page. The majority of this screen is my Start Page. The Navigation Page, it really doesn't have much UI. It consists of a small ribbon of UI called the Navigation Bar that is docked to the top of the App screen in Android and Iphone, and across the bottom of the screen in Windows phone.
The Navigation Bar is sometimes called the Application Bar or the Tool Bar. Now that the Navigation Page is ready, and the Start Page is loaded, I need a way to navigate to another Page. I'll do that with these two Buttons, the Red Page Button, and the Blue Page Button. When the User presses the Red Page Button, the App moves to that Page, and the Navigation Bar changes. See the Back Arrow up there? There's also something else, the word Red. That's the title of the current Page. When I press the Back Arrow, it takes me back to the Start Screen.
Let's look at the Code that makes this happen. The Navigation Class provides Methods for adding and removing items from the Navigation Stack. At the moment, there is one item on the Navigation Stack. The Navigation Page shows whatever Page is on top of the Navigation Stack. Currently, that's the Start Page. That was pushed on to the Stack by the App Constructor. Let's look at the Code on Line 19. When I call Navigation dot Push A Sync, new Red Page, several things happen.
A new instance of the Red Page is created. It's pushed onto the top of the Navigation Stack. Remember that the Page on top of the Navigation Stack is the one shown on the screen. So the Navigation Page loads the Red Page on to the screen, and the Navigation Bar shows the Back Button. I have similar Code in this Red Page here on Line 15 I'm calling Navigation Push A Sync. And this time, I'm loading the Odd Page Class. This is what it looks like on the phone. I touch the Red Page, it loads the Red Page.
I touch the Odd Page Button, and that loads the Odd Page. Now, when I touch the Back Button twice, it take me back to the Start Screen. There's something else interesting on the Odd Page. Let's go back there and look. Note that the Navigation Bar changes. On the right side are two new Manual Items, Odd Menu A, and Odd Menu B. These are called Tool Bar Items. They are defined in the Odd Page Xaml. Let me show you. On Line Six, I'm creating a Tool Bar Item and adding it to the Tool Bar Items Collection on Line Five.
The Name Property on Line Six and Line Seven is the text that's shown on the Tool Bar. Also note the Clicked Event Handler. It works just like a Button Clicked Handler. Let me show you. When the User touches the Odd Menu, I'll display an alert with the word, Odd Menu A Clicked. Here's what that looks like on the phone. I'll touch the Odd Menu A, and there's the alert. Now I'll press the Back Button, and then go to the Even Page. You see that the Even Page has a different Tool Bar Item showing the name, Go To Start.
When the User presses this Item, the App pops all the Items off the Navigation Stack and the App returns to the Start Page, like this. Let's look at the Code. Once again, I'm working with the Navigation Class. I have a Loop that determines how many Items are in the Back Stack. It does that by calling Navigation dot Navigation Stack dot Count. Then within the body of the Loop, I'm calling Navigation dot Pop A Sync. In my case, it will call twice so this will pop the Even Page and then it'll pop the Red Page.
There's more to learn about the Navigation Class. I encourage you to look at it when you have more time.
In this course, Walt Ritscher helps develop a sample app for each of the three platforms using Visual Studio and the IDEs in Xamarin (including Xamarin Studio). He touches on the processes that make Android, iOS, and Windows app development unique. Then he shows how to recreate the three apps as a single cross-platform app, and test and debug the app using Xamarin's powerful emulators. He also covers UI design with Xamarin Forms, the data binding engine that automatically syncs data between views and data sources, and pages, Xamarin's templates for content, navigation, tabbed, carousel, and master pages.
- What is Xamarin?
- Using Xamarin Forms and Xamarin Studio
- Setting up the development environment in Xamarin
- Touring the Xamarin IDEs
- Creating a new project in Visual Studio
- Creating the app UI
- Debugging the app on an emulator
- Creating a code library for the app
- Understanding the elements of a Xamarin cross-platform app
- Define UI with markup in Xamarin Forms
- Understanding data binding
- Exploring pages and the five page types