DEV Community

Cover image for Page Navigation between two pages in Xamarin.Forms
Harshal Suthar
Harshal Suthar

Posted on • Originally published at ifourtechnolab.com

Page Navigation between two pages in Xamarin.Forms

Xamarin is an open-source platform to develop Cross-platform and multi-platform applications, for example, Android, iOS, Windows. In this platform code sharing concept is used. We can write business logic in a single language but achieve native performance, look and feel on each platform.

In this blog, we will discuss page navigation between two pages in Xamarin.Forms. Navigation is performing switching between two or more pages in the application. Navigation pages manage navigation among the pages using stack-based architecture. When we are using page navigation in our application, the home page's instance should be passed into the constructor of the NavigationPage object.

Navigation.PushAsync(); or Navigation.PushModelAsync(); is used to go to another page of the application. Navigation.PopAsync(); or Navigation.PopModelAsync(); is used to go back to the previous page. PushAsync(Page) Presents a page by asynchronously pushing it onto the navigation stack and PushModelAsync(Page) presents a page modally. PopAsync() removes the top page asynchronously from the navigation stack.

Different platforms provide different APIs and UI for navigation. There are two types of navigation in Xamarin.Forms: Hierarchical Navigation and Model Navigation. The navigation class provides hierarchical navigation. In hierarchical navigation, users can navigate through pages forward and backward. To move from one page to another, an application will push a page to the navigation stack and the application will pop the page to return to the previous page. Xamarin.Forms provide support of model pages. In Model navigation, users have to complete a self-contained task that cannot navigate until the task is completed or canceled.

The prerequisite for performing Page Navigation between pages is Visual Studio 2017 or the upper version. Now, let's create an application to perform Page Navigation. These steps are followed to create Page Navigation Application.

Click on Create a new project to initiate a new Xamarin.Forms project.

Image description

Now select Mobile App (Xamarin.Forms) and click on the Next button.

Image description

Give appropriate project name and click on Create button.

Image description

Read More: Xamarin.essentials: With Permission, App Theme, And Authentication

After that select template for the application and platform and click on Create button.

Image description

Now, add new page go to the solution explorer >> Right click on project name >> Add >> New Item

Image description

Select Content Page and give a name to the page and click on Add button.

Image description

Add one more page as added in the last two steps.

Now, go to the First page (NPage1) and add button Control to the page. Create Clicked Event on this button. Add this code to XAML page:]


  <!--?xml version="1.0" encoding="utf-8" ?-->
<contentpage x:class="PageNavigation.NPage1" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
  <contentpage.content><button backgroundcolor="Blue" clicked="Button_Clicked_1" horizontaloptions=" Center" text="Go to next page" textcolor="White" verticaloptions="Center"></button>
  </contentpage.content>
</contentpage>

Enter fullscreen mode Exit fullscreen mode

Now, in the code behind the file add this code on the Button_Clicked_1() method.


   async private void Button_Clicked_1(object sender, EventArgs e)
     {
       await Navigation.PushAsync(new Page2());
     }

Enter fullscreen mode Exit fullscreen mode

Navigation.PushAsync(); will navigate us to Page2.

Add this code to the second XAML page (Page2). This page will open when we will click on the button created in NPage1.


     <!--?xml version="1.0" encoding="utf-8" ?-->
<contentpage x:class="PageNavigation.Page2" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
  <contentpage.content>
      <stacklayout>
          <label horizontaloptions="CenterAndExpand" text="Welcome to Next Page!" verticaloptions="CenterAndExpand">
      </label></stacklayout>
  </contentpage.content>
</contentpage>

Enter fullscreen mode Exit fullscreen mode

Now go to the App.xaml.cs file to set the first page or home page of our application. Add this code to the App () method.


   MainPage = new NavigationPage(new NPage1());

Enter fullscreen mode Exit fullscreen mode

