Restore and Preserve Page State for Windows Phone 7.5 or Mango Phone

In this post we will show you the way to Restore and Preserve Page state for a Windows Phone application page.



Let us put some controls on the phone application page.

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

<TextBox x:Name="txtValue" Height="100" Margin="12,37,58,470" />
<CheckBox x:Name="chkValue" Height="100" Margin="251,144,0,364"
    HorizontalAlignment="Left" Width="134" />
<Slider x:Name="sldValue" Value="30"
    Height="100" Margin="28,383,58,124" />

</Grid>

To bind to the values of these controls, let us create a Data class as below,



There are three properties to bind values to three controls of the page. Next we need to add PropertyChanged event and implementing a method called NotifyPropertyChanged, which raises the PropertyChanged event.



Next we need to create properties for each control. We need to call the NotifyPropertyChanged event in the setter of property to notify when value changed at the control. The control value would be bind with two way binding with these properties. Eventually Data class will be as below,

using System.Runtime.Serialization;

using System.ComponentModel;
using WindowsPhoneApplication3; 

namespace RestorePageState

{
    [DataContract]
    public class Data : INotifyPropertyChanged
    {
        private string textValue;
        private bool chckValue;
        private double sliderValue; 
        public string TextValue
        {
            get
            {
                return textValue; 
            }
            set
            {
                textValue = value;
                NotifyPropertyChanged("TextValue"); 
            }
        }
        public bool ChckValue
        {
            get
            {
                return chckValue; 
            }
            set
            {
                chckValue = value;
                NotifyPropertyChanged("ChckValue"); 
            }
        }
        public double SliderValue
        {
            get
            {
                return sliderValue; 
            }
            set
            {
                sliderValue = value;
                NotifyPropertyChanged("SliderValue"); 
            }
        } 
        public event PropertyChanged EventHandler PropertyChanged;
        private void NotifyPropertyChanged(stringpropertyName)
        {
           if (null != PropertyChanged)
          PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

As of now Data class is in place. Next we need to write code to preserve the page state. We need two variables in the code behind,

1. One bool variable to check whether we are loading new instance of page or not?

2. Object of Data class to bind values to controls.

Next we need to override the OnNavigatedFrom function of page class to persist value in state dictionary.



Now we need to override the OnNavigatedTo function. This function is called when used navigates to this page.



Essentially there are three tasks we are performing in the above function

1. Checking if it is new instance of the page.

2. If yes then checking if value of data control [object of data class ] is null

3. If null then reading from the state else creating new instance of that.

Full source code behind to preserve page value is as below,

using Microsoft.Phone.Controls;

namespace RestorePageState

{
    public partial class MainPage : PhoneApplicationPage
    { 
        DatadataToBindControls;
        bool isNewInstanceofPage; 
        public MainPage()
        {
            InitializeComponent();
            isNewInstanceofPage = true;
        } 
        protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
        {
            if (e.NavigationMode != System.Windows.Navigation.NavigationMode.Back)
            {
                State["Data"] = dataToBindControls;
            }
        }

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

        {
            if (isNewInstanceofPage)
            {
                if (dataToBindControls == null)
                {
                    if (State.Count> 0)
                    {
                        dataToBindControls = (Data)State["Data"];
                    }
                    else
                    {
                        dataToBindControls = newData();
                    }
                }
                DataContext = dataToBindControls;
            }

            isNewInstanceofPage = false;
        }
    }
}

We have code behind now bind the value of the controls, bind the value with mode two way as below,

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

<TextBox x:Name="txtValue" Height="100" Margin="12,37,58,470"
    Text="{BindingTextValue,Mode=TwoWay}"/>
<CheckBox x:Name="chkValue" Height="100" Margin="251,144,0,364"
    HorizontalAlignment="Left" Width="134"
    IsChecked="{BindingChckValue,Mode=TwoWay}"/>
<Slider x:Name="sldValue"
    Height="100" Margin="28,383,58,124"
    Value="{BindingSliderValue,Mode=TwoWay}"/>

</Grid>

Before debugging, the last step we need to perform is enable Tombstone upon deactivation while debugging in the properties page.



Now press F5 to run the application.



In this way you can preserve page state in Windows Phone 7.5 or mango phone.

I hope this post was useful. Thanks for reading.