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

Create a new solution in UWP.
We’ll have the environment, given below-
Add a second page. Right click on the name of the project -> add new item -> blank page (name it SecondPage).
Now, we are ready to write the code. Double click on MainPage.xaml.
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">
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" />
7. </Grid>
8. </Page>
The output is given below-
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">
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-
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.
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;
16. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
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. }
27. private void button_Click(object sender, RoutedEventArgs e) {
28. this.Frame.Navigate(typeof(SecondPage));
29. }
30. }
31. }
Now, if we worked well, we’ll have, after the deployment (CTRL+5), the following outputs-

Windows 10 Desktop simulator

Windows 10 Mobile

Xamarin

Create a new solution in Xamarin.Forms Portable (PCL).
We’ll have the following environment-
Add the Main Page,

Right click on the name of the project portable -> add new item -> Cross Platform -> Code -> Forms ContentPage (name it MainPage).
Add the second page.

Right click on the name of the project portable -> add new item -> Cross Platform -> Code -> Forms ContentPage (name it SecondPage).
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;
6. using Xamarin.Forms;
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. }
15. protected override void OnStart() {
16. // Handle when your app starts
17. }
19. protected override void OnSleep() {
20. // Handle when your app sleeps
21. }
23. protected override void OnResume() {
24. // Handle when your app resumes
25. }
26. }
27. }
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;
7. using Xamarin.Forms;
9. namespace Booster2
10. {
11. public class MainPage : ContentPage
12. {
13. public MainPage()
14. {
15. Title = "Main Page";
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. };
28. Content = new StackLayout
29. {
30. Children =
31. {
32. changePage
33. }
34. };
35. }
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;
7. using Xamarin.Forms;
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. }

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));
3. }
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.