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.
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.
- ContainerStyle : Defines the look and feel of the container element of the category \ group
- HeaderTemplate : Represents the Category Header Visual
- 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.
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.
Harikrishna Menon Ajith Kumar, Blend PM