Grid Application MVVM Template

Introduction

I was chatting with a buddy the other day about the C# Grid Application template that comes with Visual Studio 2012 for Windows Store applications.  I followed that up with trying to explain how to correctly set it up to use MVVM, data binding, and all of the cool features that Visual Studio provides.

After a few minutes we were both frustrated because the Grid Application template that comes with Visual Studio was very poorly done and doesn’t guide the developer to using the correct coding standards.

So, I took the default template and ripped out the bad parts.  Then I built it back up using a much better MVVM model.  I also set it up so each View Model has sample data.  This allows each page to use the Visual Studio designer to setup and manage data binding.  I also added an ExtendedSplash screen as part of the template to help avoid a common failure associated with certification.

Let’s Go Already!

Let’s get setup to walk through the template.  First, download and install the template file: Grid Application MVVM Template

Now open Visual Studio 2012 and create a new project. Select the Grid Application MVVM template and type in a project name and click OK.

NewProject

One the project is created, you’ll see the solution explorer should look something like this:

SolutionExplorer1

Background Information on MVVM

Let’s take a minute to talk about the parts of “MVVM”.   It stands for Model View View Model.  But it’s easier to read as: Model, View, View Model.

The Model is the code in DataModel. The Views are the various pages, in this case, GroupDetailPage, GroupedItemsPage, and ItemDetailPage.  Finally the ViewModel is the code in the ViewModel folder.

The Model is responsible for loading the data from the data source.  This can be a database, an XML file stored on a web service, or even Azure Mobile.

The View is responsible for displaying data to the user. Sometimes this maps 1:1 with the Model, but usually it does not.  Often the View needs data from various pieces of the Model.   This is what the View Model does.

The View Model is the glue that ties the View to the Model.  If you’ve worked with MVC, the View Model is essentially the Controller.  It is responsible for knowing what data the View needs and how to get it from the Model.  The View Model can also provide sample design time data that allows the developer to use the powerful Visual Studio 2012 designer.

The Data Model

The ExampleDataSource code is fairly simple because everyone needs to access data in different ways.  In this case, we have a LoadDataAsync call that is responsible for loading the data.  There is a 2.5 second delay to simulate a delay during loading.  This lets you get a better idea how the UI reacts while data is loading.  The we just load five groups of data into our list of groups.  Once this data is loaded, we can call the other methods to retrieve items.  Also notice that each of the Get methods are async. This ensures that even if we forgot to call the LoadDataAsync method, it will still be able to load the necessary data without blocking the UI.

The two primary data classes in this template are ExampleGroup and ExampleItem.  Both of these classes inherit from BindableBase.  This allows us to bind our View directly to one of these items.  I also was careful to name each property in a unique way. This makes it easier for developers to understand how each item is loaded, processed, data bound, and finally displayed.

The ExampleGroup contains two lists. One list contains all of the child items associated with the group and the other contains the top items.  The top items property is used later to display a smaller chunk of the total data set.

The ExampleItem contains a back reference to the group, as well as all of it’s necessary properties.

The View

Let’s dig into the GroupedItemsPage view.  There are a few pieces of Visual Studio magic that make the sample items show up.  The first is the in page setting of the DataContext:

DataContext1

This actually creates an instance of the view model class, but it also ensures the properties window knows the type of object this page is bound to.  Now when I go down to a bindable property I can click on the properties window and choose Create Data Binding:

CreateDataBinding1

This will pop up a dialog that lets you choose the property to bind to:

CreateDataBinding2

Notice that the data context references our view model object, and the path window shows all of the properties of our view model.  Now I can just select what I want to bind to, and Visual Studio does all of the work.

The View Model

The View Model is the glue that joins the Data Model and the View together.  In the example of the GroupedItemsPageViewModel, we expose the AllGroups property. This contains a read only observable collection of groups.  In the constructor, we put in code to allow us to populate the view model when we are viewing it in the Visual Studio designer.

Constructor1

This is a powerful tool that lets you see your page without the need to deploy and run the code. The BaseViewModel class is a wrapper that gives you two callbacks: PreRefresh and PostRefresh.  You can override these methods if you need to perform actions before or after the view model is refreshed.  In this case, we clear the collection of groups before we refresh.  Finally, it calls us back in RefreshInternalAsync.  This let’s us query our data source to get the data we need to populate our view model.  Now our GroupedItemsPage can call our ViewModel’s LoadAsync method, and this will trigger the view model to update and reload the data bound properties.

There is a generic version of BaseViewModel that allows you to specify a class that must be provided to the view model’s LoadAsync method call.  The GroupDetailPage and ItemDetailPage both use a version of this to provide data that can be used in the RefreshInternalAsync call to get necessary info from the Data Model classes.

Other Cool Stuff

One of the common problems when loading data is the amount of time it takes to do so.  The Windows Store recommends that you make an extended splash screen to perform long loading operations.  However, having one doesn’t hurt, even if your data load is quick.  So this template provides one for you.  You can see that we call our LoadDataAsync in the ExtendedSplash’s RestoreStateAsync method.  The customer experience will be the initial splash screen is displayed, there is a slight flicker as the extended splash is loaded, then the progress ring will start spinning while the data is loaded.  As far as Windows is concerned, your application is loaded and running, but the user gets a better experience as they aren’t staring as an empty main page.

Summary

I hope this template saves you a lot of time, as well as gives you a better start for designing a true MVVM model Windows Store application.  If you have comments or questions, don’t hesitate to ask!

Advertisements
This entry was posted in Hobbies, Programming and tagged , , , . Bookmark the permalink.

3 Responses to Grid Application MVVM Template

  1. Rapuke Moana says:

    This is great… however I now want to take a couple of related (1 to many) datasets from an OData source and don’t know where to start… can you point me to something which would fill in my lack of knowledge?
    Thanks..

  2. Pingback: Grid Application MVVM Template | Shane’s Blog v2.0 | Ra Puke Moana

  3. tyrendes says:

    Thanks for the comment. If you can build the results into a “Model” then you can modify your
    “ViewModel” to return the all the data the “View” needs. Then you just update your “View” to render.

    In short, your OData should be the basis for your model.

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