Introduction
- Visual Studio 2017 RC.
The steps given below are required to be followed in order to navigate from one page to another page in Xamarin.Forms, using Visual Studio.
Step 1
Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio or click (Ctrl+Shift+N).




- Windows Desktop Extension for the UWP. version:10.0.1439
- Windows Desktop Extension for the UWP. version:10.0.1058
Afterward, click OK.



Step 8
In this step, add another one page, whose name is called SecondPage.xaml. Go to Solution Explorer-->Your Project-->Portable-->Right click-->Add-->New Item (Ctrl+Shift+A).
Step 9
Now, select the Forms XAML page and give the name (SecondPage.xaml).



Step 10
In this step, go to the MainPage.xaml page and write the code given below.
MainPage.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="PageNavigation.MainPage" Title="MainPage">
- <StackLayout BackgroundColor="White" Padding="60" VerticalOptions="Center">
- <Button Text="Second Page" BackgroundColor="Blue" Clicked="NavigateButton_OnClicked">
- </Button> </StackLayout>
- </ContentPage>

- <?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="PageNavigation.SecondPage" Title="Second Page">
- <StackLayout BackgroundColor="White" Padding="60" VerticalOptions="Center">
- <Button Text="Main Page" BackgroundColor="Blue" Clicked="NavigateButton_OnClicked">
- </Button> </StackLayout>
- </ContentPage>

Step 12
In this step, go to the MainPage.xaml.cs page. Create the NavigateButton_OnClicked method and write the code given below.
MainPage.xaml.cs
- using Xamarin.Forms;
- namespace PageNavigation {
- public partial class MainPage: ContentPage {
- public MainPage() {
- InitializeComponent();
- }
- private async void NavigateButton_OnClicked(object sender, EventArgs e) {
- await Navigation.PushAsync(new SecondPage());
- }
- }
- }

SecondPage.xaml.cs
- using Xamarin.Forms;
- namespace PageNavigation {
- public partial class SecondPage: ContentPage {
- public SecondPage() {
- InitializeComponent();
- }
- private async void NavigateButton_OnClicked(object sender, EventArgs e) {
- await Navigation.PushAsync(new MainPage());
- }
- }
- }

- public App()
- {
- MainPage = new NavigationPage(new MainPage());
- }

Step 15
Now, you can run your app. Go to the Debug configuration Manager. Choose platform and check to build and deploy option. Afterward, click close.


Step 16
If you have Windows 10 Emulator, you can run it. If you don't have it, simply run Local Machine.


Output
After a few seconds, the app will start running on your Windows 10 Emulator. You will click the Second Page button.
Now, you will see the Second Page successfully. You will click the Main Page button. You will see the Main Page.
This was the process of how to navigate from one page to another page in Xamarin.Forms, using Visual Studio.



Revathi ParvathiPosted Feb 22, 2018, 11:57 PM
Very nice article.
Karabo kbPosted Jun 9, 2017, 9:03 AM
Is it possible to get this sample?
Asfend YarPosted Feb 1, 2017, 1:53 PM
Navigation.PushAsync(new Page()); That's all then why one need heavy stuff and article. It should be smaller.
Asfend YarPosted Feb 1, 2017, 1:51 PM
Just Useless because there're lot of stuff already placed in csharp corner. The csharpcorner standard is actually down !
Mahesh AllePosted Feb 1, 2017, 9:16 AM
Overall is good article. But the images in the article are not visible at all. The text in the image is not visible. You have taken print screen of you PC and pasted in the article. No need to past entire screen just capture the required part of the screen. I suggested to use "snipping tool" to capture the part of the screen. Please take case this next time.