I just rolled off a client recently that needed to build a Universal Windows Platform (UWP) application as part of their hardware and software solution.  For those who aren’t yet familiar with UWP, you can check out this article by Tyler Whitney.

As many of you developers out there are aware, sometimes you have to build or bring with you a number of application infrastructure items before you can even get started with the core application logic.  For example, you might need some helpers, services and base classes that make your job easier or allow you to start with your base patterns, such as, MVC, MVVM, etc.

Well, in order to get a jump-start in this direction, a group of Microsoft Evangelists, who have gone through the same troubles, decided to create an open source library of very useful items for UWP development called Template 10.  In this first part of this blog series, I will show you how to building a Universal Windows Platform application using this library can be done effectively.

Learn more about Template 10 here.

Install Templates

So, to get this started, lets first install templates.

The first thing you will want to do is start Visual Studio 15.  From the main menu, you can select TOOLS->Extensions and Updates…

The Extensions and Updates dialog will be displayed.  From here, select Online->Visual Studio Gallery.

Next, type Template10 into the search box.  You should see a Template 10 Template Pack search result item in the list.  Select the item and click Download.

A VSIX Installer dialog will be displayed to confirm that you would like to install the Template 10 Template Pack.  Make sure that the checkbox for the supported version of Visual Studio is selected.  Once you confirmed the version, you should be able to select Install.

Once the installation completes, you will see the following dialog.  Select Close.

Visual Studio will now need to be restarted.  Choose Restart Now.

Create New Project

Once Visual Studio has restarted, you will want to create a project with the template.  So, Select FILE->New->Project…

The New Project dialog will appear.  From here, you can select Installed/Templates/Visual C#/Windows/Universal.  Once you have Universal selected, you will see the full list of templates for Universal application development.  Since I want to include a menu that will take me to various screens in my application, I will choose the Hamburger (Template 10) template.

NOTE:  You could have selected Installed/Templates/Visual C#/Windows/Universal/Template10 and only viewed the Template 10 templates.

Now you can give your application a name and select OK.

Visual Studio will work its magic and create a new solution and a Universal Windows Platform application based on the Template10 template.

Go ahead and press F5 and see the new application in action.

You will notice that it has a main menu which include a hamburger menu item, a home item and a settings item.

NOTE:  Depending on the size of windows for the application, the menu will adjust:

Large Screen

Smaller Screen

Smallest Screen

If you select the hamburger menu item, the menu will expand or collapse.

The main page has a string parameter example to demonstrate sending information to another screen.  For example, if you were to type in “Hello World” and select Submit, you would see the following:

If you were to select the settings menu item, it would take you to the settings page with a couple of pre-built in options and information for you to explore.

Application Structure

Let’s take a look at the UWP application structure.  Stop the application and take a look at how it is structured.

Services and Styles

The Template10 template also added a Services and Styles directory for us.

The Services directory also contains a SettingService for us.  This settings service provides an easy way for you to store application specific settings that will roam across devices.  Any other services that we create will reside in this directory.

If you open up the Styles folder, you will find the file, Custom.xaml.

Custom.xaml defines the styles for your application.  If you open it up, you will notice there are 3 main themes defined:  Light, Default (Dark) and HighContrast.

For example, if you want to change the overall accent color for your application, go ahead and change the CustomColor color to #476B13.

Now, press F5.  Notice the color of the main page header.

MVVM Pattern

If you haven’t noticed, the Universal Windows Platform application uses an MVVM pattern.  You will notice that there are directories for Models, Views and ViewModels.

Learn more about the MVVM pattern.

Models

When building a Universal Windows Platform application, models refer to a domain object that represents information for some kind of state.  This data generally comes from a database or data access layer. This directory doesn’t have anything in it on initial creation since the template has no idea what type of application or business you are creating.

ViewModels

View models, on the other hand are represent an abstraction of view data which is represented by properties and methods.  This directory contains all the view models for all the views (screens/pages).

There is one thing to note.  If you open MainPageViewModel.cs, you will see the following:

However, what I really want you to focus on is a couple of things around the Value property for the view model.

First, notice that the view model inherits ViewModelBase.  This is part of the Template10 library.

Second, in the setter for Value, you will notice a call to the Set() function inherited by ViewModelBase.  The Set() function takes care of all your property changed events.  However, if you want to manually raise the property changed event, you can do so by calling the RaisePropertyChanged() function, which accepts a property name parameter.  For example, RaisePropertyChanged(“_Value”);  Also, if you are calling it from within the setter for the current property, you simply only need RaisePropertyChanged() without a property name.

Views

Views are basically a definition of the page/screen layout for your application.  It is what the user of the application sees and uses.

One thing to note about the templated views is how the DataContext is set by default in view.  Under the Views folder, open MainPage.xaml.  You will notice that there is a Page.DataContext element that defines a view model called ViewModel.  Notice that it’s type is MainPageViewModel.

Now, in the code, we can bind our Value property in our view model, MainPageViewModel.

Pretty nice huh?

So, to summarize what we accomplished in this blog post:

• We added the Template10 NuGet package.
• Took a look at the structure of the code
• Discussed briefly about the MVVM pattern that is used in the Template10 library.
• Gave an example of View and View Model binding using Template10 MVVM pattern.

Well, the Template10 Library gives us a number of other nice features, but we will discuss those as we need in future posts. For now, you get a pretty good idea how quickly you can build the shell of a Universal Windows Platform application.

In part 2 of this series, before we go crazy with adding more new features, I find it advantageous to put a few things in place before we start slinging around too much code. I will talk a little more about adding a string service for the application. Using T4 Text Templates we will generate a string helper class that will give us intellisense and compile time support.

I hope you enjoyed this post. If so, please share it with others.

6-Part Series

Part 1 – Building a Universal Windows Platform (UWP) Application (Part 1) – Using Template10

Part 2 – Building a Universal Windows Platform (UWP) Application (Part 2) – T4 and Strings

Part 3 – Building a Universal Windows Platform (UWP) Application (Part 3) – Multilingual Support

Part 4 – Building a Universal Windows Platform (UWP) Application (Part 4) – Logging w/ MetroLog

Part 5 – Building a Universal Windows Platform (UWP) Application (Part 5) – Analytics with Visual Studio Application Insights

Part 6 – Building a Universal Windows Platform (UWP) Application (Part 6) – Deployment and Analytics w/ HockeyApp