WinRT Framework: Application State

From the previous blog entry, on our diary application, we used the framework to help us navigate from the MainPage to the Diary Page and vice versa.
On the Diary Page, we will notice that if we write some text on the textbox, when we navigate away from that page and go back to the diary page, the text is not persisted. This means that the text is not stored. So navigating away from the page, we lose that text.

How do we fix this? Simple! The framework has its way! So, let’s get to coding mode.

1) Let’s edit the DiaryPageVM.cs and add a text property to bind to our textbox.
We also need a Bindable class (part of the framework) to have a way for us not be notified when the property is updated.
In the Bindable class, the NotifyPropertyChanged method fires the INotifyPropertyChanged.PropertyChanged event for the Property that you pass in.
Luckily, the framework already has a class we can inherit that takes care of this; instead of us making another helper class.

  public class DiaryVM : Bindable, IRequireNavigationService
    {
        public INavigationService NavigationService { set; get; }

        private string _diaryText;
        public string DiaryText
        {
            get { return _diaryText; }
            set
            {
                _diaryText = value;
                NotifyPropertyChanged(() => DiaryText);
            }
        }
    }

2) Now that we have a text property to bind to the textbox, we need the framework to persist the state of our application.
On the same page (DiaryPageVM.cs) we need an interface — ISupportTransientState

public class DiaryVM : Bindable, IRequireNavigationService, ISupportTransientState
  • This interface tells the framework that our ViewModel has a transient state.
  • The framework then is responsible for persisting and restoring the state.

3) Add a TransientState class that will have the properties that we need its state to be persisted — Text!

[DataContract]
public class TransientState
        {
            [DataMember]
            public string Text { get; set; }
        }
  • The DataContract and DataMember are both used for serialization. That means, the data is being stored and its value can be access in the same or different computer environment.

4) Implement the methods of the ISupportTransientState.
4a) GetTransientStateTypes() that returns all the TransientState that we need.

public IEnumerable GetTransientStateTypes()
        {
            yield return typeof(TransientState);
        }

4b) GetTransientState() that sets the value of the TransientState’s Text property to the DiaryText and creates an instance of the TransientState class.

public object GetTransientState()
        {
            return new TransientState { Text = DiaryText };
        }

4c) UpdateTransientState() that updates the value of the Text property when DiaryText gets updated.

public void UpdateTransientState(object untypedState)
        {
            TransientState state = (TransientState)untypedState;
            DiaryText = state.Text;
        }

5) Bind the DiaryText to the textbox in DiaryPage.xaml

        <TextBox Grid.Row="1"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch" Margin="100"
                 AcceptsReturn="True"
                 Text="{Binding DiaryText, Mode=TwoWay}"/>

And we are done! Now let’s run the program and make sure it works.
THINGS TO REMEMBER:

  • When we navigate to the DiaryPage and put some text on the textbox, and we navigate away from that page, the text gets persisted and clicking the ‘ForwardButton’ restores the state of the text.
  • Now the question is why not click the Go to Diary button (center) of the MainPage? On my previous blog entry about Navigation, I talked about when we click the Go to Diary button, we are creating a new instance of the DiaryPage. When we click that instead of the forward button, the text will not be there.
  • If we try to use the navigation arrows at the top of our application, we are keeping the same instance of the DiaryPage, which means we will see that the text is persisted

For reference, Here is a link to the solution

One thought on “WinRT Framework: Application State

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>