Windows Phone 7 (Mango) Tutorial - 9 - Page State Management

Yesterday we discussed the basic theory on Windows Phone 7 Page State. We came to know what is this and when to use this. We also came to know the way to implement the state management. In this chapter of the tutorial series, we will learn more about Page State Management in Windows Phone 7.1 with a small application.

After reading this tutorial chapter, you will be able to store page state, retrieve and clear them on your need. Read to know more about this topic, share the link to others and ask any queries if you have at the end of the post.

Index - Windows Phone 7 (Mango) Tutorial

Design the XAML Page

Let's create a demo application to showcase the Page State management. To do this, we will start with the XAML creation. We will split the Grid named "ContentPanel" to columns and rows. Now we will place a TextBox and two buttons there. The first button will preserve the content of the TextBox to the state and the second button will reset the state of the page.

Here is the complete XAML code for your reference:

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" VerticalAlignment="Top">

    <Grid.ColumnDefinitions>

        <ColumnDefinition/>

        <ColumnDefinition/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

        <RowDefinition/>

        <RowDefinition/>

    </Grid.RowDefinitions>

    <TextBlock Text="Enter your Name :" Grid.Row="0" Grid.Column="0" 

                VerticalAlignment="Center" HorizontalAlignment="Right"/>

    <TextBox x:Name="txtName" Width="200" Height="80" 

                Grid.Row="0" Grid.Column="1"/>

    <Button Width="220" Height="80" Content="Preserve State"

            Grid.Row="1" Grid.Column="0" Click="PreserveState_Click"/>

    <Button Width="220" Height="80" Content="Reset State"

            Grid.Row="1" Grid.Column="1" Click="ResetState_Click"/>

</Grid>

The above XAML code will render in the Phone UI as shown below:

Once our XAML designing job is done, we can go further to know about the Page State management. Before that, build your project and fix if any error.

Normal Behavior

Let's see the normal behavior before implementing the state management. Run the application in Phone Emulator. You will see our page in the UI screen once the app loads. You will see a TextBox and two Buttons as we designed the UI.

Now type some text in the TextBox as shown below and navigate away to another page. You can simply do this by clicking the search button present in the mobile. This will switch to the search application by pushing the active application to the background and the application will go into deactivated mode.

Once you are in the Bing search page, click the back button to activate the previous application and bring it back to the foreground. Once our application come into the view, you will notice that, we lost the text that we entered in the TextBox. This means, we lost the state of the page.

Implementing Page State

Can we start implementing the state for our application? Let's go. Open the MainPage.xaml.cs file. There we will create a string property called "PreservedValue". This will store the entered value to the state and retrieve it back when needed.

public string PreservedValue

{

    get { return GetPageState("PreservedValue").ToString(); }

    set { SetPageState("PreservedValue", value); }

}

Here GetPageState(...) and SetPageState(...) method implementations are as below:

public void SetPageState(string key, object value)

{

    State[key] = value;

}

public object GetPageState(string key)

{

    object state = State.ContainsKey(key) ? State[key] : string.Empty;

    State.Remove(key); // remove the key/value pair from the state

    return state;

}

SetValueState(key, value) method sets the passed value to the state against the key. In other side, GetPageState(key) will fetch the value from the page state, store it locally to that method and removed the said value from the state. We are removing the value from the state to make sure that, we should not get the same value again if we navigate away without saving the state. You can write this code anywhere but here for simplicity and based on the uses of our application, we wrote the same inside the Get method.

Now we will implement the event for the two buttons. Clicking on the preserve button, it will store the Text of the TextBox to the property called PreservedValue. Similarly, clicking on the reset button will clear all the preserved values from the state.

Have a look into the following implemented code for reference:

private void PreserveState_Click(object sender, RoutedEventArgs e)

{

    PreservedValue = txtName.Text;

}

private void ResetState_Click(object sender, RoutedEventArgs e)

{

    State.Clear();

}

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

{

    base.OnNavigatedTo(e);

    txtName.Text = PreservedValue;

}

As shown in the above code snippet, we will override the OnNavigateTo method. NavigateTo event will raise when the user comes back to page from a different page. Here we will fetch the preserved state value by calling the PreservedValue property and set it as the text of the TextBox.

That's all about the code. Now if we run the application, we will see a nice app which can store current state of the page on click of Preserved button.

Demonstration

Let us build and run the application once again inside the phone simulator. The application will load in the screen and you will see the page that we developed. Enter a text in the TextBox and click "Preserve State" button. This will store the value of the TextBox to the page state.

Now navigate away to some other page or application. Here we will click the same Search button to navigate to the bing search page. This will deactivate our application. Once we are in Bind page, we will click the Back button.

This will reactivate our application and will show up the UI of our page in the screen. You will find that, the TextBox present in the page has the same value that we enter before deactivating it.

This demonstrates the use of Page State Management in Windows Phone 7 application. Hope this was clear and very helpful to you to understand the page state implementation. Feel free to ask me any query you have. I will try to answer you as early as possible. I also tweet. If you are on Twitter, follow my tweets @kunal2383. Stay tuned for my next chapters of the tutorial series. Till then, happy coding.