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.
Now select Mobile App (Xamarin.Forms) and click on the Next button.
Give appropriate project name and click on Create button.
Read More: Xamarin.essentials: With Permission, App Theme, And Authentication
After that select template for the application and platform and click on Create button.
Now, add new page go to the solution explorer >> Right click on project name >> Add >> New Item
Select Content Page and give a name to the page and click on Add button.
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>
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());
}
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>
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());
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.
When we click on GO TO NEXT PAGE button it will navigate to Page2.
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>
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());
}
}
}
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>
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()
{
}
}
}
Image: Page NPage1.
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)