May 16, 2017 3:00 pm

Announcing Windows Template Studio

Today, we are pleased to announce the next evolution in your File New Universal Windows Platform app in Visual Studio – Windows Template Studio. Windows Template Studio addresses a top community ask in our developer survey to make it easier and provide guidance to create new projects that target the Universal Windows Platform. In this post, we’d like to spend a few minutes introducing Windows Template Studio and show you how it works.

Windows Template Studio uses a dev-friendly wizard to get your UWP apps to F5 in no time, bringing together the pages, frameworks and features that you want. Our wizard walks developers through four steps to quickly scaffold a new UWP app:

  1. Project Type: Select between standard layouts and predefined controls.
  2. Framework selection: Select the structure of your UWP app with in-house and third-party support.
  3. App pages: Select which pages that make sense for the app, that you are trying to create.
  4. App features: Easily add features such as background tasks with one click.

Furthermore, we’re open-sourcing Windows Template Studio, welcoming UWP devs to take the generation engine further – adding additional capabilities and app pages, improving the implemented best practices and patterns – and encouraging UWP devs to make the engine their own – tailoring it to their company’s specific needs.

Windows Template Studio is the evolution of Windows App Studio. App Studio was a free, online app creation tool that allowed developers and enthusiasts to quickly build Windows Universal Apps. We are taking our learnings from the code generation engine and the existing wizard to provide a strong foundation for our code generation and developer experience in Windows Template Studio.

A Lap Around Windows Template Studio

We kick off Windows Template Studio by creating a new UWP app project. In the Visual Studio 2017 ‘New Project’ dialog, select the Visual C# Windows Universal node.

Here you’ll see the Windows Template Studio project. Select the project type, enter in your new UWP app’s name and click ‘OK’. Windows Template Studio will now fire up and walk you through the UWP app creation wizard, step by step.

Step 1: Project Type

You begin by selecting a project type. We’ve started you with the most common types such as: blank, navigation pane and pivot and tabs.

Step 2: Framework

Once you have selected a project type, you need to select a framework. You can select from Code behind, MVVM Basic or the very popular MVVM Light.

Step 3: Pages and app lifecycle features

Once you have selected a project and framework, then it is time to add in pages and features. We’ve already added the most common pages such as Master/Detail, Settings and Web view. You can also easily add in Application Lifecycle features such as Suspend and Resume as well as Background Work and User Interaction.

Best practices and patterns

To wrap all of this up, with a couple of simple clicks, you can wire up an app that uses the Navigation Pane, MVVM Light framework, a Master Detail page and a couple of features such as suspend and resume and Azure hub notifications. You save time, your app is adhering to our design guidance and industry standard patterns and practices come free.

Below is an example of an app generated with Windows Template Studio. Again, we provide the foundation of a great UWP app and get you to F5 in a couple of clicks.

Get Started Today

Windows Template Studio v1.0 is available now and you can expect updates every 6 weeks. We have extremely easy to use instructions for installing the VS extension on our GitHub page as well. A public roadmap is currently available and we’d encourage you to check out The Tips and Tricks for UWP Developer session that was shown at Build to learn more. You can get started creating your own app in three simple steps:

  1. Download Visual Studio 2017 and select Universal Windows Platform development under Workloads.
  2. Install the Visual Studio Extension for Windows Template Studio by downloading the VSIX from the Visual Studio Gallery.
  3. Once installed, open Visual Studio 2017 and select FileNew Project→ C# → Windows Universal and you should see the new template that was just added.

And Best of All…Windows Template Studio is Open Source

Windows Template Studio is completely open-source and available now on GitHub. This project is community led and we’re very excited to already have contributions from the following community members: Matt Lacey and James Croft. We would love for you to contribute to the project and would encourage you to read our contribution guidelines for next steps.

In the spirit of being transparent, the roadmap for the next release is always available. If you have a bug that you would like to report or share a feature request, then please add it to our issue tracker.

We would love to hear how your experiences are using it and the helpfulness of the project. You can reach Clint at @clintrutkas and Michael at @mbcrump.  What are you waiting for? Go and try it out for yourself now!

Join the conversation

  1. Will it be possible to adapt an app made with Template Studio to Fluent Design automatically with the next big update of Windows? Thanks!

      • Not exactly sure what the ask is, but we use Segoe MDL 2 Assets fonts in several places such as the Master/Detail page. Let me know if you need further info.

  2. Hi.
    Viewing the templates I have seen that the splitview menu uses segoe ui symbol as I can use segoe MDL2 Assets the templates

  3. I want to ask if in templates like this time you can use Segoe MDl2 assets instead of Sgoe UI symbol for Splitview menu or in the next update templates

    • Please submit issues to our github at https://aka.ms/wts

      We aren’t tracking any issues here. This let’s us properly track and drive into issues. Please submit feedback / issues there

  4. Hello:
    In the Splitview menu you can get through the visual striggers it is possible to put overlay

  5. I’ve seen the icons of Segoe, the question is: on the smartphone part the Splitview should this overlay as I can put it through the visualstate or better to make views for each device