A number of Metro style apps use a hierarchical system of navigation. This is an intuitive and common pattern used by app developers.  In this video tutorial, I’ll show you how to style and customize GroupStyles using Blend and VS.

Get information about navigation design for Metro style apps and other design guidance in the Design Center on the Windows Developer center.

Apps that have a large amount of content organized into categories or groups benefit from using the hierarchical navigation pattern. The entry point for the user in this pattern is the hub page. The content here is displayed in a rich horizontally panning view with different categories of content

In XAML the GridView and ListView controls are primarily used to display data in the Hub page owing to their rich set of built in features and behaviors that make them a perfect fit for this scenario. These controls contain GroupStyles which define the look and feel of each category\group in these controls.

GroupStyle contains three designable elements.

1. ContainerStyle : Defines the look and feel of the container element of the category \ group
2. HeaderTemplate : Represents the Category Header Visual
3. Panel : Defines the layout of items in the category or group

Blend and the VS XAML designer now enable you to create and edit all designable elements of a GroupStyle as part of our template and style editing features.

Default GroupStyle in Grid Application Template

After Editing GroupStyle

Video Demo:  Create and Edit GroupStyles to implement Hierarchical Navigation in Metro style Apps

Check out the video below to see how to work with GroupStyles in the XAML Designer in Blend and VS.

Tip: The Edit GroupStyle command only allows you to edit the top-most element in the GroupStyle collection. If you have multiple GroupStyles defined, you can use the Blend collection editor to move the desired style to the top of the collection and then use the Edit GroupStyle command.

More Resources

Navigation design for Metro style apps in the Widows Dev Center goes in to more detail on the Metro Style Navigation patterns

Official Windows SDK XAML GridView grouping and SemanticZoom sample

Let us know if you have any feedback.

Thanks,

Harikrishna Menon Ajith Kumar, Blend PM