Windows 8.1: Using new AppBar and CommandBar controls

Windows 8.1 introduced new AppBar and CommandBar controls for Windows Store apps, both are used to display additional sets of commands when user swipes up from the bottom-edge of the screen or swipes down from the top.

Difference between AppBar and CommandBar?

An AppBar control can host any type of Button, Image or TextBlock controls and supports Grid and StackPanel for layout

   1: <Page.TopAppBar>

   2:     <AppBar>

   3:         <Grid Background="#FFC3C3C3">

   4:             <Grid.ColumnDefinitions>

   5:                 <ColumnDefinition/>

   6:                 <ColumnDefinition/>

   7:             </Grid.ColumnDefinitions>

   8:             <StackPanel Orientation="Horizontal">

   9:                 <Image Width="100" Source="Assets/SmallLogo.png"/>

  10:                 <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

  11:                 <TextBlock TextWrapping="Wrap" Text="TextBlock"/>

  12:             </StackPanel>

  13:             <StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">


  15:             </StackPanel>

  16:         </Grid>

  17:     </AppBar>

  18: </Page.TopAppBar>

A CommandBar can only add new types of controls that implement ICommandBarElement interface, attempts to add any other control results in following compiler error

Screenshot (10)

New Button Controls in Windows 8.1

Windows 8.1 preview introduced three new controls that can be used in the CommandBar those are AppBarButton, AppBarToggleButton, and AppBarSeparator

A CommandBar also uses Primary and Secondary Commands collections. Primary commands by default are shown on the left side of the command bar.

In the following code I have used the AppBarButton and AppBarToggleButton controls

   1: <Page.BottomAppBar>

   2:     <CommandBar>

   3:         <CommandBar.SecondaryCommands>

   4:             <AppBarButton Label="AppBarButton" VerticalAlignment="Top" Icon="Emoji2"/>

   5:             <AppBarToggleButton Label="AppBarToggleButton" VerticalAlignment="Top" Icon="Favorite"/>

   6:             <AppBarSeparator/>

   7:         </CommandBar.SecondaryCommands>

   8:         <AppBarButton Label="AppBarButton" Icon="FourBars"/>

   9:         <AppBarToggleButton Label="AppBarToggleButton" Icon="HangUp"/>

  10:         <AppBarSeparator/>

  11:     </CommandBar>

  12: </Page.BottomAppBar>

Controls Resizing

Screenshot (9)

A CommandBar uses the compact mode for controls hosted inside when app is resized to a smaller screen, in the above screenshot notice the TopBar is using the default Label and Icon style for buttons but the BottomAppBar that uses a CommandBar has automatically resized these controls to use the new IsCompact property of the control which removes Label and padding to fit in the available space.