How to Do Navigation for Application Bar with AppBarUtils in XAML?

Well, basically you have three options:

  1. AppBarItemNavigation, the simplest option
  2. NavigateToPageAction + AppBarItemTrigger
  3. NavigateWithQueryStringAction + AppBarItemTrigger, the most powerful option

Assuming you have an app bar containing one menu item like below:

            <shell:ApplicationBarMenuItem Text="statistic"/>

With AppBarItemNavigation, you can add navigation action to the above menu item as follows:

        Type="MenuItem" Id="statistic"

All you need to do is tell AppBarItemNavigation you want the “statistic” “MenuItem” to navigate to “/StatisticPage.xaml” by setting the Id, Type, and TargetPage property respectively. Simple!

As an alternative, you can use the built-in NavigateToPageAction with the help of AppBarItemTrigger like the below code:

    <AppBarUtils:AppBarItemTrigger Type="MenuItem"

Basically the same functionality, but more code to type. If you work in Expression Blend, then both are fine.

The last option is the most powerful one because it allows you to set query string parameters right inside XAML even through data binding. Here’s what it looks like:

    <AppBarUtils:AppBarItemTrigger Type="MenuItem"
            <AppBarUtils:Parameter Field="hitcount"
                         Value="{Binding HitCount}"/>
            <AppBarUtils:Parameter Field="timecount"
                         Value="{Binding TimeCount}"/>

Intuitively, the NavigateWithQueryStringAction in the above code will build a URI like this: /StatisticPage.xaml?hitcount=9&timecount=13, while the numbers 9 and 13 are from your view model through data binding.

This isn’t possible with the previous two options. If you do want to use either of the previous two options and don’t want hard coded URI in the TargetPage property, you’ll have to build the URI completely in your view model and bind the TargetPage to the related property, which of course results in more helper code in view model.

For app bar button, you can change the value of Type property to Button or simply omit this property.

If what you want is a go-back, you can use either AppBarItemNavigation, and set the value of TargetPage to an empty string or simply omit this property. The built-in NavigateToPageAction doesn’t support go-back. For NavigateWithQueryStringAction, if you leave its TargetPage property empty or simply omit this property, it will do nothing, no navigation, no exception.

For a complete sample code, please visit


One thought on “How to Do Navigation for Application Bar with AppBarUtils in XAML?

  1. […] the navigation components migrated from AppBarUtils, see How to Do Navigation for Application Bar with AppBarUtils in XAML? for more […]

Leave a Reply

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

You are commenting using your 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

%d bloggers like this: