Turning your Windows 10 Project Templates up to 10 with Template10!
We're back with a Theme Week, this time focusing on... wait for it... Windows 10 (Okay, I had a number of Win10 posts in the queue, so thought this a good means to get them out. :)
Visual Studio Project Templates are great tools to help you kick off a new project quickly. They can help scaffold your app, remove some of the infrastructure drudgery and boilerplate stuff.
So you might expect that there are a ton of Windows 10 Project Templates. Um... not so much. At least not in the Visual Studio box.
See this lack, the community has jumped in and are creating and sharing their own Windows 10 templates. A few months ago I highlighted one of the first I found, Go beyond "Blank App" with these Windows 10 VS 2015 Project Templates. Today I'm highlighting another that looks really cool... (and has a cool name :)
There's a compete cast behind Template 10, here are just a few, Jerry Nixon, Daren May, Robert Evans, Microsoft (PFE) professional field engineers, Internal product and platform teams who contribute and advise. And YOU are just a PR away from help too!
A rich library of helpers, services, and base classes for new and existing Windows UWP apps to maximize awesomeness and minimize boilerplate garbage.
A community-built, set of Windows XAML/.NET app templates with basic design patterns. It leverages the Template 10 library (in NuGet) to maximize awesomeness and minimize boilerplate garbage.
Is Template 10 ready to use?
Yes. It sure is. No part of Template 10 is in preview starting September 2015.
What is Template 10?
Template 10 is three things.
- The Template 10 Windows app project templates in the Visual Studio gallery.
- The Template 10 Windows app helper library in NuGet.
- The Template 10 Windows app technique samples in GitHub.
Template 10 is the brainchild of Microsoft Developer Evangelism and was started there. Lots of learnings from Windows 8, including lots from the Pattern's and Practices Prism.StoreApps framework are in the code base.
Why are you saying T10 is convention-based?
Look. You know the Asp.NET MVC Visual Studio project? It has several empty folders intended to guide developers where to put their views, controllers, etc. Template 10 does this, too. Like MVC, we don't require you use our conventions, but you can. We believe that developers should be given guidance, not just code. Template 10 does that. Our conventions are simple and consistent. But, most importantly, optional. Have your own conventions? No problem. Otherwise, there are ours.
Our conventions are simple. Like this:
- We put views (XAML files) in a /Views folder (and ns)
- We only have one view-model for one view
- We put our view-models in a /ViewModels folder (and ns)
- We use OnNavigatedTo in view-models, not pages
- We put our models in a /Models folder (and ns)
- We often use the façade pattern with our models
- We navigate using a NavigationService
- We communicate with a Messenger
- We like Dependency Injection
- We use Template 10 ;)
What's in Template 10?
There is a lot to Template 10, but it's actually very basic.
Note: many of the (docs) are still being written.
There are XAML controls in Template 10.
- Template10.Controls.PageHeader (docs)
- Template10.Controls.HamburgerMenu (docs)
- Template10.Controls.CustomTitleBar (docs)
There are XAML behaviors and actions in Template 10.
- Template10.Behaviors.NavButtonBehavior (docs)
- Template10.Behaviors.TextBoxEnterBehavior (docs)
- Template10.Behaviors.TimeoutAction (docs)
There are XAML services in Template 10.
- Template10.Services.NavigationService (docs)
- Template10.Services.KeyboardService (docs)
- Template10.Services.SettingsService (docs)
- Template10.Common.WindowWrapper (docs)
- Template10.Common.DispatcherWrapper (docs)
We plan to add more services to Template 10.
There are XAML converters in Template 10.
There are basic MVVM classes in Template 10.
- Template10.Mvvm.BindableBase (docs)
- Template10.Mvvm.DelegateCommand (docs)
- Template10.Mvvm.ViewModelBase (docs)
Template 10 is not intended to be a new MVVM Framework.
There are developer utilities in Template 10.
- Template10.Utils.MonitorUtil (docs)
- Template10.Utils.ColorUtil (docs)
- Template10.Utils.TypeUtil (docs)
- Template10.Utils.XamlUtil (docs)
There are Visual Studio project templates in Template 10.
- Windows/Universal/Template 10/Template 10 (Blank) (docs)
- Windows/Universal/Template 10/Template 10 (Minimal) (docs)
Projects are meant for greenfield projects, and learning
There is a library in NuGet with Template 10.
The library can be added to existing Windows apps
There are samples in Template 10.
- Samples/MvvmLight (docs)
- Samples/Search (and Login) (docs)
- Samples/Tiles (and Toast) (docs)
- Samples/TitleBar (docs)
Where have I heard about Template 10?
Template 10 shows up a lot of places.
- On Microsoft Virtual Academy's Developer's Guide to Windows 10 (link)
- On Microsoft official Windows 10 Hands on Labs (link)
- In Microsoft Press Windows 10 exam-prep books (link)
Who's contributing to Template 10?
Template 10 has a lot of authors. ...
Does Template 10 require MVVM?
No. Though it's difficult to imagine any XAML app not using model-view-view-model, there is nothing in Template 10 that requires you to use it. Template 10 is compatible with any MVVM framework, and ships with a mini framework that's probably enough for many of the apps out there.
To leverage other MVVM frameworks, simply inherit from Template10.Mvvm.ViewModelBase or implement Template10.Services.NavigationService.INavagable. This enables OnNavigatedTo/From in your view-models.
Is Template 10 right for me?
Probably. Template 10 is intended to remove the boilerplate garbage we all have to write over and over; it packs in as many time-saving lessons-learned as possible for app developers. It's perfect for brand new apps, or apps just wanting to leverage the library. That being said, Template 10 is not for everyone (probably around 90% of apps).
Here are a couple others in the community who are showing all of use how to use Template10.
First a couple posts from Marco Minerva
Template10 is an advanced project template for the Unversal Windows Platform. It’s an open source project available on GitHub at https://github.com/Windows-XAML/Template10. If you don’t know about it, I suggest you to read the great article Template10: a new template to create Universal Windows apps – The basics by Matteo Pagani (Support Engineer at Microsoft).
The template has been created with MVVM in mind, and in fact contains some useful classes that simplify the adoption of this pattern (like BindableBase and ViewModelBase). But it isn’t an MVVM Framework (or toolkit). However, it’s easy to integrate Template10 with, for example, MVVM Light. Let’s see how to do that.
First of all, let’s add the template to our app, as described in the post linked above (you can also find it on NuGet). Then, we need to add MVVM Light using NuGet: search for the MvvmLightLibs package and install it. As NuGet 3.0 doesn’t allow anymore to run installation script, even if we choose the MvvmLight package, it will not install additional files like ViewModelLocator, nor it will modify the App.xaml file with its reference. So, we need to perform these steps manually.
... [Click through to read the whole post, Integrating Template10 with MVVM Light]
In the last post we talked about Integrating Template10 with MVVM Light. Now let’s see how to use some basic services provided by MVVM Light, starting with SimpleIoC and Design time support.
In this way, when we are at design time, the type passed to MainViewModel is DesignTimeDataService, while at execution time we’ll have a RuntimeDataService. In fact, in the MainViewModel constructor (lines 12-20) we check whether we are actually at design time, and so we call the GetPeople method, in order to show dummy data (from DesignTimeDataService) to enable design time support. Note that we again use a method available in the ViewModelBase class that comes from MVVM Light, and not the Template10 ViewModelBase implementation from which the View model inherits:
... [Click through, Using IoC and Design time support with MVVM Light and Template 10]
Finally a couple great posts from Matteo Pagani
When you launch Visual Studio 2015 to create a Universal Windows app for Windows 10 for the first time, the first thing you notice is that the number of available templates is very low. If, when it comes to Windows / Windows Phone 8.1 development, Visual Studio 2013 offered many templates to quickly implement the most used layouts (Hub, Pivot, etc.), in Visual Studio 2015 we have just one template called “Blank app”.
The reason of this choice is that, in the past, the standard templates were used by the developers without very good skills in developing the user experience of an application (like me ) to make the job easier and to avoid to create the user interface from scratch. The downside of this approach is that, during the course of time, it leads many developers to publish a lot of applications that looked very similar to each other. Consequently, Microsoft has decided, with Windows 10, to leave more freedom to the developers and to avoid forcing them to adopt a specific design patter. It’s important to highlight, however, that this doesn’t mean that you can do whatever you want when it comes to create the user interface, without following any criteria. Providing a great user experience is still one of the key pillars to create a successful app! As such, I strongly suggest to read the official guidelines to design Universal Windows apps on the Dev Center: https://dev.windows.com/en-us/design
The new blank template provided by Visual Studio 2015 is very simple and it’s the perfect starting point for every application. However, sometimes, especially when you need to work on a complex project, it can be even too simple. When we need to handle advanced scenarios (like using the MVVM pattern or managing the state of the page) we need to create all the required infrastructure.
To make the life the developers easier, a team of Microsoft people, lead by Jerry Nixon (a Technical Evangelist very well known for his series of MVA trainings about Windows 10 development) have started to work on an advanced template called Template10. It’s an open source project, available on GitHub at https://github.com/Windows-XAML/Template10 and, as such, you’re more then welcome to give your contribute, by helping with the documentation or by making some enhancements and submitting a pull request.
Another important feature offered by Template10 is the automatic handling of the page stack. If you already have some experience in developing Windows Store apps for Windows and Windows Phone 8.1, you’ll know that navigation management is one of the main differences between the two platforms. On Windows Phone, you don’t have to add any visual element in the user interface to allow the user to go back to the previous page of the app, since every device has a hardware Back button. However, the same doesn’t apply on Windows, since there is no Back button on a desktop or on a tablet.
... [Read it all, Template10: a new template to create Universal Windows apps – The basics]
In the previous post we started to know Template10, the new open source template developed by a Microsoft, with the goal to become the starting point for every Universal Windows app developer. In this post we’re going to see some cool custom controls provided by the library.
The PageHeader control
One of the new features available in Windows 10, when it comes to design the user interface, is the improved flexibility regarding the application bars. In Windows and Windows Phone 8.1 you were able to place an application bar only at the bottom of the screen. Only in Windows 8.1 you were allowed to have a top application bar, but not for commanding purposes: it had to be used to make easier for the user to navigate through the sections of the application.
The bottom application bar was implemented using a control called CommandBar, which makes easier for the developer to quickly add buttons so that that the user can interact with the content on the screen. Windows 10 allows, instead, to place the CommandBar control also at the top. The PageHeader control is an extension of the CommandBar one, so that you can use it not just to provide commands to the user, but also to act as a real header of the page. Thanks to this control, it will be easier to implement the same look & feel offered by many native applications like News or Money, which offer an header with the tile of the page and a set of buttons to handle navigation or content interaction.
The HamburgerMenu control
Another new Windows 10 feature is the SplitView control, which can be used to implement navigation experiences based on the hamburger menu in your applications. This approach is based on a side panel (typically, it’s placed on the left of the screen) which the user can expand by tapping a button on the top of the panel (usually, in the top left corner). Inside the panel you can usually find multiple items, which can be used to quickly jump from one section to another of the application. The name comes from the fact that the button to show or hide the panel is visually represented by thee lines, one on top of the other, which look like a hamburger between two pieces of bread.
Many native applications are using this approach, like News (which uses the panel to give access to the different sections of the app) or Mail (which, instead, uses the panel to show the available mail accounts with their sub folders).
HamburgerMenu and PageHeader: the dynamic duo
The PageHeader and HamburgerMenu controls have been designed to work together. The best visual layout, in fact, can be achieved when the various sections in a hamburger menu are handled with a page that has a PageHeader control to define the header.
Moreover, both controls supports the adaptive layout, which is the new approach introduced in Windows 10 to help developers building a single binary package that can runs on every platform (vice versa, on Windows and Windows Phone 8.1 you needed to create and publish two different packages). Adaptive layout is an approach which is already widely used in the web world and it simply means that the user interface has to properly react to the changes in the window’s size, so that the app can always offer the best user experience, regardless if it’s running on a mobile phone or on a console.
... [See the source and more at Template10: a new template to create Universal Windows apps – The basics]