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 are no comments yet. Be the first to comment!

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

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date