Win 8 Page Navigation

Let’s start with something relatively easy… navigating between pages in Windows 8.

Create a new application in Visual Studio 11.  Add two BlankPages to the application, naming the first Page1.xaml and the second (you guessed it) Page2.xaml. 

Find the Page name in each file and change them accordingly.  For example, on page 1, your code should look like this:

<TextBlock x:Name="pageTitle" 
   Grid.Column="1" 
   Text="Page 1" 
   Style="{StaticResource PageHeaderTextStyle}"/>

We need the ability to navigate from Page 1 to Page 2. For that, we’ll add a HyperLinkButton.  For purposes of formatting, we’ll put that control into a StackPanel:

 <StackPanel Grid.Row="1"
             Margin="120,0,120,60">
     <HyperlinkButton 
         Content="Click to go to page 2"
                      Click="HyperlinkButton_Click_1"/>
 </StackPanel>

Go to page 2, where you’ve already fixed the name of the page, and add a TextBlock (again, within a StackPanel)

<StackPanel Grid.Row=”1″
            Margin=”120,0,120,60″>
    <TextBlock HorizontalAlignment=”Left” Name=”Message”  Text=”Hello World!”/>
</StackPanel>

Open Page1.xaml.cs and find the event handler for the HyperLinkButton.  Add the following line of code,

this.Frame.Navigate( typeof( Page2 ) );

 

Finally, open App.xaml.cs and set Page 1 as the start page.  To do so, locate OnLaunched() and substitute Page1 for BlankPage,

 rootFrame.Navigate(typeof(Page1));

 

Run the application; Page 1 opens and offers you a link to Page 2. Page 2 displays your Hello World message.  Notice that Page 2 has a back button; that is actually on every  page, but Page 1 collapses the back button because CanGoBack is false (there is no page to go back to). 

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Essentials, Windows 8. Bookmark the permalink.

4 Responses to Win 8 Page Navigation

  1. Pingback: Windows 8 Developer Links – 2012-04-18 | Dan Rigby

  2. Licantrop0 says:

    Yes, I’m using MVVM Light (thanks God there is Laurent!). In Windows Phone I used the INavigationService interface to navigate between pages from ViewModel, but there is currently no concrete implementation of it for WinRT, so I will use the Messaging Service for now.
    thanks!

  3. Toni says:

    You are not supposed to navigate from view model since it does not have a concept of a view. What framework are you using? You can use messaging service in MVVM light.

    Or you can add static function to the App class which takes root visual, casts it to a PhoneFrameworkPage and navigates via its navigation service. Although that is a hack.

  4. Licantrop0 says:

    Hi Jesse, how would you navigate from a ViewModel?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>