Passing Data Among Pages in a Windows Store App

When we create applications we often need to pass data among pages within the single application. Passing data among pages in a Windows Store Application is something new and needs to be given a little care in terms of what approach you follow.

In the development of a Windows Store Application there are many approaches a developer can adopt to pass data among pages during navigation within the application.

So, with this article I describe the various approaches to pass the data among pages in a Windows Store Application Using XAML.

For this purpose I will create a blank Windows Store application. It has two pages. The first page will display a textbox and a button for entering the text that is provided to the second page and the other page simply shows the text that is provided from the first page.

So here are the approaches one by one.

First I will design my UI for both the pages in XAML.

Here is the markup.

FirstPage.xaml

<Page

    x:Class="TransferDataToOtherPage.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:TransferDataToOtherPage"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <StackPanel>

        <Button x:Name="next" Click="next_Click_1" Content="Go To Next Page"></Button>

            <TextBox x:Name="enter" Height="50" Width="300" ></TextBox>

        </StackPanel>

    </Grid>

</Page>

SecondPage.xaml

<Page

    x:Class="TransferDataToOtherPage.SecondPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:TransferDataToOtherPage"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"> 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock x:Name="lable" FontSize="35"></TextBlock>

    </Grid>

</Page>

Using Global Variable

This is the easiest and quickest way to share data among all pages of your application.

Declare a "Global Property" in your App.xaml file.

public string NavigateText { get; set; }

After that go to the FirstPage.xaml and set the value of the Global variable and navigate to the SecondPage.
 

private void next_Click_1(object sender, RoutedEventArgs e)

{

   (App.Current as App).NavigateText = enter.Text;  // add value to Global variable

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

}

In SecondPage.xaml.cs get the value from the Global variable on the OnNavigateTo event.
 

protected override void OnNavigatedTo(NavigationEventArgs e)

{

   lable.Text = (App.Current as App).NavigateText;        

}

Output

First Page



Second Page



Using Parameter

In Windows Store apps this is a new approach for passing data to another page, since the parameter is just like the Query Sting in WP7. This is good when you want to pass simple data between two pages.

Add this code to the First Page.

private void next_Click_1(object sender, RoutedEventArgs e)

{

    string s = enter.Text;

    this.Frame.Navigate(typeof(SecondPage),s);        

}

The above code will set the parameter value along with the navigate page in the Navigate method of Frame.

In the Second Page add this code to the OnNavigateTo method.

protected override void OnNavigatedTo(NavigationEventArgs e)

{

   string text = e.Parameter as string;

   lable.Text = text;         
}

The above code will get the parameter value using NavigationEventArgs.

Output

First Page



Second Page



Using Local App Data

Every application has a Local App Data Store from where we can store and retrieve settings and files from the local application data store. These "States" are all transient data which means they are available only for one instance of the application, which means that once you restart your application these states will be lost.

Now, have a look at this using the following example.

Code for First Page

Step 1

Use the ApplicationData.LocalSettings property to get the settings in an ApplicationDataContainer object.

Windows.Storage.ApplicationDataContainer localSettings = Windows.Storage.ApplicationData.Current.LocalSettings;                        

Step 2

Write data to a setting:

localSettings.Values["Text"] = enter.Text;

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

In the above code I use the ApplicationDataContainer.Values property to access the settings in the localSettings container. This step will create a setting named "ApplicationData".

Code of Second Page

Now, get the value from the localSettings container in the OnNavigateTo event of the Second Page. Here I use the ApplicationDataContainer.Values property to access the "ApplicationData" setting.
 

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    lable.Text= Windows.Storage.ApplicationData.Current.LocalSettings.Values["Text"].ToString();

}

Output

First Page



Second Page



Summary

So, in this article we learned how to pass data from page to page or share among pages in the application.