Universal Windows Platform - Page Navigation And Pass A Complex Object To A Page

Introduction

Previously in Universal Applications, page navigation technique was quite different. In Universal Windows Platform app, it could have several pages and when we want to navigate through different pages, it opens a new window. But in Universal Windows Platform, there is only one window. When we want to open a different page, it opens a new frame. So things got changed a little like Windows 10.

So, let’s see how it works in Universal Windows Platform page navigation. Let’s get started.

Creating a New Project

Firstly, open up a new Blank Project. We need another page to navigate from “MainPage” to the second page. So, we need to add a “Blank Page” template and give it a name “SecondPage.xaml”.

Figure 1

Adding a New Class

Now, we’ve to add another class name “Person.cs”. We’ll create two persons object “Name” and “Blog”, which we’ll pass when we navigate through pages,

Class
Figure 2

And the code is given below.

class Person
{
public string Name { get; set; }
public string Blog { get; set; }
}

Listing 1

Here, we’ve created a string variable “Name” and “Blog”. Just type “prop” and press double tab on the keyboard. It will automatically create full code snippet for you, and tab again and change “int” to “string”, hit tab second time and change “MyProperty” to “Name”. Change the second code snippet likewise.

prop

Figure 3

Adding a Button Control

Now, we’ll work on “MainPage.xaml”. Take a Button control and change content to “Next Page” and the other property like below.

<Button Content="Next Page"
HorizontalAlignment="Left"
Margin="10,0,0,0"
VerticalAlignment="Top"
Click="NextPage_Click"/>

Listing 2

The C# code of “MainPage.xaml.cs”, mainly the event handler of the Button control is given here.

private void NextPage_Click(object sender, RoutedEventArgs e)
{
var person = new Person { Name = "BD Devs", Blog = "learnwithbddevs.wordpress.com" }
}

Listing 3

Here, we have created a person object of our Person class, we’ve set our “Name” and “Blog” and passed it through the “Second Page”. As we mentioned before, Navigation Service do not work in Universal Windows Platform app, it opens up a new frame every time. So, here we call Frame class which has another Navigate Method, which has some types. Like here we’ve “Basic Page” template and we’ve passed our person object as parameter.

Displaying Data in Second Page

Now, in our “SecondPage.xaml” we’ve taken two TextBlock “tb1″ and “tb2″. The XAML code is given below,

<TextBlock x:Name="tb1"
HorizontalAlignment="Left"
Margin="10,10,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
Height="50"
Width="302"
FontSize="20"/>
<TextBlock x:Name="tb2"
HorizontalAlignment="Left"
Margin="10,65,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
Height="50"
Width="302"
FontSize="18"/>

Listing 4

And C# code is given here.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
var person = (Person)e.Parameter;
if (!string.IsNullOrWhiteSpace(person.Name))
{
tb1.Text = "Hello, " + person.Name;
tb2.Text = "Welcome to: " + person.Blog;
}
else
{
tb1.Text = "Name is required. Go back and enter a name.";
}
}

Listing 5

We’ve to put all the code in “OnNavigatedTo” method, because when a new page loads this code block will work to retrieve data while navigate. This method is built in and you just need to modify yourself as you like to do.

In our case, we’ve created a person variable object, which we’ve parsed into “Person” class. We’ve checked whether Person’s name is empty or not, if not empty data will be displayed otherwise not. It’ll show an error message “Name is required. Go back and enter a name.”.

Adding Back Button

In Universal Windows Platform app, there is no back button in desktop version. Though, phone app has built in back button, if you press the back button it will bring you directly to the Home of your phone. It is not a good user experience. To avoid this kind of scenario, you can just modify your app.xaml.cs file little bit. Open your app.xaml.cs file and put the little code inside the OnLaunched method, below rootFrame.NavigationFailed… event.

rootFrame.NavigationFailed += OnNavigationFailed;
rootFrame.Navigated += OnNavigated;
// OnNavigated Method
private void OnNavigated(object sender, NavigationEventArgs e)
{
// Each time a navigation event occurs, update the Back button's visibility
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
((Frame)sender).CanGoBack ?
AppViewBackButtonVisibility.Visible :
AppViewBackButtonVisibility.Collapsed;
}

Listing 6

Moreover, you need to implement a Back Key Request event. To do that, put the code in OnLauched method below the Window.Current.Content… event.

Window.Current.Content = rootFrame;
SystemNavigationManager.GetForCurrentView().BackRequested += OnBackRequested;
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
rootFrame.CanGoBack ?
AppViewBackButtonVisibility.Visible :
AppViewBackButtonVisibility.Collapsed;
// OnBackRequested Method
private void OnBackRequested(object sender, BackRequestedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
if (rootFrame.CanGoBack)
{
e.Handled = true;
rootFrame.GoBack();
}
}

Listing 7

Note: Place the OnNavigated & OnBackRequested method outside the OnLaunched method.

All of our work is done. If you run the application, it’ll look like this.

Desktop Application

Figure 4

Mobile Application

Figure 5

Hit the “Next Page” Button and it’ll navigate to the “Second Page”, and display the “Name” and “Blog” information on the TextBlocks respectively.

Closure

So, that’s it. Hope it’ll help to understand the basic navigation between pages and passing complex object like we’ve done. Happy coding.
Source Code

10 Comments

Join the conversation! Your thoughts help the community grow.

Nato Boram9y ago
Wtf is wrong with Listing 3?? Yeah, I'm googling "Pass A Complex Object To A Page" so you can just tell me "Let me show you step-by-step how to create two completely independent pages and a complex object but I won't explain how to do the exact title of this article". Good job, mate. Good job.
Dhaneesh Kp10y ago
Hi,how to navigate with uri in UWP?
Seyed Rooholamini10y ago
Great, many thanks
Nuwan Karunarathna10y ago
Great
Santhakumar Munuswamy11y ago
Good one
Mukesh Kumar11y ago
Good JOB
Harshad Pansuriya11y ago
Nice Share
Sibeesh Venu11y ago
Nice Share
Nilesh Jadav11y ago
Good One !!
Mohammed Ibrahim11y ago
nice