Creating Xamarin Navigation In C# using Microsoft Visual Studio

Prerequistes

  • Create a Xamarin Navigation in C#.

Xamarin Navigation

  1. Create a new solution in Xamarin.Forms Portable (PCL).

    solution

  2. We’ll have the environment, given below-

    environment

  3. Add the Main page.

    Right click on the name of the project portable ---> add new item -> Cross Platform ---> Code---> Forms Content Page (name it as Main Page).

    Main Page

  4. Add the second page.

    Right click on the name of the project portable --> add new item ---> Cross Platform ---> Code ---> Forms Content Page (name it as Second Page).

    page

  5. Now, we are ready to write the code. First of all, we’ll rewrite the App.cs code with the code, given below-
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Text;  
    5. using Xamarin.Forms;  
    6. namespace Booster2 {  
    7.     public class App: Application {  
    8.         public App() {  
    9.             MainPage = new NavigationPage(new MainPage()); {};  
    10.         }  
    11.         protected override void OnStart() {}  
    12.         protected override void OnSleep() {}  
    13.         protected override void OnResume() {}  
    14.     }  
    15. }  
    1. Now, we are going to write the code at the backend for both Main and Second Page. 

    Main Page
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Reflection.Emit;  
    5. using System.Text;  
    6. using Xamarin.Forms;  
    7. namespace Booster2 {  
    8.     public class MainPage: ContentPage {  
    9.         public MainPage() {  
    10.             Title = "Main Page";  
    11.             Button changePage = new Button {  
    12.                 Text = "Change Page Test",  
    13.                     HorizontalOptions = LayoutOptions.Center,  
    14.                     VerticalOptions = LayoutOptions.CenterAndExpand  
    15.             };  
    16.             changePage.Clicked += async(sender, args) => {  
    17.                 await Navigation.PushAsync(new SecondPage());  
    18.             };  
    19.             Content = new StackLayout {  
    20.                 Children = {  
    21.                     changePage  
    22.                 }  
    23.             };  
    24.         }  
    25.     }  
    26. }  
    Second Page
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Reflection.Emit;  
    5. using System.Text;  
    6. using Xamarin.Forms;  
    7. namespace Booster2 {  
    8.     public class SecondPage: ContentPage {  
    9.         public SecondPage() {  
    10.             Content = new StackLayout {  
    11.                 Children = {  
    12.                     new Label {  
    13.                         Text = "Hi. I'm the Second Page"  
    14.                     }  
    15.                 }  
    16.             };  
    17.         }  
    18.     }  
    19. }  

Now, if we work well, we’ll have, after the deployment (CTRL+5), the outputs are given below-

Android

outputs

outputs  

Windows 10 Desktop Emulator

Windows 10 Desktop Emulator

Windows 10 Desktop Emulator

Windows 10 Mobile

Windows 10 Mobile

Windows 10 Mobile

Next Recommended Readings