651.288.7000 info@intertech.com

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…

To start, click on extensions and updates to start building a Universal Windows Platform application.

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

select Online and then click on 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.

download the Template 10 Template Pack

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.

Install the Template 10 Template Pack

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

Finish installing the Template 10 Template PackVisual Studio will now need to be restarted.  Choose Restart Now.

Restart your computer to finish installing the Template 10 Template Pack

Create New Project

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

create a project with the template to start building a Universal Windows Platform

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.

give your Universal Windows Platform application a name

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

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.

press F5 and see the new universal windows platform 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

Universal Windows Platform application window size large

Smaller Screen

Universal Windows Platform application window size small

Smallest Screen

Universal Windows Platform application window smallest size

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

Universal Windows Platform application hamburger window

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:

demonstrate sending information to another screen for your universal windows platform application

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.

Universal Windows Platform application settings page

Application Structure

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

Universal Windows Platform application structure

Services and Styles

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

Universal Windows Platform application services and styles

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.

Universal Windows Platform application settingservice

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

Custom.xaml file in the Styles folder

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.

Custom.xaml defines the styles for your Universal Windows Platform application

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

change the overall accent color for your Universal Windows Platform application

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

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.

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).

ViewModels for your Universal Windows Platform application

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

open MainPageViewModel.cs in your Universal Windows Platform application

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

uwp27

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.

how the DataContext is set by default in view

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

bind 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.

Pin It on Pinterest

Share This

Like What You've Read?

Subscribe to the Blog.

Every Friday we send that week's content from our Developers via email. Try it out!

Some ad blockers can block the form below.

You have Successfully Subscribed!