Difference Between UWP And Xamarin Page Navigation

This implementation is a “basic-item” of our own apps. Now, I’m going to show you the code.

UWP

1. Create a new solution in UWP.
   
   
   
   
2. We’ll have the environment, given below-
   
   
   
   
3. Add a second page. Right click on the name of the project -> add new item -> blank page (name it SecondPage).
   
   
4. Now, we are ready to write the code. Double click on MainPage.xaml.
   
   
   
   
5. Now, we are going to replace the auto generated code. Write the code, given below-
   

   <Page x:Class="Booster1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Booster1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
   
       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
           <TextBlock x:Name="FirstPage" Text="Main Page" HorizontalAlignment="Left" VerticalAlignment="Top" Height="60" Width="250" FontSize="40" />
           <Button x:Name="button" Content="Navigation Test Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="95" Width="187" Click="button_Click" />
   
       </Grid>
   </Page>

   The output is given below-
   
   
   
   
6. Now, we’ll write the customized code for the second page. Double click on SecondPage.xaml. Delete the auto generated code and write the code, given below-
   

   <Page x:Class="Booster1.SecondPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Booster1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
   
       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
           <TextBlock x:Name="Main Page" Text="Hi. I'm the second page" HorizontalAlignment="Center" VerticalAlignment="Center" Height="60" Width="300" FontSize="28" />
       </Grid>
   </Page>

   The output is given below- 
   
   
   
   
7. Now, we’ll write the code at the backend to manage the logic. Open MainPage.xaml.cs by splitting the MainPage.xaml node and double click on the name of file.
   
   
8. Delete the code and write the following (bold blue for the most important line)-
   

   using System;
   using System.Collections.Generic;
   using System.IO;
   using System.Linq;
   using System.Runtime.InteropServices.WindowsRuntime;
   using Windows.Foundation;
   using Windows.Foundation.Collections;
   using Windows.UI.Xaml;
   using Windows.UI.Xaml.Controls;
   using Windows.UI.Xaml.Controls.Primitives;
   using Windows.UI.Xaml.Data;
   using Windows.UI.Xaml.Input;
   using Windows.UI.Xaml.Media;
   using Windows.UI.Xaml.Navigation;
   
   // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
   
   namespace Booster1 {
       /// <summary>
       /// An empty page that can be used on its own or navigated to within a Frame.
       /// </summary>
       public sealed partial class MainPage: Page {
           public MainPage() {
               this.InitializeComponent();
           }
   
           private void button_Click(object sender, RoutedEventArgs e) {
               this.Frame.Navigate(typeof(SecondPage));
           }
       }
   }

9. Now, if we worked well, we’ll have, after the deployment (CTRL+5), the following outputs-
   
   Windows 10 Desktop simulator
   
    
   
   
   
   Windows 10 Mobile
     
   

Xamarin

1. Create a new solution in Xamarin.Forms Portable (PCL).
   
   
   
   
2. We’ll have the following environment-
   
   
   
   
3. Add the Main Page,
   
   Right click on the name of the project portable -> add new item -> Cross Platform -> Code -> Forms ContentPage (name it MainPage).
   
   
   
   
4. Add the second page.
   
   Right click on the name of the project portable -> add new item -> Cross Platform -> Code -> Forms ContentPage (name it SecondPage).
   
   
   
   
5. Now, we are ready to write the code. First of all, we’ll rewrite the App.cs code with the following (blue bold for the most important line)-
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   
   using Xamarin.Forms;
   
   namespace Booster2 {
       public class App: Application {
           public App() {
               // The root page of your application
               MainPage = new NavigationPage(new MainPage()); {};
           }
   
           protected override void OnStart() {
               // Handle when your app starts
           }
   
           protected override void OnSleep() {
               // Handle when your app sleeps
           }
   
           protected override void OnResume() {
               // Handle when your app resumes
           }
       }
   }

6. Now, we are going to write the code at the backend for both Main and Second Page (blue bold for the most important line)-
   
   
• Main Page
  

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Reflection.Emit;
  using System.Text;
  
  using Xamarin.Forms;
  
  namespace Booster2
  {
      public class MainPage : ContentPage
      {
          public MainPage()
          {
              Title = "Main Page";
  
              Button changePage = new Button
              {
                  Text = "Change Page Test",
                  HorizontalOptions = LayoutOptions.Center,
                  VerticalOptions = LayoutOptions.CenterAndExpand
              };
              changePage.Clicked += async (sender, args) =>
              {
                  await Navigation.PushAsync(new SecondPage());
              };
  
              Content = new StackLayout
              {
                  Children =
                  {
                      changePage
                  }
              };
          }
  
      }
  }

• Second Page
  

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Reflection.Emit;
  using System.Text;
  
  using Xamarin.Forms;
  
  namespace Booster2
  {
      public class SecondPage : ContentPage
      {
          public SecondPage()
          {
              Content = new StackLayout
              {
                  Children = {
                      new Label { Text = "Hi. I'm the Second Page" }
                  }
              };
          }
      }
  }

7. Now, if we worked well, we’ll have, after the deployment (CTRL+5), the outputs are given below-
   
   Android
   
      
   
   Windows 10 Desktop Emulator
   
     
   
   Windows 10 Mobile
   
     

Conclusions 

The methods to implement the navigation are different.

• UWP
  

  private void button_Click(object sender, RoutedEventArgs e) {
      this.Frame.Navigate(typeof(SecondPage));
  }

• Xamarin 
  
  MainPage Logic
  

  changePage.Clicked += async(sender, args) => {
      await Navigation.PushAsync(new SecondPage());
  };

  The async method does not run necessarily. In this case, it is a second thread.
  
  Title = "Main Page";
  
  This property allows us to display the name of the app on the top of the screen with the app icon (on Android).
  
  App.cs Logic
  

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

  The method, given above, specifies that the ContentPage named MainPage is the root page.