Caching a Page in Windows Store App Using C#

Gaurav Gupta
Jan 07, 2013
24.8k
0
1
Article

When a Windows 8 Apps is created, it can contain more than one page for navigating from one page to another page in the app. In a Windows 8 Apps you can also pass the value through the various pages on a single website. But during the navigation among the various pages in a single app, you might have noticed that when you navigate from one page to another then go back to a previous page all the fields in the page have been reset to empty.

But, sometimes the user wants to go back to the previous page with the data retained after navigating from anoher page. Then, the user is unable to see the information that was in the previous page. To solve this problem we must cache the page contents, so that it will never lose its values during navigation among pages in an app.

You can cache the page by specifying its NavigationCacheMode property in the constructor of the page, and set its NavigationCacheMode to Enabled. This will cache the information of the page when you navigate among pages in a Windows 8 Apps.

Here are the steps to be followed:

Step 1 To create a new Windows Windows 8 Apps:

Start Visual Studio 2012.
Select File > New Project. The New Project dialog box opens.
Select the Windows Windows Store template type.
In the center pane, select Blank Application.
Enter a name for the project. In this topic, we'll call the project Chachedpage.
Click OK. Your project files are created.

Step 2 To add a page to an app:

Select Project > Add New Item. The Add New Item dialog box opens.
Pick the Windows Windows Store template type.
In the center pane, select Basic Page.
Click Add.

Adding-new-item-in-windows8(1)-apps.jpg

Step 3 In this step we design the page1 and put a link to navigate to page2 after filling in all the fields for page1.

XAML code of BlankPage1:

<Page

x:Class="navigation.BlankPage1"

IsTabStop="false"

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

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

xmlns:local="using:navigation"

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

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

mc:Ignorable="d">

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Column="0" Grid.Row="0" Text="Fill Up the Form" FontSize="20"

FontWeight="Bold" Foreground="white" Grid.ColumnSpan="2" Margin="53,10,207,40" Grid.RowSpan="2"></TextBlock>

<TextBlock Text="First Name" Margin="10,5,10,5" Grid.Row="1" Grid.Column="0"

FontSize="20" Foreground="BlueViolet" FontWeight="Bold" HorizontalAlignment="Right" />

<TextBlock Text="Last Name" Margin="10,5,10,5" Grid.Row="2" Grid.Column="0"

FontSize="20" Foreground="BlueViolet" FontWeight="Bold" HorizontalAlignment="Right"/>

<TextBlock Text="Emai Id" Margin="10,5,10,5" Grid.Row="3" Grid.Column="0"

FontSize="20" Foreground="BlueViolet" FontWeight="Bold" HorizontalAlignment="Right"/>

<TextBox x:Name="eName" Margin="10,5,10,5" Grid.Row="1" Grid.Column="2"

FontSize="20" Foreground="Black" />

<TextBox x:Name="id" Margin="10,5,10,5" Grid.Row="2" Grid.Column="2"

FontSize="20" Foreground="Black" />

<TextBox x:Name="econt" Margin="10,5,10,5" Grid.Row="3" Grid.Column="2"

FontSize="20" Foreground="Black" />

</Grid>

</Page>

Step 4 In this step we create a page2 and put a link to go to back to the page1.

XAML code of BlankPage2.XAML.

<Page

x:Class="navigation.BlankPage2"

IsTabStop="false"

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

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

xmlns:local="using:navigation"

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

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

mc:Ignorable="d">

<Grid>

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

</Grid>

</Page>

Step 5 Define a click handler in BlankPage1.xaml.cs to navigate to page2:

private void click(object sender, RoutedEventArgs e)

{

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

}

Step 6 Add the following code to the BlankPage2.xaml.cs file to go back to the previous page:

private void bindData_Click(object sender, RoutedEventArgs e)

{

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

}

Step 7 To cache the contents of a page we set the NavigationCacheMode in the constructor of BlankPage1:

public BlankPage1()

{

this.InitializeComponent();

this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

}

Step 8 Now, we have to change the OnLaunched method in the app.xaml.cs file to make BlankPage1 appear when the application starts:

protected override void OnLaunched(LaunchActivatedEventArgs args)

{

// Create a Frame to act navigation context and navigate to the first page

var rootFrame = new Frame();

rootFrame.Navigate(typeof(blankpage1));

// Place the frame in the current window and ensure that it is active

Window.Current.Content = rootFrame;

Window.Current.Activate();

}

Step 9 Now, run the application:

Step 10 Fill in all the fields and click the submit button to navigate to BlankPage2.

Step 11 Now, when you run the app and navigate from BlankPage2 back to BlankPage1, you will see that the TextBoxes on BlankPage1 retains their values: