CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
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
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.
