How to create a header menu navigation in a Windows 8 Metro-style app

This is a cross post from Karl’s personal blog over at fincooper.

Currently (as of Release Preview) there is no out-of-the-box solution or SDK-provided control for creating the header menu in a Windows 8 Metro app. In this post I’ll demonstrate a quick and easy way to build one.

Header menu

Header menu is an essential part of all Metro-style apps that use hierarchical navigation pattern, e.g. apps that separate their content into Hub, Section and Details pages. Most of the apps use hierarchical navigation pattern.

Header menu is defined in the  official design guidelines :

The header menu contains a link to each Section page (level 2) as well as a link back to the Hub (level 1), enabling users to move around the app quickly. The menu appears at each level and on every page of the app, making it an efficient and reliable way for users to get where they want to go.

Read more about navigation in a Metro-styled app in the official design guidelines.

Callisto control suite

I think that the best way to implement the header menu is to leverage Flyout control, available in Callisto control suite. Callisto is a community project led by Tim Heuer. The suire contains awesome controls for Metro style apps written in XAML, including the Menu and Flyout controls which we’ll use to create the header menu.

Download and install Callisto from here. After you’re finished, you can start playing around with Callisto, and implement the header menu using my sample code below.

Creating the header menu

In Solution Explorer, right-click “References” and then Add Referenceto add a reference to Callisto to the project. Callisto can be found in Windows –> Extensions.

You also have to add the following using statement:

1
using Callisto.Controls;

In XAML, associate an event handler to your page header text:

1
2
3
4
5
6
7
8
9
10
11
</pre>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}" Tapped="headerMenuClicked" Grid.Column="1"/>
</Grid>
<pre>

In code-behing, implement the event handler:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
private void headerMenuClicked(object sender, RoutedEventArgs e)
{
// Create a menu containing two items
var menu = new Menu();
var item1 = new MenuItem { Text = "Group" };
item1.Tapped += groupNavClicked;
menu.Items.Add(item1);
var item2 = new MenuItem { Text = "Home" };
item2.Tapped += homeNavClicked;
menu.Items.Add(item2);
// Show the menu in a flyout anchored to the header title
var flyout = new Flyout();
flyout.Placement = PlacementMode.Bottom;
flyout.HorizontalAlignment = HorizontalAlignment.Left;
flyout.HorizontalContentAlignment = HorizontalAlignment.Left;
flyout.PlacementTarget = pageTitle;
flyout.Content = menu;
flyout.IsOpen = true;
}

That’s it! Now you just have to add to implement homeNavClicked() and groupNavClicked() according to your datamodel. As an example, here they are implemented against the Grid App template.

homeNavClicked():

1
2
3
4
private void homeNavClicked(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(GroupedItemsPage), "AllGroups");
}

groupNavClicked():

1
2
3
4
5
6
7
private void groupNavClicked(object sender, RoutedEventArgs e)
{
var selectedItem = (SampleDataItem)this.flipView.SelectedItem;
var group = selectedItem.Group;
this.Frame.Navigate(typeof(GroupDetailPage), ((SampleDataGroup)group).UniqueId);
}

Now we’re all set. Run the project, and admire a fully-working header navigation. Since we’re using the Callisto Flyout control, our menu is even dismissive!

.

Download the full sample code HERE.

About the Author

Karl OtsKarl Ots (@fincooper)
Karl is enthusiastic about great user experiences and smart mobile devices. He is working on software research and development. Karl currently studies computer sciences and human-computer interaction at the University of Tampere.

Advertisements

About arcticmsp

The Finnish Microsoft Student Partners are a group of enthusiastic students, who are interested in technology and all things new, techy and cool!
This entry was posted in Design, Development, Windows 8. Bookmark the permalink.

2 Responses to How to create a header menu navigation in a Windows 8 Metro-style app

  1. Zahed says:

    But the small Arrow next to Header Text is missing and no way users will come to know you need to tap on the header to bring down the menu :(

  2. You’re absolutely right. In order to comply with the UX guidelines the small arrows should be added as a visual cue to the user. However, adding the arrow is relatively trivial compared to the rest of the sample here. The sample should be treated as a reference, not as a complete or perfect solution.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s