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

image

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,

image

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.

clip_image002

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.

image

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

image

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

image

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.

image

Now press F5 to run the application.

image

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 Smile

Advertisements

5 thoughts on “Restore and Preserve Page State for Windows Phone 7.5 or Mango Phone

  1. Actually there is one little issue. Because the binding doesn’t register the value form the control to property until the control loses. In other words, if you change the text on the textbox and hit the home button while the cursor in the textbox, the new value won’t make it to the Data object and hence it won’t be saved

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s