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">
    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-



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