UWP – HOW TO CHANGE PAGE

In this short tutorial  is explained how to pass from a page to other in a simple UWP application.
For simplicity we change page when a button is pressed.
Let’s start to see how to insert a button in the page in the .xaml file.

<Grid>
<Button Content=”Change Page” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”30″ MinWidth=”30″ FontWeight=”Bold” Click=”Change”></Button>
</Grid>

In the Grid control is added a button that has the following features:

  • Content that is the text of the button.
  • Horizontal and Vertical alignment represents the relative coordinates. In this way the button is in the center of the screen.
  • FontSize is the size of the font.
  • MinWidth represents the minimum widthof the button.
  • FontWeight is the thickness of the text.
  • Click=”Change” is the event that takes place when the button is pressed.

The final script is the following:

<Page
x:Class=”UWP_tutorials.ChangePage.ChangePage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”using:UWP_tutorials.ChangePage”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=”d”
Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>

<Grid>
<Button Content=”Change Page” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”30″ MinWidth=”30″ FontWeight=”Bold” Click=”Change”></Button>
</Grid>
</Page>

The result should be similar to image at the top.

 

Now is the moment to see the code-behind that is the .xaml.cs file.
What we have to do is to insert a simple function.

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

where MainPage is the name of the page that we want see.
N.B. if the page is in a different folder we can access to it using nameOfTheFolder.nameOfThePage.

The .xaml.cs file is

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;

// Il modello di elemento Pagina vuota è documentato all’indirizzo https://go.microsoft.com/fwlink/?LinkId=234238

namespace UWP_tutorials.ChangePage
{
/// <summary>
/// Pagina vuota che può essere usata autonomamente oppure per l’esplorazione all’interno di un frame.
/// </summary>
public sealed partial class ChangePage : Page
{
public ChangePage()
{
this.InitializeComponent();
}

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

 

YOU CAN DOWNLOAD THE EXAMPLE FROM HERE

The example is integrated in a solution that contains all the UWP tutorials. It is available from here


A simple tutorial about how to change page.
For any problem and info contact me! I will reply as soon as possible.
cuomomario@hotmail.com

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *