Creating A Sticky AppBar in Win8 –

In talking with other developers, there seems to be a growing fear that creating an AppBar for Windows 8 is somehow difficult or complex. Nothing could be further from true; creating an AppBar is quite straight forward.

[Click on the image to see full size]

To illustrate this, I’ve created an application that creates a simple app bar and adds a ToggleSwitch to turn on and off the IsSticky attribute.  When IsSticky is off (the default) you can dismiss the AppBar by clicking anywhere in the application off the AppBar.  When IsSticky is set to true, however, you must make the same gesture you made to get the AppBar to appear (swiping from top down or bottom up) to make it disappear.

The first step is to declare the AppBar.  I want an AppBar at the bottom of my page, so I declare a Page.BottomAppBar within which I declare and name myAppBar.  Within the AppBar itself I add a grid and give it two equal columns.  The left column will hold application specific command buttons, the right will hold more generic command buttons.

 <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}"
                      Click="AppBarButtonClick"
                      Tag="Edit" />
                  <Button
                      x:Name="Save"
                      Click="AppBarButtonClick"
                      Style="{StaticResource SaveAppBarButtonStyle}"
                      Tag="Save" />
                  <Button
                      x:Name="Remove"
                      Click="AppBarButtonClick"
                      Style="{StaticResource RemoveAppBarButtonStyle}"
                      Tag="Delete" />
              </StackPanel>
              <StackPanel
                x:Name="RightPanel"
                Orientation="Horizontal"
                Grid.Column="1"
                HorizontalAlignment="Right">
                <Button
                   x:Name="Refresh"
                   Click="AppBarButtonClick"
                   Style="{StaticResource RefreshAppBarButtonStyle}"
                   Tag="Refresh" />
                <Button
                   x:Name="Help"
                   Click="AppBarButtonClick"
                   Style="{StaticResource HelpAppBarButtonStyle}"
                   Tag="Help" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

The key things to note are that each button has a Click event (all pointing to the same event handler in this case), and a style. The style definitions are found in the common folder in the StandardStyles.xaml file.  These define the glyphs for the buttons, though of course you are free to create your own custom styles/glyphs. 

I’ve added a Tag to each Button so that when the click event is fired I can determine which text I want to display.  Below the AppBar are the prompt, the ToggleSwitch and a TextBlock that I’ll use to display messages to the user,

<Grid
  Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBlock
                Text="Slide up for the app bar"
                FontSize="50" />
            <ToggleSwitch
                Name="xToggleSwitch1"
                Header="Sticky?"
                OnContent="Yup"
                OffContent="Nope"
                Toggled="ToggleSwitch_Toggled_1" />
            <TextBlock
                Name="xMessage"
                FontSize="40" />
        </StackPanel>
    </Grid>

The code behind is very simple, we need handle only the click event from the buttons and the toggling of the ToggleSwitch,

private void ToggleSwitch_Toggled_1( 
      object sender, RoutedEventArgs e )
{
        BottomAppBar1.IsSticky = xToggleSwitch1.IsOn; 
}


private void AppBarButtonClick( object sender, RoutedEventArgs e )
{
    Button b = e.OriginalSource as Button;
    var t = b.Tag;
    string msg = t.ToString();

    xMessage.Text = String.Format("You clicked {0} !", msg);

}

As is often the case, once you’ve seen an AppBar created it becomes clear that it isn’t difficult, and the hard work is, as always in the logic of the button handlers, not the presentation code.