Windows Template Studio for UWP

Windows Template Studio for UWP

Short introduction

Creating new Universal Windows Platform application was never easier than now. With friendly wizard developers are able to choose UWP app template and start implementation from reasy-to-go sample. This is evolution tool of Windows App Studio. It handles different scenarios described later in this article (like using master-detail navigation or MVVM Light library). In this article I would like to show how to configure and start journey with Windows Template Studio.

There are also some principles which are connected with Template Studio. I would like to write two of them which are the most important I think:

  • Generated templates are a starting point, not a completed application.
  • Generated templates should work on all device families
  • Templates should have comments to aid developers. This includes links to signup pages for keys, MSDN, blogs and how-to’s. All guidance provide should be validated from either the framework/SDK/library’s creator.

 

What do I need to start?

1) Visual Studio 2017 Community (for free or choose higher version)

 

Let’s start

First of all we have to install Visual Studio extension to use Template Studio. You have to know that there are two things required:

  • Windows 10 Creators Update SDK (version 10.0.15063.0 or later)
  • Visual Studio 2017 or higher (any edition)

We have three types of versions available to install:

  • Public Release: The official extension from the Visual Studio Gallery
  • Nightly
  • Pre-release (stable)

In this article we will use stable version from Visual Studio Gallery.

 

Installation

1. Open Visual Studio and select “Tools” and then “Extensions and updates”:

2. In the opened window select “online” tab on the left and then type “windows template studio” in search window. Click download (remember that after click you have to close Visual Studio to start installation):

3. Click “Modify” button in opened window:

 

Once installation is finished you can open Visual Studio and see the result. How to check whether installation success or not? Click “File” then “New project” and select “Windows Universal” tab – “Windows Template Studio” should be available to select:

 

Create your first project with Template Studio

In the above step please type your project and then click “OK”:

Once you click “OK” you should see below window:

As you can see you can choose:

Project type:

  • Navigation Pane
  • Blank
  • Pivot and Tabs

In this article I will use “Pivot and Tabs” template.

Framework:

  • Code Behind – choose this template if you do not want to apply MVVM pattern and write your logic in code-behind classes
  • MVVM Basic – this is generic version of MVVM pattern and this type will add some code to your project to make MVVM easier to apply
  • MVVM Light – great library to make it easier and faster to apply MVVM pattern in your apps

In this article I will use “MVVM Light”.

My configuration should looks like below:

Click “Next”. Now we can choose which types of pages we would like to use in our application:

Currently below types are supported:

  • Blank
  • Maps
  • Master/Detail
  • Settings
  • Tabbed
  • Web view

I will choose “Settings” and type the name:

You can notice that on the right side there is summary of our actual template:

If you scroll down you can see that there is also “Features” tab:

 

In this section you can select on or more features:

  • Settings Storage (added by default) – ready class to handle application data
  • Suspended and Resume – ready service to handle application life cycle events
  • Background Task – ready code to handle background operation of your application
  • Azure Notification Hub – integration with Azure push notifications service
  • Live Tile – ready configuration for life tiles displayed in Start menu
  • Toast Notifications – configuration that enables displaying toast notifications from application

Here I will choose “Suspended and Resume” with “Toast Notifications”. My final configuration looks like below:

Click “Create” button.

 

Project structure

Once Visual Studio configure everything, project structure looks like below:

 

Start your application on the local machine. You should notice that Pivot page contains “Settings” and also sample toast notification was displayed:

Now let’s see what was added to our project:

  • Activation folder contains two classes responsible for app life cycle events
  • Helpers folder contains classes responsible for data serialization and deserialization (storage) and resources loading
  • Services folder contains classes connected with navigation, app life cycle events and toast notifications
  • ViewModels folder contains app view-models with ViewModelLocator main class to localize them
  • Views folder contains pages of applications

Of course now you can customize you application to fit your needs.

 

Sum up

As you can see creating Universal Windows Application is much easier with Windows Template Studio. In this article I showed of course a small fragment of it – this is rally powerful tool. I recommend to visit official GitHub page where you can find instructions and samples. It is available here.

Have fun!

Advertisements