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 Windows Phone 7 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.