Navigating to a second page

In this tutorial, you will learn how to navigate the user to another page when the user clicks the Start button. The second page will show the user's step counts.

Creating a Second Page

Take the following steps to create the second page:

1. In the Visual Studio Solution Explorer, right-click on your project(MySteps), click Add > New Item.

2. When the Add New Item window appears, select Xamarin.Forms from the left menu as highlighted in the image below, and select Content Page.

3. Type in the file name for StepCountPage in the Name edit box, and click Add.

   

4. In the StepCountPage.xaml file, change the font size and text of Label as follows:

   <StackLayout>
     <Label Text="0 Steps"
             FontSize="Large"
             VerticalOptions="CenterAndExpand"
             HorizontalOptions="CenterAndExpand"/>
   </StackLayout>
   

5. Set the StepCountPage as the root page of the application in App.xaml.cs as below:

   public App()
   {
     InitializeComponent();
     //MainPage = new MySteps.MainPage();
     MainPage = new MySteps.StepCountPage();
   }
   

6. Build and run MySteps by pressing Ctrl+F5.

   When you build and run MySteps, the StepCountPage will be shown as the start page on the emulator.

   

Navigating Between pages

Xamarin.Forms provides NavigationPage, TabbedPage, Shell, etc. for navigating pages.

In MySteps, we will use the NavigationPage class, which keeps a navigation history and provides a way for users to move back to the pages where they came from. Use the NavigationPage by assigning its instance, which itself initializes with a start-up page—an instance of MainPage. The finished code of App.xaml.cs is shown below:

public App()
{
    InitializeComponent();
    //MainPage = new MySteps.MainPage();
    //MainPage = new MySteps.StepCountPage();
    MainPage = new NavigationPage(new MainPage());
}

Next, in the MainPage.cs file, create a logic that moves from MainPage to StepCountPage when the the user clicks the Start button.

1. In the MainPage.xaml file, set the Clicked event to an event handler named Button_Clicked that is located in the code-behind file, MainPage.xaml.cs.

   <StackLayout>
     <Label  Text="Welcome to My Steps!"
             VerticalOptions="CenterAndExpand"
             HorizontalOptions="CenterAndExpand"/>
     <Button Text="Start"
             Clicked="Button_Clicked" />
   </StackLayout>
   

2. In the MainPage.xaml.cs, implement the Button_Clicked event handler method:

   public partial class MainPage : ContentPage
   {
       ...
       // Invoked when the button is clicked
       private async void Button_Clicked(object sender, EventArgs e)
       {
           await Navigation.PushAsync(new StepCountPage());
       }
       ...
   }
   

Now when a user taps the button, the Button_Clicked method executes. The sender argument represents a Button object responsible for the event. You can use this to access the source of the event, or to distinguish between multiple button objects sharing the same event handler.

In order to prevent blocking the UI thread, in the Button_Clicked method, you should use the async modifier and await operator to call the NavigationPage.PushAsync() method which asynchronously pushes a page onto the navigation stack.

Run MySteps. Don't be alarmed by the text being slightly pushed downwards. Focus that you can now navigate from MainPage to StepCountPage using the Start button. You can return to MainPage by pressing the Back button of the emulator.

When you build and run MySteps, you can see the text being slightly pushed downwards because there is some empty space occupied for the navigation bar. By using NavigationPage.SetHasNavigationBar(BindableObject, Boolean) method, you can hide it as follows:

public MainPage()
{
    NavigationPage.SetHasNavigationBar(this, false);
    InitializeComponent();
}

public StepCountPage()
{
    NavigationPage.SetHasNavigationBar(this, false);
    InitializeComponent();
}

Alternatively, you can set this in XAML by setting the property attribute NavigationPage.HasNavigationBar="false" as follows:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             NavigationPage.HasNavigationBar="False"
             x:Class="MySteps.MainPage">
  <ContentPage.Content>
    ...
    ...
  </ContentPage.Content>
</ContentPage>

Run MySteps again. Now, you can see the text is in the center of the screen.

In the next tutorial, you will learn how to request the step count data from the Galaxy Watch's device sensor and display it on the screen.