A day with .Net

My day to day experince in .net

Navigation and Passing Information Between Pages Windows 8 Metro

Posted by vivekcek on September 4, 2012

Read my previous post Hello World Windows 8 Metro App

Download Source http://sdrv.ms/R3zfId

In this post i am going to show how we can implement navigation in a windows 8 metro app.
In metro the Frame class is primarily responsible for navigation and implements methods such as Navigate, GoBack, and GoForward.We use the Navigate method to display content in the Frame.

1. Create a new metro blank application.

2. Delete the MainPage.xaml.

3. Now add 2 Basic Page template to our app named FirstPage.xaml and SecondPage.xamal. The solution will look like below.

4. In the FirstPage.xaml.Find the TextBlock element named pageTitle and change the Text property to ‘First Page’. The XAML should look like below.

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

5. Do the same title change in the SecondPage.xaml also.

6. Now we want to show the FirstPage.xaml when the application first launches. For that go to App.xaml.cs file under the OnLaunched() method add the code below.

 var rootFrame = new Frame();
            if (!rootFrame.Navigate(typeof(FirstPage)))
            {
                throw new Exception("Failed to create initial page");
            }

7. So when our application launches a rootFrame will be created and FirstPage.xaml will be loaded into the rootFrame.

8. Now we will create a TextBox and a Button in our FirstPage using the below xaml markup.

 <StackPanel Grid.Row="1" Margin="100,10,0,-1" >

            <TextBlock Text="Enter Your Name"/>
      
      <StackPanel Orientation="Horizontal" Margin="0,20,0,0">
  
              <TextBox x:Name="txtInput" Width="200" HorizontalAlignment="Left"></TextBox>
   
             <Button x:Name="btnSubmit" Content="Submit" Margin="5,0,0,0" ></Button>
         
      </StackPanel>
          
  <TextBlock x:Name="txtOutput"></TextBlock>
  
</StackPanel>

9. Generate Click event of button using property window of button.

10. Write the below code in button click event.

 private void btnSubmit_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(SecondPage), txtInput.Text);
        }

11. Add the below xaml markup in SecondPage.xaml. Which create a TextBlock to show passed parmeter.

<StackPanel Grid.Row="1" Margin="100,10,0,-1" >
 
             <StackPanel Orientation="Horizontal" Margin="0,20,0,0"/>
  
            <TextBlock x:Name="txtOutput"></TextBlock>
  
      </StackPanel>
</StackPanel>

12 In SecondPage.xaml.cs override the OnNavigatedTo() method and add below code.

 protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            string name = e.Parameter as string;

            if (!string.IsNullOrWhiteSpace(name))
            {
                txtOutput.Text = "Hello, " + name;
            }
            else
            {
               txtOutput.Text = "Name is required.  Go back and enter a name.";
            }

        }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s