Geeks With Blogs
Peter Tweed Exploring and explaining the mysteries of .NET

 Take the Slalom Challenge at www.slalomchallenge.com!

When moving to the mobile platform all applications need to be able to provide different views.  Navigating around views in is a very easy thing to do.  This post will introduce you to the simplest technique for navigation in Windows Phone 7 apps.

Steps:

1.     Create a new Windows Phone Application project.

2.     In the MainPage.xaml file copy the following xaml into the ContentGrid Grid:

            <StackPanel Orientation="Vertical" VerticalAlignment="Center"  >

                <TextBox Name="ValueTextBox" Width="200" ></TextBox>

                <Button Width="200" Height="30" Content="Next Page" Click="Button_Click"></Button>

            </StackPanel>

This gives a text box for the user to enter text and a button to navigate to the next page.

3.     Copy the following event handler code to the MainPage.xaml.cs file:

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            NavigationService.Navigate(new Uri( string.Format("/SecondPage.xaml?val={0}", ValueTextBox.Text), UriKind.Relative));

        }

 

The event handler uses the NavigationService.Navigate() function.  This is what makes the navigation to another page happen.  The function takes a Uri parameter with the name of the page to navigate to and the indication that it is a relative Uri to the current page.  Note also the querystring is formatted with the value entered in the ValueTextBox control – in a similar manner to a standard web querystring.

4.     Add a new Windows Phone Portrait Page to the project named SecondPage.xaml.

5.     Paste the following XAML in the ContentGrid Grid in SecondPage.xaml:

            <Button Name="GoBackButton" Width="200" Height="30" Content="Go Back" Click="Button_Click"></Button>

 

This provides a button to navigate back to the first page.

6.     Copy the following event handler code to the SecondPage.xaml.cs file:

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            NavigationService.GoBack();

        }

This tells the application to go back to the previously displayed page.

7.     Add the following code to the constructor in SecondPage.xaml.cs:

            this.Loaded += new RoutedEventHandler(SecondPage_Loaded);

8.     Add the following loaded event handler to the SecondPage.xaml.cs file:

        void SecondPage_Loaded(object sender, RoutedEventArgs e)

        {

            if (NavigationContext.QueryString["val"].Length > 0)

                MessageBox.Show(NavigationContext.QueryString["val"], "Data Passed", MessageBoxButton.OK);

            else

                MessageBox.Show("{Empty}!", "Data Passed", MessageBoxButton.OK);

        }

 

This code pops up a message box displaying either the text entered on the first page or the message “{Empty}!” if no text was entered.

9.     Run the application, enter some text in the text box and click on the next page button to see the application in action:

 

Congratulations!  You have created a new Windows Phone 7 application with page navigation.

Posted on Monday, May 17, 2010 10:35 PM Silverlight , Windows Phone 7 | Back to top


Comments on this post: Simple Navigation In Windows Phone 7

# re: Simple Navigation In Windows Phone 7
Requesting Gravatar...
Thanks Peter for sharing the great stuff and one small request please put some sample Code so that it will be useful for beginner's.
Left by Lavanya on May 23, 2010 9:46 AM

# re: Simple Navigation In Windows Phone 7
Requesting Gravatar...
Kick-ass WP7 navigation without passing any strings. Any object type is supported:
http://www.sharpregion.com/easy-windows-phone-7-navigation/
Left by Adrian Aisemberg on Jul 05, 2011 3:31 AM

# re: thanks
Requesting Gravatar...
thanks for sharing great stuff!!!
Left by Jayesh on Oct 01, 2011 11:48 PM

# How to pass Object between pages?
Requesting Gravatar...
Yes, i am able to pass single values between pages.
But can you please help me to pass Object values from one page to another? Say for example, Student class object.
Left by TechnoTalkative on May 04, 2012 2:11 AM

# re: Simple Navigation In Windows Phone 7
Requesting Gravatar...
thanks maaan!!! you saved my life! :))
Left by blaa on Aug 16, 2012 1:05 PM

# re: Simple Navigation In Windows Phone 7
Requesting Gravatar...
Simplest piece of code I have ever seen. That's the way to do it!
Left by Shakir on Nov 24, 2012 4:50 PM

# re: Simple Navigation In Windows Phone 7
Requesting Gravatar...
thanks !!! It's useful me...
Left by pawan on Jan 11, 2013 4:20 AM

Your comment:
 (will show your gravatar)


Copyright © PeterTweed | Powered by: GeeksWithBlogs.net