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.

    <Page.BottomAppBar>
        <AppBar x:Name="BottomAppBar1" Padding="10,0,10,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <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>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

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.

Conclusion

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

Comments

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

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

    [p]Now [url=http://www.airjrodan2013.com/air-jordan-4-retro.html]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=http://www.2013sportsshoes.com/air-jordan-retro-23.html]Jordan Retro 23[/url] prefer ankle boots to knee le . If the baby is disposing [url=http://www.2013sportsshoes.com/air-jordan-retro-5.html]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=http://www.2013sportsshoes.com]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=http://www.airjrodan2013.com/air-jordan-9-retro.html]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=http://www.2013sportsshoes.com/air-jordan-retro-1.html]Jordan Retro 1[/url] inside the new upcoming science fiction sequel 'Revenge with the Fallen' . These footwear are worn [url=http://www.2013sportsshoes.com]air jordan retro for sale[/url] well with long skirts and dresses.[/p]

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

Top White Papers and Webcasts

  • Live Event Date: September 16, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you starting an on-premise-to-cloud data migration project? Have you thought about how much space you might need for your online platform or how to handle data that might be related to users who no longer exist? If these questions or any other concerns have been plaguing you about your migration project, check out this eSeminar. Join our speakers Betsy Bilhorn, VP, Product Management at Scribe, Mike Virnig, PowerSucess Manager and Michele …

  • The first phase of API management was about realizing the business value of APIs. This next wave of API management enables the hyper-connected enterprise to drive and scale their businesses as API models become more complex and sophisticated. Today, real world product launches begin with an API program and strategy in mind. This API-first approach to development will only continue to increase, driven by an increasingly interconnected web of devices, organizations, and people. To support this rapid growth, …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds