Prism for Windows Runtime: Creating a basic implementation of the MVVM pattern

Article
04/25/2013

This is the second blog post in a series that walk you through creating a simple Windows Store app using the Prism for Windows Runtime library. Please review the first post in the series for the steps necessary to create the basic app based on MvvmAppBase. MvvmAppBase exposes several services including the FrameNavigationService which is necessary for both navigation and view model state persistence.

You can get the latest source on CodePlex.

The following procedure shows how to create a basic implementation of the MVVM pattern by using the Microsoft.Practices.Prism.StoreApps library. You will also discover how view model instances can save their state to survive app termination.

Complete the Creating a Hello World app walk through from the previous post.
Add a folder named ViewModels to the root folder of the Windows Store app project.
Add a new class to the ViewModels folder named StartPageViewModel.
Make the StartPageViewModel class public.

Add a FirstName property and backing field to the StartPageViewModel class.

 private string _firstName;
public string FirstName
{
    get { return _firstName; }
    set { _firstName = value; }
}

Import the types from the Microsoft.Practices.Prism.StoreApps library into the StartPageViewModel class.

 using Microsoft.Practices.Prism.StoreApps;

Update the StartPageViewModel class so that it derives from the ViewModel base class in the Microsoft.Practices.Prism.StoreApps library.
```
 public class StartPageViewModel : ViewModel
```
By deriving the StartPageViewModel class from the ViewModel base class we can use the ViewModel class's implementation of INotifyPropertyChanged.
Update the FirstName property to use the SetProperty method, from the Microsoft.Practices.Prism.StoreApps library, in the property setter.
```
 public string FirstName
{
    get { return _firstName; }
    set { SetProperty(ref _firstName, value); }
}
```
The SetProperty method first checks to see if the new property value is identical to the old value. If the new value is different, the backing field is updated and the PropertyChanged event is raised with the property name as the event argument.

Replace the contents of the Grid control in the StartPage view with a TextBox that will bind to the FirstName property of the StartPageViewModel class.

 <StackPanel>
    <TextBlock Text="Hello World!!!"
               Style="{StaticResource HeaderTextStyle}" />
    <TextBox Text="{Binding FirstName, Mode=TwoWay}" />
</StackPanel>

The TextBox control will allow you to enter data. Since the Text property of the TextBox is bound to the FirstName property of the StartPageViewModel class with a TwoWay binding, updating the text in the TextBox control will update FirstName property and vice versa.

Add the ViewModelLocator.AutoWireViewModel attached property to the Page control for the StartPage.

 <Page xmlns:Infrastructure="using:Microsoft.Practices.Prism.StoreApps"
      Infrastructure:ViewModelLocator.AutoWireViewModel="True"
      ... >
    ...
</Page>

The AutoWireViewModel attached property tells the ViewModelLocator object to create an instance of the view model that corresponds to this view and set it into the view's DataContext property. The ViewModelLocator object uses a default convention where it looks in the "ViewModels" namespace for a type whose name starts with the name of the view and ends with "ViewModel".
Run the app. Enter a value in the TextBox. The FirstName property of the StartPageViewModel instance will be updated.
With the app running select the Suspend and shutdown menu option from the Debug Location toolbar in Visual Studio.

This feature is used to ensure that your app behaves as expected when Windows suspends or resumes it, or activates it after a suspend and shutdown sequence.
Run the app.

Notice that the value you previously entered into the TextBox is no longer present.
Stop the app and update the StartPageViewModel class so that the FirstName property is annotated with the [RestorableState] attribute.
```
 [RestorableState]
public string FirstName
{
    get { return _firstName; }
    set { SetProperty(ref _firstName, value); }
}
```
Properties annotated with the [RestorableState] custom attribute will have their values saved when the app suspends, and will have their values restored when the app reactivates following termination.
Run the app. With the app running select the Suspend and shutdown menu option from the Debug Location toolbar in Visual Studio.
Run the app again. Notice that the value you previously entered into the TextBox survived termination.

Next let’s take a look at how to create a Flyout and show it using the FlyoutService.

Prism for Windows Runtime: Creating a basic implementation of the MVVM pattern

Additional resources