Navigation Between Pages With Passing Data On Windows 10

Here we are learning how to navigate in a basic two page peer-to-peer Universal Windows Platform app.

Step 1: Open a blank app with a TextBlock, Textbox and Button either from the toolbox or by copying the following XAML code into your grid. Also add a new page named newPage with a TextBlock.

  1. <StackPanel Margin="10,40,0,0">  
  2.    <TextBlock Text="Navigation Sample" FontSize="20"></TextBlock>  
  3.    <StackPanel Margin="0,20,0,0" Orientation="Horizontal">  
  4.       <TextBlock Text="Enter your name"/>  
  5.       <TextBox Name="name" Margin="10,0,0,0" Width="200"/>  
  6.    </StackPanel>  
  7.    <Button Margin="0,20,10,0" Name="submit" Content="Submit" Click="submit_Click" HorizontalAlignment="Right" ></Button>  
  8. </StackPanel>  
  

Our app navigates between two pages, but it really doesn't do anything interesting yet. Often, when an app has multiple pages, the pages need to share information. Let's pass some information from the first page to the second page.

Step 2: Copy and paste the following code to the cs page which will be called on button clicking event and will pad the data along while navigating to our MainPage

  1. private void submit_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     this.Frame.Navigate(typeof(newPage), name.Text);  
  4. }  

Step 3: Copy and paste the following code to the newPage by overriding OnNavigatedTo event.

  1. protected override void OnNavigatedTo(NavigationEventArgs e)  
  2. {  
  3.     if (e.Parameter is string)  
  4.     {  
  5.         nameRecieved.Text = "Hi " + e.Parameter.ToString();  
  6.     }  
  7.     else  
  8.     {  
  9.         nameRecieved.Text = "Hi ";  
  10.     }  
  11. }   

Step 4: Run your application and test yourself.

 

Up Next
    Ebook Download
    View all
    Learn
    View all