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-
    1. <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">  
    2.   
    3.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
    4.         <TextBlock x:Name="FirstPage" Text="Main Page" HorizontalAlignment="Left" VerticalAlignment="Top" Height="60" Width="250" FontSize="40" />  
    5.         <Button x:Name="button" Content="Navigation Test Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="95" Width="187" Click="button_Click" />  
    6.   
    7.     </Grid>  
    8. </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-
    1. <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">  
    2.   
    3.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
    4.         <TextBlock x:Name="Main Page" Text="Hi. I'm the second page" HorizontalAlignment="Center" VerticalAlignment="Center" Height="60" Width="300" FontSize="28" />  
    5.     </Grid>  
    6. </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)-
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.IO;  
    4. using System.Linq;  
    5. using System.Runtime.InteropServices.WindowsRuntime;  
    6. using Windows.Foundation;  
    7. using Windows.Foundation.Collections;  
    8. using Windows.UI.Xaml;  
    9. using Windows.UI.Xaml.Controls;  
    10. using Windows.UI.Xaml.Controls.Primitives;  
    11. using Windows.UI.Xaml.Data;  
    12. using Windows.UI.Xaml.Input;  
    13. using Windows.UI.Xaml.Media;  
    14. using Windows.UI.Xaml.Navigation;  
    15.   
    16. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
    17.   
    18. namespace Booster1 {  
    19.     /// <summary>  
    20.     /// An empty page that can be used on its own or navigated to within a Frame.  
    21.     /// </summary>  
    22.     public sealed partial class MainPage: Page {  
    23.         public MainPage() {  
    24.             this.InitializeComponent();  
    25.         }  
    26.   
    27.         private void button_Click(object sender, RoutedEventArgs e) {  
    28.             this.Frame.Navigate(typeof(SecondPage));  
    29.         }  
    30.     }  
    31. }  
  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)-
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Text;  
    5.   
    6. using Xamarin.Forms;  
    7.   
    8. namespace Booster2 {  
    9.     public class App: Application {  
    10.         public App() {  
    11.             // The root page of your application  
    12.             MainPage = new NavigationPage(new MainPage()); {};  
    13.         }  
    14.   
    15.         protected override void OnStart() {  
    16.             // Handle when your app starts  
    17.         }  
    18.   
    19.         protected override void OnSleep() {  
    20.             // Handle when your app sleeps  
    21.         }  
    22.   
    23.         protected override void OnResume() {  
    24.             // Handle when your app resumes  
    25.         }  
    26.     }  
    27. }  
  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
      1. using System;  
      2. using System.Collections.Generic;  
      3. using System.Linq;  
      4. using System.Reflection.Emit;  
      5. using System.Text;  
      6.   
      7. using Xamarin.Forms;  
      8.   
      9. namespace Booster2  
      10. {  
      11.     public class MainPage : ContentPage  
      12.     {  
      13.         public MainPage()  
      14.         {  
      15.             Title = "Main Page";  
      16.   
      17.             Button changePage = new Button  
      18.             {  
      19.                 Text = "Change Page Test",  
      20.                 HorizontalOptions = LayoutOptions.Center,  
      21.                 VerticalOptions = LayoutOptions.CenterAndExpand  
      22.             };  
      23.             changePage.Clicked += async (sender, args) =>  
      24.             {  
      25.                 await Navigation.PushAsync(new SecondPage());  
      26.             };  
      27.   
      28.             Content = new StackLayout  
      29.             {  
      30.                 Children =  
      31.                 {  
      32.                     changePage  
      33.                 }  
      34.             };  
      35.         }  
      36.   
      37.     }  
      38. }  
    • Second Page
      1. using System;  
      2. using System.Collections.Generic;  
      3. using System.Linq;  
      4. using System.Reflection.Emit;  
      5. using System.Text;  
      6.   
      7. using Xamarin.Forms;  
      8.   
      9. namespace Booster2  
      10. {  
      11.     public class SecondPage : ContentPage  
      12.     {  
      13.         public SecondPage()  
      14.         {  
      15.             Content = new StackLayout  
      16.             {  
      17.                 Children = {  
      18.                     new Label { Text = "Hi. I'm the Second Page" }  
      19.                 }  
      20.             };  
      21.         }  
      22.     }  
      23. }  
  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
    1. private void button_Click(object sender, RoutedEventArgs e) {  
    2.     this.Frame.Navigate(typeof(SecondPage));  
  • Xamarin 

    MainPage Logic
    1. changePage.Clicked += async(sender, args) => {  
    2.     await Navigation.PushAsync(new SecondPage());  
    3. };  
    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
    1. MainPage = new NavigationPage(new MainPage());  
    2. {  
    3. };  
    The method, given above, specifies that the ContentPage named MainPage is the root page.