The documentation posted on this page is as much in "preview release" as the actual Extension. I will be updating it over the coming weeks to make it as complete as possible.

Thank you for your patience! - Dmitry Lyalin 3/18/2013

Introduction

What inspired this "Hub App" Project Template

Developers of Windows Store Apps often want to create rich start experienceswhen people first enter their applications, mixing various data items (DataTemplates bound to entities) and interface elements (such as Buttons, Text, Ads, etc) to create a horizontal hub of content. Great examples of this rich start experience can be found in apps such as USA Today, Engadget, The Daily Show Headlines and many others.

This (C# / XAML) Project Template was inspired by such applications and is designed to help accelerate Windows Store App developers who wish to make their apps start experiences work in a similar way. Ready to learn more? keep reading!

Hub App - Design Themes

All of the above mentioned apps share common "design themes" in their start experience including:

• The start page (the first thing the users see when they start the app) will have multiple groups of content, this content spans the screen horizontally (with scrolling of course)
• Each group has a customized container that might include things like buttons to the right or left of the content, Advertisements, etc
• Each group can have its own unique item size (width/height) for the items it displays
• Each group can have its own size of "hero image(s)". "Hero Images" are items that span the width/height of multiple items to create a bigger item (example 2x2)
• Each group can have a customized header, either to make it look very different than the others headers or to in some cases not have one at all
• Groups of items can behind the scenes be different types of items, that while having the same width/height require their own DataTemplate's

Also the Hub Experience should work with both mouse or touch input, as that is good design for a Windows Store Application.

Hub App Template - What's Inside

Once the VSIX is installed a new Project Template will enable you to create a "Hub App" project. (see instructions below)

Once you create the project it will contain:

• Various Custom Controls, TemplateSelectors and other custom classes not found in the default project templates
• Sample data and Default DataTemplates & Styles that allows you to immediately run the app and review the templates capabilities using sample data
  • Sample Data is based on the "Grid App (XAML)" default template, but has been extended to support this demonstration

So getting started is easy, all the supported scenarios are demonstrated using sample data that you will see loaded in the GridView once the app is started, even before you make any changes. Curious on what it will look like with sample data? Below are some screenshots of what you should see during design-time or runtime.

Screenshot #1 - Group of items with customized container to includes buttons on right side

Screenshot #2: Group 3 which contains a "hero item" DataTemplate (2x2)

Screenshot #3 - The last group of the sample data that has a custom container which ads an Advertisement placeholder on the right of the items

Why use this Hub App Template?

Out-of-the-box templates for C# / XAML applications does not make it easy to create a Hub App Experience, the goal of this template is to drastically simplify the processwithout removing the flexibility of the developer to customize the template.

To accomplish these goals I have incorporated the following features:

• All the "magic" that makes this template work is in the project template as source-code, nothing is hidden behind compiled assemblies
• To start you simply go and create a new C# / XAML project using this template and all the basics including tests data is setup for you
  • note: this template is loosely based on the "Grid App (XAML)" default template, you will find the sample data is from that sample but extended to work with my enhanced Collection
• All the Style and DataTemplate selectors used to create Group Item Container Templates, Group Header Templates, Item Templates, etc is implemented using "Convention Over Configuration" principles. This allows you to simply implement your data layer, name your DataTemplate / Styles a certain way and the TemplateSelectors will pick up and apply your changes

I am just scratching the surface here, whenever i show people how the "convention over configuration" aspects work they tend to be very impressed. I will provide more write-up on this later, but do hope you try the template.

(Convention over configuration is inspired by ASP.NET MVC)

Getting Started

Prerequisites

• You should be using Visual Studio 2012 (Express or better) on Windows 8
• You should have the Windows 8 SDK installed (see here)
• You should be familiar with building XAML applications using C# - this is not a tutorial for that

Installation Instructions

Simply download and install the VSIX into your Visual Studio 2012 that has been enabled with the Windows Store app SDK. Once installed a new project template called "HubApp-Beta" will become available in the New Project creation dialog.

Creating your first Hub App Project

Getting started is easy, simple follow these steps once the VSIX is installed:

• Start Visual Studio
• Go to File > New Project
• Use the New Project window top-right search box (see screenshot above) to search for "HubApp"
• Once you see the "HubApp-Beta" Project Template, select it and create the app (rename it and choose the location as you see fit)

Once the app is created you should be able to hit F5 to run the app, see my sample data and explore how it visualizes the various DataTemplates for items, custom container and headers, etc.

Known Issues / Limitations / Disclaimers

• This Project Template has had very limited testing, please use at your own risk. The good part is that all the source code is available within the project template, so if you discover an issue you may attempt to fix it yourself (and i would love to hear about it in the comments section here)
• Only a C# / XAML Project Template is supported at this time (I do not plan to support VB.NET or JavaScript/HTML due to time constraints)
• There are no "Item Templates", i hope to make this available in the future if time allows
• While there will be Extension updates that should upgrade the Extension in Visual Studio, unfortunately there wont be a method to do automatic "Project Upgrades". Once you create a Hub App youll have to manually implement any changes I release as part of the Extension updates (technical limitation)
• In my testing the design-time experience seems to work in Visual Studio, but i have not used it extensively nor tested it in Blend (sorry)
• The Project Template does not (Yet) properly show up under the correct location within the Project Templates tree. I hope to correct this in future builds
• I have not done any "specific" performance testing on this template, nor is it designed to load "tons" of data. The Hub App experience should be limited to what a typically personal can consume, a summary of data to get them interacting with your app. (More on this in later updates to this documentation)

There are likely more things to be listed here, i will keep updated the instructions as things come to me.

Technical Details

In the future this section will be populated with additional info on how the project works - Dmitry Lyalin 3.18.2013.

Release History

Revision 3/18/2013 - version .01 (preview release, aka beta)

• First release of the Project Template to the public as a preview release

Credits

• GridViewVariableWrapPanel - Courtesy of sample posted by Jerry Nixon (blog), which enabled me to enable "hero items" in the GridView
• GridViewItem Workaround - Posted info in the Microsoft’s connect site (connect.microsoft.com) on a bug workaround, this enabled me to ensure my GridView Items are properly stretched horizontal/vertically to maximum available size
• GridViewItemClickCommand - Courtesy of a sample posted by Geoff Webber-Cross (Blog), which enables a GridView Item to be found using Commands to a handler
• StringFormatConverter - Courtesy of sample posted by Diederik Krol’s (Blog), which enabled me to implement a very clever approach to string formatting

Also big thank you to both Jerry Nixon &Robert Green (both in Microsoft DPE) for encouraging me getting this sample posted and all the others who have been very supportive, provided feedback, advice, etc. You know who you are! 

Thank you for trying my extension, I really hope to hear back from you in the reviews and Q&A section, or contact me ontwitter.

Disclaimer: Disclaimer: This extension was created by Dmitry Lyalin in his spare time as a community contribution, in the hopes to make it easier for others to build great Windows Store Apps. This extension is in no way endorsed or supported by Microsoft, please use at your own risk.