Windows 8 App Bars

In my previous posting I said that I’d be distilling parts of my presentations into blog posts.  This post continues that idea, focusing on the App Bar. 

If we are going to place Content Before Chrome and remove as much of the navigation from the content as possible, we need a way to make the chrome (e.g., navigation and command buttons) available to the user on demand.  That is the role of the appbar.

You retrieve the appbar by swiping up from the bottom or down from the top of the screen. The appbar can appear on the bottom, the top or both.   Internet Explorer is a good example of a program that uses both, with command and navigation buttons on the bottom, and tabs on the top,

Creating appbars and managing them in your application is fairly straight forward.  To begin, open Visual Studio and click on Help –> Samples.  Navigate to the C# AppBar sample, or open it from the complete samples that you can download from the Windows Developer Center (http://Librt.me/Win8DevCenter) – you want XAML Appbar Control Sample

Open MainPage.xaml and you’ll find the complete listing for the AppBar,

   1: <Page.BottomAppBar>

   2:     <AppBar x:Name="BottomAppBar1" Padding="10,0,10,0" 

   3:             AutomationProperties.Name="Bottom App Bar">

   4:         <Grid>

   5:             <Grid.ColumnDefinitions>

   6:                 <ColumnDefinition Width="50*"/>

   7:                 <ColumnDefinition Width="50*"/>

   8:             </Grid.ColumnDefinitions>

   9:             <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">

  10:                 <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Edit"/>

  11:                 <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Save"/>

  12:                 <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Delete"/>

  13:             </StackPanel>

  14:             <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">

  15:                 <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refresh"/>

  16:                 <Button x:Name="Previous" Style="{StaticResource PreviousAppBarButtonStyle}" Tag="Previous"/>

  17:                 <Button x:Name="Next" Style="{StaticResource NextAppBarButtonStyle}" Tag="Next"/>

  18:                 <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/>

  19:             </StackPanel>

  20:         </Grid>

  21:     </AppBar>

  22: </Page.BottomAppBar>

Taking this apart, we find the declaration for the AppBar followed by the definition of a gird with two columns.  Each column consists of a stack panel with buttons (the buttons aligned horizontally). 

That is really all there is to creating the AppBar. 

In the second scenario demonstrated in the sample, we toggle an IsSticky check box to set whether the app bar is sticky or not. The default is not; and the app bar can be lightly dismissed by touching (or clicking) anywhere on the page.  If IsSticky is set, then to dismiss the appbar you have to make the same gesture you made to bring it out (e.g., swiping up from the bottom). 

The IsSticky property in the example is set programmatically in the file Scenario2.xaml.cs in which an event handler is created for the check box,

   1: public Scenario2()

   2: {

   3: this.InitializeComponent();

   4:     IsSticky.Click += IsSticky_Click;

   5: }

and that even handler retrieves the AppBar and sets the IsSticky property to whether or not the checkbox is checked,

   1: private void IsSticky_Click(object sender, RoutedEventArgs e)

   2: {

   3:     CheckBox cb = sender as CheckBox;

   4:     AppBar myAppBar = rootPage.FindName("BottomAppBar1") as AppBar;

   5: if (myAppBar != null)

   6:     {

   7:         myAppBar.IsSticky = (bool)cb.IsChecked;

   8:     }

   9: }

Note that cb.IsChecked is cast from a nullable boolean to a bool

As you can see, declaring an AppBar is straightforward, and working with the AppBar programmatically is not very difficult.

More from the European / UK tour in upcoming blog posts