Windows 8 Metro Application AppBar trick

I’ve been toying around with Metro Applications and have found that there isn’t much information, at least not for .NET XAML applications nor here nor in the sample application which is located here

There we have two methods, one we declare an application bar for a page – first thought here is that if it’s an application bar we should be able to declare it globally – and from then, override it on each page…

Well, we can’t do that so what this sample proposes is to do it on every page or to create a container Page control that its function is only to contain the “AppBar” and a Frame that is where we load the different “real” pages. Note that for overriding this we have to code and add buttons programatically to each of the AppBars. 

I hope you will comply that having this this way is a bit ugly, given the beauty of data templating and styling that we do have at this day and time. 

So I came out with a cleaner solution that still requires some coding but is nicer :). 

First we do add an AppBar to a page like:


   <AppBar HorizontalContentAlignment=”Stretch” Height=”88″ VerticalContentAlignment=”Stretch”>






               <StackPanel Grid.Column=”1″ Orientation=”Horizontal”/>

               <StackPanel Orientation=”Horizontal” >

               <Button Click=”GoHome” HorizontalAlignment=”Left” IsEnabled=”{Binding Frame.CanGoBack, ElementName=pageRoot}” Style=”{StaticResource HomeAppBarButtonStyle}”/>





Then, we add a Resource Dictionary and, from the AppBar we select “Edit Additional Templates –> Edit Generated Content –> Create Empty..” for creating a global ContentTemplate for our “global” AppBar.


Then we create it on our just created ResourceDictionary..


After this we will only need to copy the resulting AppBar code on all of our pages:


    <AppBar ContentTemplate=”{StaticResource DataTemplate_AppBarGlobal}” />


And, if we want to change the default/global AppBar, we do only need to edit one file.  And this without architecting our application nor complicating it more than necessary.

Hope this helps.

7 thoughts on “Windows 8 Metro Application AppBar trick

  1. Pingback:
  2. There is another way also. You can always declare a base page that all views inherit from, and on the OnNavigatedTo event, create dynamically an appbar, associate it a datatemplate declared in the resources, and add the relevant buttons for that view in particular. In this way, no view needs to declare the appbar in the markup ;).


    1. Sure, that is what is being done on the MSDN examples and I really didn’t like that way as is over-engineering (in my humble opinion) something and you have to inherit a control in order to do that. I find the other approach simpler but, as mentioned, my best shot is that on the final release we might be able to declare a REAL Application Bar (Application wide but that can be overriden by a local App bar)


  3. The following code gives a Warning regarding a redefine of a inheritance property when I compile:

    Is there a good way to declare AppBar in xaml and referecence it in C# without this warning?


  4. Hi,
    Thanks for the post. It helped me creating a global appbar. I have a button(Image) and a Tapped event on it. When I use the DataTemplate like you mentioned above on a regular Page, it works fine.

    But I am using a BasePage and I set the BottomBar for it in code-behind. The appbar appears fine now on all my pages(derived from BasePage). The issues is the Tapped event won’t fire now.
    Any idea how to handle this scenario?



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 )

Connecting to %s