Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 18 – Working with Navigation in WP7

 

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.      [more]

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

clip_image002

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.

clip_image004

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:

01

<!--<span class="hiddenSpellError" pre="">LayoutRoot</span> is the root grid where all page content is placed-->

02

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

03

<Grid.RowDefinitions>

04

<RowDefinition Height="Auto"/>

05

<RowDefinition Height="*"/>

06

</Grid.RowDefinitions>

07

 

08

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

09

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

10

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

11

</StackPanel>

12

 

13

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

14

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

15

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

16

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

17

</Grid>

18

</Grid>

clip_image006

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:

1

private void button1_Click(object sender, RoutedEventArgs e)

2

{

3

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

4

}

clip_image008

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:

1

private void button2_Click(object sender, RoutedEventArgs e)

2

{

3

string strParam1 = "Welcome Page";

4

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

5

 

6

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

7

}

clip_image010

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:

01

using System;

02

using System.Collections.Generic;

03

using System.Linq;

04

using System.Net;

05

using System.Windows;

06

using System.Windows.Controls;

07

using System.Windows.Documents;

08

using System.Windows.Input;

09

using System.Windows.Media;

10

using System.Windows.Media.Animation;

11

using System.Windows.Shapes;

12

using Microsoft.Phone.Controls;

13

 

14

namespace F5debugWp7Navigation

15

{

16

public partial class NavPage2 : PhoneApplicationPage

17

{

18

public NavPage2()

19

{

20

InitializeComponent();

21

}

22

 

23

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

24

{

25

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

26

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

27

 

28

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

29

 

30

base.OnNavigatedTo(e);

31

}

32

}

33

}

clip_image012

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:

clip_image014

Conclusion:

So in this article we have seen how to use the Page Navigation with parameters and without passing any parameter values.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter