Windows Template Studio

Windows Template Studio makes the start easier to create new Windows (UWP) apps. Windows Template Studio is not a new Visual Studio, but offers flexible templates within Visual Studio 2017 to create Windows (UWP) apps. Let’s get into an overview of this cool new feature.

To create Universal Windows Platform apps, Visual Studio offers a Blank App (Universal Windows) template that creates an UWP app with an empty main window. Only an empty template has the advantage that you are not restricted by the ideas of the features offered by the template, and you can do a fresh start.

With previous versions of Windows and Visual Studio, we had templates to create Grid, Split, and Hub apps. Of course, it’s always possible to change the XAML code, get rid of features as are offered by the templates, and change the look drastically. However, many developers just changed the data and used the layout exactly as created by the template. Many apps in the Windows Store looked alike from a layout perspective.

Today, also many apps still look alike, with the SplitView, a Hamburger button, a list of menu items, and adaptive behavior to arrange the split view depending on the window sizes. It’s not really bad when multiple apps behave the same way. We just have more work to do to create a UI that looks similar.

Of course, there’s also an option to use a toolkit such as the UWP Community Toolkit with the HamburgerMenu control to get a lot of this functionality.

Now we have another option: The Windows Template Studio. The user interface is similar to the modern Visual Studio Installer where you can select the different workloads for installation:

You can install the Windows Template Studio from Extensions and Updates…. You just need to select the Windows Template Studio for download.

Starting the Windows Template Studio from File | New Project, select Windows Universal, and Windows Template Studio. Next, you can see this dialog to select the project type and the framework:

Currently you have these options for the layout of the main page:

• a blank page
• navigation with a SplitView and a Hamburger button to display menus within ItemsControl controls
• Pivot and Tabs for quickly navigating between the pages with tabs

And these options for the framework:

• code-behind – this should be chosen for simple projects only
• MVVM Basic with simple MVVM types directly implemented within the application
• MVVM Light – using the MVVM Light library from Laurent Bugnion

After selection of the project type and the framework and clicking Next, a dialog to select pages and features shows up:

Here, you can select different pages and features. These are the pages that show up with my current version:

• Blank
• Chart
• Map
• Master/Detail
• Tabbed
• Web View
• Settings

The Chart page was added by the community and makes use of the Telerik chart control RadPieChart.

The Map page makes use of the MapControl, binds the properties of the control to a view-model class, and makes use of the GeoLocator in a location service.

The Master/Detail page creates a page where a ListView is used to show the list, and a separate user control is created for the detail information. The functionality implemented also pays attention to adaptive design and opens a separate page for the detail information in case the window width gets too small.

The Tabbed page creates a page with the Pivot control to allow switching between different items.

The WebView page makes use of the WebView control to display a website referenced in the view-model.

The Settings page automatically adds the Settings Storage feature for displaying application settings. Here, a link is added to the privacy terms of the app, and the app theme can be switched between Light and Dark.

With the exception of the Settings page, you can create multiple pages of the same type for your app. You just have to enter a name for the page, and add another one.

Several different features are available as this list shows:

• Settings Storage
• Suspend and Resume
• Background Task
• Azure Notification Hub
• Live Tile
• Toast Notification

The Settings Storage makes use of Newtonsoft.Json to serialize the settings in a JSON file to a local folder.

Suspend and Resume handles storing the state of the application when the app moves into the background, and also deals with navigating the app to the previous page on a resume.

Live Tile updates the tile of the app using the TileUpdateManager, Toast Notification makes use of the ToastNotificationManager.

The Azure Notification Hub makes use of the PushNotificationChannelManager to create a push notification channel on Microsoft Azure.

After creating the initial app, you can build, deploy, and run it:

Of course, there’s still a lot to do. Here, a **Task List* where the items are created from the templates can be worked through:

I like the initial structure of the app created. However, I’m not completely happy, in special when using UWP, Xamarin, and WPF, and would like to share as much code as possible. Of course, there’s room for improvement. Everything is open source. The Windows Template Studio can be found at Github – Windows Template Studio, and you can create your own templates: Authoring templates. If I find some time, I’ll create a template consisting of two projects, UWP and a .NET Standard Library containing services, and making use of the Microsoft.Extensions.DependencyInjection container.

In summary, it’s making great progress. To support different frameworks, programming languages, and features with these templates, check the GitHub issues for unit tests, UI tests, Prism, Project Rome, VB…

In case you like such templates for other technologies, there are some issues open as well: WPF, Xamarin

Enjoy!

Christian

More information on creating Windows 10 apps is in my book Professional C# 6 and .NET Core 1.0, and in my UWP workshop