Working With Navigation in Windows Phone 7

Introduction

In this article we are going to see how Navigation works with Windows Phone 7 Development. Navigating between pages in windows phone 7 is an important task in development of an application with Windows Phone 7 since we cant design an application that fits into a single page. Navigation can be done in two ways, one is to just pass between the pages to show the end user with detailed information and second is to pass value from one page to other based on the user inputs to show the details by passing parameters.

To navigate between the page we can easily do that with the options available which we are going to see in the below section. We have different Navigation events available which can be override to be used in case to track on any navigation that happens on the page flow. Below are the list of navigation events available with Windows Phone 7 development which can be used on need basis as explained below.

• OnNavigatedTo : Triggered when the page is loaded.
• OnNavigatingFrom : Triggered just before the page unload event, we can use this if we need to stop the navigation.
• OnNavigatedFrom : Triggered after the page is navigated.
• OnBackKeyPress : Triggered when the user presses the Back Button

Let us jump start to see the step by step process on how to perform the two navigation's in detail one by one in the below steps.

Steps

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 Application with a valid project name as shown in the screen below.

Now let us add 2 pages to navigate between the pages and also to pass parameters and retrieve it in another page. To add the pages just right click on the project name and click on Add New Items and select Windows Phone Portrait Page as shown in the screen below.

Now we have added 2 pages (NavPage1.xaml and NavPage2.xaml). Let us design the Mainpage.xaml with 2 buttons to navigate on button click as shown in the screen below. Just copy the xaml code provided below to get the same look and feel.

XAML Code

<Grid x:Name="LayoutRoot" Background="Transparent">

  <Grid.RowDefinitions>

  <RowDefinition Height="Auto"/>

  <RowDefinition Height="*"/>

  </Grid.RowDefinitions>

  <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

    <TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>

    <TextBlock x:Name="PageTitle" Text="Navigation" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

  </StackPanel>

<!--<span class="hiddenSpellError" pre="">ContentPanel</span> - place additional content here-->

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

 <Button Content="Navigation Without Parameters" Height="172" HorizontalAlignment="Left" Margin="12,96,0,0" Name="button1" VerticalAlignment="Top" Width="437"   Click="button1_Click" />

 <Button Content="Navigation With Parameters" Height="172" HorizontalAlignment="Left" Margin="11,298,0,0" Name="button2" VerticalAlignment="Top" Width="438" Click="button2_Click" />

 </Grid>

</Grid>

 

Now let us write our code to navigate between the pages without passing the parameters, go to the code behind and write the below code on the button1 click event as shown in the screen below. Before that we will just make a small design change in NavPage1.xaml just to have a look and feel on the page navigation by adding a Textblock with a welcome message.

Code Behind

private void button1_Click(object sender, RoutedEventArgs e)

 {

 NavigationService.Navigate(new Uri("/NavPage1.xaml", UriKind.Relative));

 }

 

 

Now we can build and execute the solution to check if we are good with the code, once the build is success let us go ahead with the second button navigation to pass some values from MainPage.XAML to NavPage2.XAML. So write the below code in the button 2 click event as shown in the screen below. Before that we will add 2 TextBlock to get the parameters which we pass from MainPage.XAML.

Code Behind

private void button2_Click(object sender, RoutedEventArgs e)

 {

 string strParam1 = "Welcome Page";

 string strParam2 = "Navigation with Parameters!!!";

 NavigationService.Navigate(new Uri(string.Format("/NavPage2.xaml?Val1={0}&Val2={1}", strParam1, strParam2), UriKind.Relative));

 }

 

Now we need to go to NavPage2.XAML and write the below code to get the parameters and assign to the text block as shown in the screen below.

NavPage2.xaml.cs page

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

 

namespace F5debugWp7Navigation

 {

 public partial class NavPage2 : PhoneApplicationPage

 {

 public NavPage2()

 {

 InitializeComponent();

 }

 

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

 {

 string strvalue1 = NavigationContext.QueryString["val1"];

 string strvalue2 = NavigationContext.QueryString["val2"];

 textBlock1.Text = strvalue1.ToString() + strvalue2.ToString();

 base.OnNavigatedTo(e);

 }

 }

 }

 

 

Now build and execute the project by pressing F5 and we can see the Windows Phone 7 Emulator opened and we can see the end result as shown in the screens below.

Output Screens

 

Conclusion

So in this article we have seen how to use the Page Navigation with parameters and without passing any parameter values.Thanks for reading my article. If you like my blog and if you are interested in getting the latest updates on new articles, kindly follow me through one of these options.