NavigationPage() initializes new NavigationPage object. NavigationPage(Page) creates new NavigationPage element with root. It is the root element of NavigationPage. In the above line, we have set NPage1 as a root element. When we will run our application our first page will be NPage1.

Image description

When we click on GO TO NEXT PAGE button it will navigate to Page2.

Image description

This way we can perform Page Navigation between two pages. In the next example, we will perform navigation between two pages- Login Page to next page. We will follow the same steps to perform navigation as described above.

We will create two XAML pages named NPage1 and NPage2. In these two pages, we will create controls like label, Entry and, button. In the Code behind file, we will do navigation on the button click method and in App.xaml.cs file we will set our root page of the application.

Planning to Hire Xamarin App Development Company? Your Search ends here.

NPage1 (xaml file)


          <!--?xml version="1.0" encoding="utf-8" ?-->
<contentpage x:class="PageNavigation.NPage1" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
  <contentpage.content>
      <grid>
          <grid.rowdefinitions>
              <rowdefinition>
              <rowdefinition>
              <rowdefinition>
              <rowdefinition>
          </rowdefinition></rowdefinition></rowdefinition></rowdefinition></grid.rowdefinitions>
          <label fontsize="Title" horizontaloptions="Center" text="Welcome to First Page!" textcolor="Black" verticaloptions="Center">
          <entry grid.row="1" horizontaloptions="Center" placeholder="Enter User name.." textcolor="Black" verticaloptions="Center">
          <entry grid.row="2" horizontaloptions="Center" ispassword="True" placeholder="Enter Password.." textcolor="Black" verticaloptions="Center"><button backgroundcolor="CadetBlue" clicked="Button_Clicked" grid.row="3" horizontaloptions="Center" text="Go to next page" textcolor="White" verticaloptions="Center"></button>
          </entry>
        </entry>
      </label>
    </grid>
  </contentpage.content>
</contentpage>

Enter fullscreen mode Exit fullscreen mode

NPage1.xaml.cs (Code behind file)


  using System;
  using Xamarin.Forms;
  using Xamarin.Forms.Xaml;

  namespace PageNavigation
  {
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class NPage1 : ContentPage
     {
       public NPage1()
         {
            InitializeComponent();
         }

      async private void Button_Clicked(object sender, EventArgs e)
        {
           await Navigation.PushAsync(new NPage2());
         }
    }
   }

Enter fullscreen mode Exit fullscreen mode

Image description

NPage2 (xaml file)


          <!--?xml version="1.0" encoding="utf-8" ?-->
<contentpage x:class="PageNavigation.NPage2" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
  <contentpage.content>
      <stacklayout>
          <label fontsize="Subtitle" horizontaloptions="CenterAndExpand" text="Login Successful!" textcolor="LightCoral" verticaloptions="CenterAndExpand">
      </label></stacklayout>
  </contentpage.content>
</contentpage>


Enter fullscreen mode Exit fullscreen mode

App.xaml.cs


namespace PageNavigation
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new NPage1());
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}

Enter fullscreen mode Exit fullscreen mode

Image description
Image: Page NPage1.

Image description
Image: Page NPage2.

Here, we have run this application on the Android platform as we know Xamarin is a platform where we can develop the cross-platform and multi-platform application so we can also run this application in UWP and iOS platforms. For that, we have to add a reference to the platforms.

Conclusion

In Xamarin.Forms NavigationPage class is used to perform navigation between the pages. Navigation means switching from one page to another page of our application. NavigationPage adds or removes the content of the page that we have push or pop. In Xamarin.Forms Page Navigation uses Stack-based architecture. Navigation.PushAsync() and Navigation.PopAsync() is used to perform navigation. PushAsync() is used to go next page, it adds a page to the top of the navigation stack and PopAsync() is used to go back to the previous page, it removes the most recent page from the application. In this blog, we have seen how to perform navigation and used PageNavigation and Navigation.PushAsync().

Top comments (0)