This series begins with an overview here
In Part 2 we considered MVVM

This series is based on my Pluralsight Course: Building Your First Mobile Application with Xamarin.Forms and Visual Studio 2017

Navigation

Just about any serious mobile application will have two or more “pages.”  (We’re going to refer to pages throughout this series, though that is less meaningful in mobile apps than it is in, for example, desktop applications).

The starting point for Xamarin.Forms navigation is with the Navigation service.  To see how this works, let’s create a new Xamarin.Forms (blank) application named NavigationDemo.

Out of the box, you have three projects as described in the previous parts of this series:

• NavigationDemo
• NavigationDemo.Droid
• NavigationDemo.iOS

We’ll only be concerned with the first of these (the PCL).  Open App.xaml.cs and you should see that the MainPage of the application is set to a NavigationDemoPage,

    public partial class App : Application {
       public App() {
          InitializeComponent();
 
          MainPage = new NavigationDemoPage();
       }
 

We need to wrap the main page in a NavigationPage instance to set up the navigation system.  Navigating from one page to another will be accomplished using this service.

  MainPage = new NavigationPage(new NavigationDemoPage());

To see this at work, let’s create a second page which we’ll name Page2.xaml.

To do so, right click on the PCL project and choose Add -> New File…

In the dialog box, select Forms on the left, and Forms ContentPage XAML on the right.  Name the page Page2 and click New.

In page 2 we’ll just add an identifying label.  I’ll do this within a StackLayout as I think it is a best practice to always use a layout view to contain all your other views:

  <?xml version="1.0" encoding="UTF-8"?>
  <ContentPage
     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="NavigationDemo.Page2">
     <ContentPage.Content>  
    <StackLayout>
           <Label
              Text="Welcome to Page 2"
              FontSize="24"
              VerticalOptions="Center"
              HorizontalOptions="Center" />
    </StackLayout>
     </ContentPage.Content>
  </ContentPage>

We now can set up our navigation from the first page to the second.  On the first page we’ll add a button,  Delete the label that is put there by default and replace it with this XAML:

 <?xml version="1.0" encoding="utf-8"?>
 <ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Navigation"
    x:Class="Navigation.NavigationPage">
    <StackLayout>
       <Label
          Text="Page 1"
          FontSize="24"
          HorizontalOptions="Center" />
       <Button
          Text="Go to page 2"
          Clicked="Handle_Clicked" />
    </StackLayout>
 </ContentPage>

All the action will happen in the Button’s clicked event handler, which is in the code behind page.

       void Handle_Clicked( object sender,System.EventArgs e ) {
          Navigation.PushAsync(new Page2());
       }

Notice that we use the PushAsync static method of the Navigation object.  That invokes the navigation service so that when you click on the button you are taken to Page2. Go ahead and try it, I’ll wait here.

Note that the “Back” button on Page 2 is provided for you automatically by the Navigation system.

Passing Data to the Second Page

Often, you will want to pass data from the calling page (in this case, NavigationDemoPage) to the called page (in this case, Page 2).

Step 1 is just to add the value we want to pass to the call to Page 2’s constructor.  That is, we modify the Handle_Clicked event handler to pass in the value:

       void Handle_Clicked( object sender,System.EventArgs e ) {
          int someValue = 35;
          Navigation.PushAsync( new Page2( someValue ) );
       }

This will be passed to the Page2 constructor.  In order to see the value, we’ll modify Page2’s XAML to add a label bound to a property in Page2 that will be assigned the incoming value.  Here’s the XAML:

 <?xml version="1.0" encoding="UTF-8"?>
 <ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="NavigationDemo.Page2">
    <ContentPage.Content>
       <StackLayout>
          <Label
             Text="Welcome to Page 2"
             FontSize="24" />
          <Label
             Text="{Binding TheValue}"
             FontSize="36" />
       </StackLayout>
    </ContentPage.Content>
 </ContentPage>

And here is Page2, now with the value being passed into the constructor and assigning it to the public property that we bind to

 using System;
 using System.Collections.Generic;
 
 using Xamarin.Forms;
 
 namespace NavigationDemo {
    public partial class Page2 : ContentPage {
       public int TheValue { get; set; }
 
       public Page2( int aValue ) {
          TheValue = aValue;
 
          BindingContext = this;
          InitializeComponent();
       }
    }
 }
 

Notice that we set the BindingContext to “this” — that is to Page2 itself, which is where the property we’re binding to (TheValue) is located.

The result is that when you navigate to Page2 you see the value that was passed from NavigationDemoPage.

Source code