Dhananjay Kumar

In this post we will show you the way to Restore and Preserve Page state for windows phone application page.

Let us put some control 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 values of these controls, let us create 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 NotifyPropertyChanged event in the setter of property to notify when value changed at the control. Control value would be bind with two ways binding with these properties. Eventually Data class will be as below,

using System.Runtime.Serialization;
using System.ComponentModel;

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 PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string propertyName)
        {
            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 code behind,

1. One bool variable to check whether new instance of page or not?
2. Object of Data class to bind values to controls.

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

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

Essentially there are three tasks we are performing in 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
    {

        Data dataToBindControls;
        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 = new Data();
                         }
                    }
                 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="{Binding TextValue,Mode=TwoWay}"/>
            <CheckBox x:Name="chkValue" Height="100" Margin="251,144,0,364"
                      HorizontalAlignment="Left" Width="134"
                      IsChecked="{Binding ChckValue,Mode=TwoWay}"/>
            <Slider x:Name="sldValue"
                    Height="100" Margin="28,383,58,124"
                    Value="{Binding SliderValue,Mode=TwoWay}"/>

        </Grid>

Before debugging 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

Follow @debug_mode