Navigation using Windows Phone 7 Silverlight

This article describes how to use Navigation in Windows Phone 7. In this article we'll see how to navigate from one page to another upon the click of a button and how to send a value using a query string from one page to the other page.

Getting Started

Creating a Windows Phone Application:

  Open Visual Studio 2010.

  Go to File => New => Project

  Select Silverlight for Windows Phone from the Installed templates and choose Windows Phone Application

  Enter the Name and choose the location.


Click OK.

First of all add a new Windows phone portrait page using add new item; click and give a name for the page. My page name is Page1.xaml.

Now on the main page drag and drop a hyperlink button.

<HyperlinkButton Content="Click to redirect on next page" Height="39" HorizontalAlignment="Left" Margin="51,89,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="344" Click="hyperlinkButton1_Click" />

 

Click event.

private void hyperlinkButton1_Click(object sender, RoutedEventArgs e)

        {

            NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.RelativeOrAbsolute));

        } 

This code will redirect you to page1 and if you want to return to the previous page then add a button control to page1 and put this on button click. 

<Button Content="Redirect To Home Page" Height="72" HorizontalAlignment="Left" Margin="31,57,0,0" Name="button1" VerticalAlignment="Top" Width="317" Click="button1_Click" /> 

private void button1_Click(object sender, RoutedEventArgs e)

        {

            NavigationService.GoBack();

        }

 

 img2.jpg

Image 1.

 

(MainPage.xaml)

img3.jpg  

Image 2.

 

(Page1.xaml)

 

Now if you want to send a value from one page to another page then add this code on click event. 

private void button1_Click(object sender, RoutedEventArgs e)

        {

            NavigationService.Navigate(new Uri("/Page1.xaml?name=" + textBox1.Text, UriKind.Relative));

        } 

Call this function on Page1.xaml.

 

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

        {

            base.OnNavigatedTo(e); 

            string name = ""

            if (NavigationContext.QueryString.TryGetValue("name", out name)) 

                textBox1.Text = name; 

        }

See the images for more information.

 img4.jpg 

Image 3.

img5.jpg  

Image 4.

We are done here with Windows Phone navigation, if you have questions or comments feel free to drop me a line in the comments section.