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”.

Blank application
                                                                           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.

  1. class Person  
  2. {  
  3.    public string Name { getset; }  
  4.    public string Blog { getset; }  
  5. }  
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.
  1.         <Button Content="Next Page"  
  2. HorizontalAlignment="Left"  
  3. Margin="10,0,0,0"  
  4. VerticalAlignment="Top"  
  5. Click="NextPage_Click"/>  
Listing 2

The C# code of “MainPage.xaml.cs”, mainly the event handler of the Button control is given here.
  1. private void NextPage_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     var person = new Person { Name = "BD Devs", Blog = "learnwithbddevs.wordpress.com" }  
  4. }  
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,
  1.       <TextBlock x:Name="tb1"  
  2. HorizontalAlignment="Left"  
  3. Margin="10,10,0,0"  
  4. TextWrapping="Wrap"  
  5. VerticalAlignment="Top"  
  6. Height="50"  
  7. Width="302"  
  8. FontSize="20"/>  
  9.       <TextBlock x:Name="tb2"  
  10. HorizontalAlignment="Left"  
  11. Margin="10,65,0,0"  
  12. TextWrapping="Wrap"  
  13. VerticalAlignment="Top"  
  14. Height="50"  
  15. Width="302"  
  16. FontSize="18"/>  
Listing 4

And C# code is given here.
  1. protected override void OnNavigatedTo(NavigationEventArgs e)  
  2. {  
  3.     var person = (Person)e.Parameter;  
  4.   
  5.     if (!string.IsNullOrWhiteSpace(person.Name))  
  6.     {  
  7.         tb1.Text = "Hello, " + person.Name;  
  8.         tb2.Text = "Welcome to: " + person.Blog;  
  9.     }  
  10.     else  
  11.     {  
  12.         tb1.Text = "Name is required. Go back and enter a name.";  
  13.     }  
  14. }  
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.
  1. rootFrame.NavigationFailed += OnNavigationFailed;  
  2. rootFrame.Navigated += OnNavigated;  
  3.   
  4. // OnNavigated Method  
  5. private void OnNavigated(object sender, NavigationEventArgs e)  
  6. {  
  7.     // Each time a navigation event occurs, update the Back button's visibility  
  8.     SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =  
  9.         ((Frame)sender).CanGoBack ?  
  10.         AppViewBackButtonVisibility.Visible :  
  11.         AppViewBackButtonVisibility.Collapsed;  
  12. }  
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.
  1. Window.Current.Content = rootFrame;  
  2.   
  3. SystemNavigationManager.GetForCurrentView().BackRequested += OnBackRequested;  
  4.   
  5. SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =  
  6.     rootFrame.CanGoBack ?  
  7.     AppViewBackButtonVisibility.Visible :  
  8.     AppViewBackButtonVisibility.Collapsed;  
  9.   
  10. // OnBackRequested Method  
  11. private void OnBackRequested(object sender, BackRequestedEventArgs e)  
  12. {  
  13.     Frame rootFrame = Window.Current.Content as Frame;  
  14.   
  15.     if (rootFrame.CanGoBack)  
  16.     {  
  17.         e.Handled = true;  
  18.         rootFrame.GoBack();  
  19.     }  
  20. }  
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

Desktop Application
                                                               Figure 4

Mobile Application

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

 

Up Next
    Ebook Download
    View all
    Learn
    View all