Beer and Xamarin.Forms – How to Use NavigationPage

In this lesson

  • Change App MainPage to NavigationPage
  • Set root of NavigationPage
  • Update ListView ItemSelected handler to push new page


Tap on time to skip ahead


A lot of mobile applications follow what is known as a “master detail pattern” when navigating between screens. And so with our application we want to do more than just display an alert when we tap on an item in a ListView. We actually want to go to a details page for that particular brewery. So to kind of kick things off or to reconfigure our application and to accommodate this we need to change our main page in our App CodeBehind from the new STLBrewsPage to a new NavigationPage. And if we look at the constructor options for our NavigationPage we’ll see that we can supply it a root page. So this is where I’m going to reimplement our STLBrewsPage.


And so now if we run our application, with this just one new line of code, we’ll see that we now have this navigation bar here at the top of our application. It’s kinda hard to see because it’s white on white. And because we have this navigation bar here, we can go back into our XAML for the STLBrewsPage. I can remove our padding and then when I rerun our application our ListView should now sit nicely right under our navigation bar. And it does.


But, you know, here again it’s kind of blank. So why don’t we had a title to our STLBrewsPage which we can actually do at the XAML level. We can say “Title equals Breweries.” And real quick if I rerun application, we’ll see our title. So now that we have a NavigationPage, we’ve basically now have an entity that will handle going from page to page for us.


So let’s go back toward our CodeBehind, and we’ll see we have our ItemSelected handler. But before we do anything we need a page to navigate to. So I’m going to right click on our STLBrews PCL project and I going to say “Add New File…” And then we have these nice templates here that Xamarin Studio provides. And I’m going to select from the Forms collection and I’m going to say I want a new “Forms ContentPage XAML.” And I’m just gonna call this a “BreweryPage” for now. And we’ll see it generates our XAML for this page as well as the corresponding CodeBehind.


In the XAML for our BreweryPage, I’m gonna temporarily put title in here and it says “Brewery Details.” And this can help better illuminate and illustrate what has changed when I go into our ItemSelected handler. And I can say “this.Navigation.PushAsync(new BreweryPage()).” And so now if we run our application. When I tap on one of these items, we now go to brewery details via our NavigationPage that we instantiated and added to the root of our application.


So the NavigationPage is responsible for our back button as well as the transitions from screen to screen. If we take a quick second, we can go to our Android version. And we’ll see we have a nice navigation bar here. And when I click on item it launches a new Activity and it has the integration with the hardware back button already wrapped into it.


So that’s all well and good, but we need to kind of know more about what brewery we’re looking at exactly. So I’m going to go into the constructor of our BreweryPage. And I’m gonna to add a parameter called “model.” And now in my constructor I’m gonna say “this.Title = model.Name” And if I go back to our handler we now have intellisense telling us “hey we’re expecting a parameter in our constructor” and I can say “e.SelectedItem.” And I’m going to go ahead and cast it “as Brewery.” And so now if I run this. When I tap on 4 Hands, we see “4 Hands” in the title. If I tap on “Civil Life,” I see “Civil Life” appear.


And just to kind of again demonstrate how fun quick you can be to work with Xamarin.Forms, I’m going to run our iOS version and we should see the same type of changes reflected in our experience. So if I tap here… And it didn’t update. To fix this all you have to do is do a “Clean All.” Sometimes Xamarin Studio can be a bit sticky with the DLLs that have been compiled, and so a “Clean All” more often that will clear up that issue. So now if I click here we see our title, here again. So that’s how we can simply set up navigating from one page to the next or from one screen to the other using NavigationPage.