App Bars in Windows 8

The app bar is analogous to a toolbar in classic Windows interfaces, or the ribbon in more recent offering. It’s a container for buttons that trigger commands.

App Bars are available on demand as they are not in the primary scenario of your application building. App Bars can be drawn when you press Winkey + Z or right click the mouse.

You can place app bars at top of the page or at the bottom of the page. A page can contain both top and bottom app bars as well.

<Page.TopAppBar>

<AppBar>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

<Button Style="{StaticResource AddAppBarButtonStyle}" />

<Button Style="{StaticResource DeleteAppBarButtonStyle}" />

<Button Style="{StaticResource SaveAppBarButtonStyle}" />

</StackPanel>

</AppBar>

</Page.TopAppBar>

The above code puts the app bar on top of the page.

<Page.BottomAppBar>

<AppBar>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

<Button Style="{StaticResource AddAppBarButtonStyle}" />

<Button Style="{StaticResource DeleteAppBarButtonStyle}" />

<Button Style="{StaticResource SaveAppBarButtonStyle}" />

</StackPanel>

</AppBar>

</Page.BottomAppBar>

The above code places the app bar at the bottom of the page.

The content of the page lies between the top and the bottom app bars.

<Page.TopAppBar>

<AppBar>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

<Button Style="{StaticResource AddAppBarButtonStyle}" />

<Button Style="{StaticResource DeleteAppBarButtonStyle}" />

<Button Style="{StaticResource SaveAppBarButtonStyle}" />

</StackPanel>

</AppBar>

</Page.TopAppBar>



　
  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">




  </Grid>

<Page.BottomAppBar>

<AppBar>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

<Button Style="{StaticResource AddAppBarButtonStyle}" />

<Button Style="{StaticResource DeleteAppBarButtonStyle}" />

<Button Style="{StaticResource SaveAppBarButtonStyle}" />

</StackPanel>

</AppBar>

</Page.BottomAppBar>

You can also play with the background/foreground colors of the app bar. By default the background color of app bar is black and the foreground color is white.

By default the border for the app bar is not visible to can add the border brush attribute and show the border as well.

<AppBar Name="topAppBar" Background="Aqua" Foreground="Black" BorderBrush="Red">

I can put my UI controls on to app bar , the UI control can be a simple button , a normal checkbox , a radio button etc.

Many people often debate on Microsoft's decision to introduce App Bars. According to msdn:

The reason the contextual commands that come and go are on the left is ergonomic. We found in studies that most users (even lefties!) operate touch devices with their right hand. If selection-based commands were to appear on the right, then as you raise your right arm to select an item you would cover the new commands that just appeared! Similarly, putting commands that are always present on the right allows you to use your right hand to access them, which is ideal because most users interact with touch devices with the right hand. So putting commands that come and go on the left, and commands that are always there for a given screen on the right, makes it more efficient for users to get to with touch.

My view : App Bars are great create UI element  , they help you when you need.