Template 10 For UWP

Template 10 is a set of Visual Studio UWP project templates. The items delivered in Template 10 are things likes navigation, suspension, and even a Hamburger control.

Universal Windows Platform (UWP) was introduced in Windows 10, which gives a common app platform on every device having Windows 10 as their operating system. If any app consumes core APIs, it can run on any Windows 10 device, be it a desktop PC, Xbox, Mixed-reality headset, and so on.

UWP was first introduced in Windows Server 2012 and Windows 8. It allows the developers to create apps that will potentially run on multiple types of devices. But UWP apps do not run on earlier Windows versions because UWP is kind of a sandbox and not a part of .NET Framework. It is designed to run on various device types powered by Windows 10; pretty much everything that is a Microsoft device. UWP is a completely new application platform which was launched as an alternative to the classic Win32 application platform (used by earlier versions of Windows).

For WPF, there are various approaches available for complex applications, such as Prism & MVVMLight. The blank example provided by Visual Studio is amazingly easy and it’s the right start line for each application. But when we need to work on a complicated project, we need to handle advanced situations (like using the MVVM pattern or managing the state of the page). To make it easier for the developers for UWP development, a Microsoft team, lead by Jerry Nixon (a Technical Evangelist), has begun to work on a modern example known as Template 10. It’s an open source project available on GitHub at https://github.com/Windows-XAML/Template10.

Template 10 is a kit of Visual Studio project templates which sling-shots the developers' productivity by getting ~80% of the boilerplate stuff delivered in the template - things like navigation, suspension, and even a Hamburger control. Template 10 is designed for Window XAML apps written in C#.

The history of Template 10 starts with Prism. When Prism was not upgraded for UWP, Template 10 came into existence There is nothing Prism can fulfill that Template 10 cannot. And, Template 10 has a very large community for support and far more documentation. You can find the Prism documentation on MSDN.

Some of the conventions for Template 10

  • Put Views (XAML files) in a Views folder (and ns)
  • Only have one View-Model for one View
  • Put View-Models in a /ViewModels folder (and ns)
  • Use OnNavigatedTo in view-models, not pages
  • Put models in a /Models folder (and ns)
  • Often use the façade pattern with our models
  • Navigate using a NavigationService
  • Communicate with a Messenger
  • Implementation of Dependency Injection

What's in Template 10?

  • There are controls
  • There are behaviors
  • There are services
  • There are converters
  • There are MVVM classes (BindableBase, DelegateCommand, and ViewModelBase)
  • There are utility classes
  • There are project templates (Blank, Minimal, Hamburger)
  • There is a NuGet package

Now, have a quick start to install and run the first example of Template 10

Step 1
 
Open Visual Studio 2017.
 
Step 2
 
Go for Extensions and Updates in the Tools menu.
 
Template 10 for UWP 

Step 3

Look for "Template 10 Template Pack".
 
Template 10 for UWP

 Step 4

Close all the instances of Visual Studio for installation of this pack.
 
Template 10 for UWP
 
Step 5
 
Make sure the installation gets completed.
 
Template 10 for UWP
 
Step 6
 
Create a new project and select Template 10 in the left side Project templates.
 
Template 10 for UWP
 
Step 7
 
Select the Hamburger Menu template.
 
Template 10 for UWP 
 
Step 7
 
Build and run the application. 
 
Template 10 for UWP 
 
Step 8
 
Now, resize the application window. You may see the menu adjusted depending on the size of the window.
 
Template 10 for UWP
 
Template 10 for UWP 

Step 9

For page navigation, put some value in the "Parameter to pass" textbox. 
 
Template 10 for UWP 
 
Now, click the "Submit" button. 
 
Template 10 for UWP 
 
Step 10
 
The SecondaryCommands of PageHeader look like this.
 
Template 10 for UWP 
 
Step 11
 
The Settings page looks like this.
 
Template 10 for UWP
 
Step 12
 
App.xaml.cs looks like this.
 
Template 10 for UWP 

Bootstrapper is responsible for the core capabilities of Template 10. It derives from the application and is implemented in your app in the App.xaml/App.xaml.cs files.

Its responsibilities include -

  • Creating the navigation service
  • Handling an extended splash screen
  • Creating the root frame
  • Aggregating activation paths
  • Automating suspension management
Step 13
 
All View-Models in Template 10 should inherit ViewModelBaseclass to gain maximum benefit of the library. This class provides an implementation of INavigable which enables the navigation service, and also inherits BindableBase. 
 
Template 10 for UWP 
 
In Template 10, it is not a requirement to use MVVM and Template 10 does not intend to displace any other MVVM framework. That said, if you are designing your app to use this design pattern, Template 10 provides several features to make this easier.
  • DelegateCommand
  • ViewModelBase
  • MVVM Frameworks
Step 14
 
Custom.xaml defines the styles for your application.
 
Template 10 for UWP 

This article covered all about the installation and details of the basic features of Template 10 for UPW Platform. In my next article, I will try to give more details of the stuff delivered in Template 10. 

Please leave your valuable feedback in the comment section.

Thanks for reading!!!