Navigating Between XAML Pages: Windows Phone Apps Development Tutorial – Part 21

Welcome back to the Windows Phone 7.5 Mango App development series. In the last tutorial we say how to apply style and themes to controls, in this tutorial we shall see one way of navigating between pages and passing data from page to another.

We load XAML pages in Silverlight applications just as we load HTML pages in a web browser. As in a website each website has its own unique URL (Unified Resource Locator) for example www.thewindowsclub.com. In a Windows Phone 7.5 Application, we use a hyperlink Button control and use its NavigateURI property with the URI (Unified Resource Identifier) of the XAML page that you want to load. So let’s get started with an example.

Create a new project with a unique name like ‘NavigationDemo’. Next, right-click the project name in the solution explorer and select Add and then New Item. In the Add New Item window select ‘Windows Phone Portrait page’, give it a name like Page1.xaml and then click Add button at the bottom. This will create a new page shown in a separate tab in the main design area. Just for clarity change the page title of the new page to ‘New page’ by changing the Text property of the Page Title TextBlock. Next in the MainPage.xaml tab drag and drop a hyperlink button in the design area. Now change the NavigateUri property in the Properties window for the Hyperlink button. Insert the following string

/NavigationDemo;component/Views/Page1.xaml

Now run the application and click the hyperlink button shown in the emulator. You will be navigated to Page1.xaml from MainPage.xaml.Navigation_XAML

Now in order to send information from one page to another we make use of a Querystring. So consider a URL like www.abcxyz.com/images.aspx?id=3&language=en . Here everything after the question mark is called the querystring. You can notice that we have two name value pairs, viz., id=3 and languae=en. The ampersand allows us to add different pieces of information, in this case id and language.

So now in continuation to our project we will drag and drop a TextBlock on the Page1.xaml page. Clear the TextBlock.Text property and insert the following C# code in the PhoneApplicationPage_Loaded event.

textBlock1.Text = String.Format("Value: {0}", NavigationContext.QueryString["id"]);

So in this line of code we make use of the NavigationContext which gives us access to the URL, specifically the querystring. We specify the item which we wish to access in the square brackets.

Before we run the application we will change the NavigateUri property of the hyperlink button to the following

/NavigationDemo;component/Views/Page1.xaml?id=1

We will also drag and drop another hyperlink button in the MainPage.xaml and set its navigateUri property to the following

/NavigationDemo;component/Views/Page1.xaml?id=2

Now when you run the application and click a hyperlink button in the emulator we will be able to see the value of the id passed from MainPage.xaml. That’s how easy navigating between pages is in a Windows Phone 7 Application. Keep practicing it until you get it right. Now lets learn about working with the Application Bar.

Posted by on , in Category Phone with Tags
Gadget freak, Apple lover, Windows Phone lover; well that’s me! I have been in this wonderful field of freelance writing for quite some time and looking forward to developing more illuminating content related to gadgets and technology, as I go along.