Windows Phone: Page Navigation and Passing a Complex Object to a Page

Introduction

Welcome again! Today we will talk about Windows Phone page navigation. Previously in Windows Phone 7 and 8, the page navigation technique was quite different. In a Windows Phone 8 app, it could have several pages and when we want to navigate through various pages, it opens a new window. But in Windows Phone 8.1, there is only one window. When we want to open a different page, it opens a new frame. So things were changed a little from Windows 8.

So, let's see how it works in Windows Phone 8.1 page navigation. Let's get started.

Creating a New Project

Fist open up a new “Blank App (Windows Phone)” project. Then you've to delete the “MainPage.xaml”, because when we navigate among pages, we'll use the Basic Page template.


                                                                       Figure 1

So, it's good to work with the “Basic Page” template. To add a new “Main Page”, just right-click on the project in Solution Explorer and select Add >> New Item.


                                                                        Figure 2

Then, select the “Basic Page” template and give it an exact name “MainPage.xaml”.


                                                                           Figure 3

We need another page to navigate from “MainPage” to the second page. So similarly we need to add a “Basic Page” template and give it the name “SecondPage.xaml”.


                                                                              Figure 4

Adding a New Class

Now, we need to add another class named “Person.cs”. We'll create two person's objects, “Name” and “Blog”, that we'll when we navigate through pages.


                                                                                Figure 5

And the code is given below.

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

Listing 1

Here, we'll create two string variables, “Name” and “Blog”. Just type “prop” and double-tab in the keyboard, it'll automatically create the full code snippet for you and tab again and change “int” to “string”, hit tab a second time and change “MyProperty” to “Name”. Likewise change the second code snippet.


                                                                                 Figure 6

Adding a Button Control

Now, we'll work in “MainPage.xaml”. Use a Button control and change the content to “Next Page” and the other property as in the following.

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

Listing 1

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 = "Stan Marsh", Blog = "learnwithbddevs.wordpress.com" };
    Frame.Navigate(typeof(SecondPage), person);
}

Listing 2

Here, we've created a person object of our Person class. We've set our “Name” and “Blog” and ed it through the “Second Page”. As we said before, the Navigation Service does not work in Windows Phone 8.1, it opens up a new frame every time. So, here we call the Frame class that has another Navigate Method, that has some types. Like here we have the “Basic Page” template and we've ed our person object as the parameter.

Displaying Data in Second Page

Now, in our “SecondPage.xaml” we've taken two TextBlocks, “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="342"
            FontSize="20"/>
<TextBlock x:Name="tb2"
            HorizontalAlignment="Left"
            Margin="10,65,0,0"
            TextWrapping="Wrap"
            VerticalAlignment="Top"
            Height="50"
            Width="342"
            FontSize="20"/>

Listing 3

And the C# code is given here.

private void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
    var person = (Person)e.NavigationParameter;

    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 4

We must put all the code in the “NavigationHelper_LoadState” method since when a new page loads this code block will work to retrieve data when navigated. This method is built in, you just need to modify it yourself as you like to do.

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

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



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

Summary

So, that's it. I hope it'll help to understand the basic navigation among pages and ing complex objects like we've done. Stay with us, I hope I'll be here with a new topic soon. Until then, goodbye. Have nice day. Happy coding.

You can read the original article at http://bit.ly/1FdjDsS