Making Use of the Windows 8 Metro App Bar

As you start building Windows 8 Metro Apps you will run into the need to allow for additional functions for each Page. While you could create your own control or place buttons where needed, Metro does provide a control for this very purpose known as the App Bar. If you’ve played around with other apps you may have seen this control displayed at the bottom of the screen, often displayed by right clicking. The app bar often looks like the image displayed below:

App Bar
App Bar

To use and insert the buttons shown on the image above you will need to insert the following XAML within the Page tag on the page you wish to use it.

        <AppBar x:Name="BottomAppBar1" Padding="10,0,10,0">
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Edit" Click="Edit_Click"/>
                    <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Save"/>
                    <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Delete"/>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/>

Beginning at the top of the markup, see the Page.BottomAppBar property tag followed by the AppBar control itself.  If you would prefer to display the AppBar at the top you could use the property tag Page.TopAppBar instead.  Next you’ll notice a Grid control, which is used in this case to create two columns each using 50% of the available space.  Within each column is a StackPanel with Horizontal Orientation and appropriate alignment.  The purpose for the StackPanels is really to allow us to display a list of buttons on the left side and buttons on the right with right justification. Within each of the StackPanels are the actual buttons each of which is using a static resource style.  Out of the box, there are quite a few static resources for buttons within the App Bar to make your life easy.  You may have also noticed a click event is set on the Edit Button.  Event handlers for buttons within the App Bar are the same as they would be outside of the AppBar as shown below:

 private void Edit_Click(object sender, RoutedEventArgs e)

By default, the App Bar will be displayed automatically when the user right clicks or swipes up.  If you wish to open the app bar programmatically you can do so by setting the IsOpen property to true.  After interacting with the App Bar, it will hide itself; however, you may want to make the App Bar stay open, which is done with the IsSticky property.


As you can see, making use of the App Bar within your application is not terribly difficult.  Like other controls for Metro Apps, there are a few tricks to learn, but overall the control is quite easy to implement.  Furthermore, you will probably start to notice how prevalent the App Bar is within other Metro apps.  

Related Articles


  • There Offer The Discount Commodities Online With High-Quality 0a

    Posted by Robpjv78 on 03/04/2013 08:03pm

    [p]Now [url=]Jordan 4 Retro[/url] to place that in prospective, she was a student that couldn't pass sports and physical eduction . Besides leather boots, female wearers also [url=]Jordan Retro 23[/url] prefer ankle boots to knee le . If the baby is disposing [url=]Air Jordan Retro 5[/url] of Jordan moves at just over a year, what will they do using more? Your notions move on full throttle . More technology nike air jordan 13 was [url=]air jordan release dates[/url] earned the look, thus it lighter and better uphill circulation . In case your new shoes don't fit or maybe you are not satisfied with your purchase, knowing these policies should be able to help you get started greatly in buying a refund or return . However, Daniel hasn't been an Egyptian; [url=]Jordan 9 Retro[/url] he isn't corresponding with Egyptians; and hubby hasn't been serving under an Egyptian government . Similar admiration is anticipated [url=]Jordan Retro 1[/url] inside the new upcoming science fiction sequel 'Revenge with the Fallen' . These footwear are worn [url=]air jordan retro for sale[/url] well with long skirts and dresses.[/p]

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: December 18, 2014 The Internet of Things (IoT) incorporates physical devices into business processes using predictive analytics. While it relies heavily on existing Internet technologies, it differs by including physical devices, specialized protocols, physical analytics, and a unique partner network. To capture the real business value of IoT, the industry must move beyond customized projects to general patterns and platforms. Check out this webcast and join industry experts as …

  • Today's agile organizations pose operations teams with a tremendous challenge: to deploy new releases to production immediately after development and testing is completed. To ensure that applications are deployed successfully, an automatic and transparent process is required. We refer to this process as Zero Touch Deployment™. This white paper reviews two approaches to Zero Touch Deployment--a script-based solution and a release automation platform. The article discusses how each can solve the key …

Most Popular Programming Stories

More for Developers

RSS Feeds