Navigation In Windows Store Apps.

The UI design for your Windows Store app is about organizing and presenting content to your users, and providing commands that enable your users to act on the content. UI design includes the organization of pages in the app, the navigation between pages, and the layout of content and commands on each page.

Add pages and navigation : 

In this tutorial, we go over the basics of creating a user interface in Extensible Application Markup Language (XAML). To learn these basics, you create a simple photo viewer that lets the user pick an image from their Pictures Library, and then it shows the image and some info about the image file. 

The first thing you need to do is add a new page to your app for the photo viewer. Then you add a navigation command to the main page so that the user can navigate to the new page.

 To add a page to an app : 

1. Select Project > Add New Item. The Add New Item dialog box opens.
2. Under Visual C# or Visual Basic in the left pane, pick the Windows Store template type.
3. In the center pane, pick Basic Page.
4. Enter "PhotoPage.xaml" as the name for the page.
5. Click Add. The XAML and code behind files for your page are added to the project. Here's the Add New Item dialog.
   
   
   
    

1. To change the page title, select the "My Application" text near the top of PhotoPage.xaml. Make sure the TextBlock named pageTitle is showing in the Properties panel and the Properties view () is selected.
   
2. Under Common in the Properties panel, click the property marker for the Text property. The property menu opens.
3. In the property menu, select Edit Resource. The Edit Resource dialog opens.
4. In the Edit Resource dialog, change the value from "My Application" to "Hello, photo!".
5. Click OK.The XAML for the resource definition is updated like this.
   
   

    <x:String x:Key="AppName">Hello, photo!</x:String>

   Add navigation :

   The XAML UI framework provides a built-in navigation model that uses Frames and Pages and works much like the navigation in a web browser. The Frame control hosts Pages, and has a navigation history that you can use to go forward and back through pages you've visited. You can also pass data between pages as you navigate.
   
   
   To navigate between pages :
   
   
   1. In Solution Explorer, double-click MainPage.xaml to open it.
   2. In the XAML editor, find the StackPanel that contains the greetingOutput TextBlock. Immediately after the greetingOutput TextBlock, add a Button element, like this:  

         <Button x:Name="photoPageButton" Content="Go to photo page"/>

       Here's the button you added with the surrounding XAML.
   
   

   <StackPanel Grid.Row="1" Margin="120,30,0,0">
       <TextBlock Text="What's your name?"  

                           Style="{StaticResource BasicTextStyle}"/>
       <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
           <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"
                    TextChanged="NameInput_TextChanged"/>
           <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
       </StackPanel>
       <TextBlock x:Name="greetingOutput"  

                          Style="{StaticResource BigGreenTextStyle}"/>
       <Button x:Name="photoPageButton" Content="Go to photo page"/>
   </StackPanel> 

   3. In the XAML editor or design view, select the "Go to photo page" Button that you added to MainPage.xaml.
   4. In the Properties panel, click the Events button ().
   5. Find the Click event at the top of the event list. In the text box for the event, type "PhotoPageButton_Click" as the name of the function that handles the Click event.
   6. Press Enter. The event handler method is created and opened in the code editor so you can add code that's executed when the event occurs.
   7. Add this code to the event handler that you created in the code behind page. In the event handler, navigate to the new photo page that you added to the app. 
   
   

     // Add this code.
               if (this.Frame != null)
               {
                   this.Frame.Navigate(typeof(PhotoPage));
               }

   8. Press F5 to build and run the app. Click the Go to photo page button. The photo page opens. Click the back button to navigate back to the main page.
   
   
   
   You don't need to add a back button to the photo page. The photo page is based on the LayoutAwarePage class, which has built-in support for navigation. The back button uses the Frame history to go back to the previous page, and is shown only when the Frame.CanGoBack property is true. For more examples of navigation support, see the "Navigation support" region of the LayoutAwarePage.cs/.vb file in the Common folder of the project.