Adding an application bar to a XAML/C# application

So the next version of Windows adds the new spiffy Windows Appbar but how do you add it to your XAML app? It’s easier than you might think… like 15 minutes to do the first time.

For this short tutorial, I’m going to assume that you have a basic knowledge of XAML and C#.  Let’s dig in.

What’s the Application Bar?

The application bar is a show/hide control that is very reminiscent of the Menu bar and Ribbon in Windows 7.

You can see examples of the app bar in apps that ship with the Windows 8 Developer Preview.

The app bar is a control that lets you assign visual buttons to actions in your application.  In the screenshot on stocks, there are three items: Add Stock, Remove Stock, Pin Stock.  As you can imagine, this is a very convenient means to setup pretty buttons in your Windows 8 apps.  Let’s dive into the code!

Add the XAML to your app

I’ll assume that you have used one of the XAML/C# templates and want to add the control to your Mainpage.  Open up the main page and add the following XAML to the top of the page above your LayoutRoot (e.g. before the <grid> element):

                <StackPanel Orientation="Vertical" Margin="0,14,0,5" Grid.Column="1">
                    <Button Style="{StaticResource AppBarButtonStyle}" FontFamily="Segoe UI Symbol" FontSize="18.667"
                             Padding="8,8,0,0" Margin="0,0,0,10" Content="&amp;#x1F3AE;" Click="NewGameClick" />
                    <TextBlock Text="New Game" />
                </StackPanel>
<UserControl.Resources>
<!-- AppBar Button Style -->
<Style x:Key="AppBarButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="40" />
<Setter Property="Width" Value="40" />
<Setter Property="Height" Value="40" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="AppButton">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1"
                                                              Storyboard.TargetProperty="(UIElement.Opacity)"
                                                              Storyboard.TargetName="MouseOverEllipse" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1"
                                                              Storyboard.TargetProperty="(UIElement.Opacity)"
                                                              Storyboard.TargetName="PressedEllipse" />
                                            <ColorAnimation Duration="0" To="Black"
                                                             Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
                                                             Storyboard.TargetName="contentPresenter" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.35"
                                                              Storyboard.TargetProperty="(UIElement.Opacity)"
                                                              Storyboard.TargetName="AppButton" />
                                            <ColorAnimation Duration="0" To="#7F8D8D8D"
                                                             Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
                                                             Storyboard.TargetName="contentPresenter" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Ellipse x:Name="PressedEllipse" Fill="White" Opacity="0" Width="40" Height="40"/>
                            <Ellipse x:Name="MouseOverEllipse" Fill="#7F8D8D8D" Opacity="0" Width="40" Height="40"/>
                            <TextBlock x:Name="contentPresenter"
                                        FontWeight="{TemplateBinding FontWeight}"
                                        FontFamily="{TemplateBinding FontFamily}"
                                        FontSize="{TemplateBinding FontSize}"
                                        Text="{TemplateBinding Content}"
                                        Margin="{TemplateBinding Padding}"/>
                            <Path Data="F1M20.2168,40C31.2608,40,40.2168,31.045,40.2168,20C40.2168,8.958,31.2608,0,20.2168,0C9.1708,0,0.216799999999999,
                                  8.958,0.216799999999999,20C0.216799999999999,31.045,9.1708,40,20.2168,40 M20.2168,37.161C10.7548,37.161,3.0578,29.462,
                                  3.0578,20C3.0578,10.538,10.7548,2.839,20.2168,2.839C29.6788,2.839,37.3758,10.538,37.3758,20C37.3758,29.462,29.6788,37.161,20.2168,37.161"
                                   Fill="White" Height="40" Canvas.Left="0" Stretch="UniformToFill" Canvas.Top="0" Width="40"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>


Next, add the following XAML to the LayoutRoot element (e.g. before the element):

<ApplicationBar x:Name="AppBar" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Bottom" IsPersistent="False" IsOpen="True"
                          Height="Auto" DismissMode="EdgeSwipe" HorizontalAlignment="Stretch" Background="#548D8D8D">
            <ApplicationBar.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="FontFamily" Value="SegoeUI" />
                    <Setter Property="FontSize" Value="12" />
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                </Style>
            </ApplicationBar.Resources>
            <Grid Margin="15,0,15,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <!-- Left side navigation buttons -->
                <!-- Right side command buttons -->
            </Grid>
        </ApplicationBar>

This will add the XAML for the App bar control and will set up a grid within the XAML for hosting the buttons.

Next, add a button to the XAML.  The following code will add a “game controller” like button to the App Bar:

                <StackPanel Orientation="Vertical" Margin="0,14,0,5" Grid.Column="1">
                    <Button Style="{StaticResource AppBarButtonStyle}" FontFamily="Segoe UI Symbol" FontSize="18.667"
                             Padding="8,8,0,0" Margin="0,0,0,10" Content="&#x1F3AE;" Click="NewGameClick" />
                    <TextBlock Text="New Game" />
                </StackPanel>

Build / run your app and … woot! You should now have an App Bar. The following screenshot shows the App Bar in my “lights out” project.

I’m running at a pretty high resolution, but the little Gamepad icon at the left is new!

Linking the App Bar to code

OK, so you now have an app bar in your XAML, how do you make the button do something?  Easy!  Add a click handler 🙂  Update the XAML for the button to have a Click=”” and then you can press enter to add the event handler automatically (yeah, Visual Studio).  The following screenshot shows the magic in action:

Right clicking on the autocreated method will let you see the code.  Now you’re ready to start hacking 🙂

Conclusions

App bars are easy.  Use them.  Love them.

Additional Resources

A great list of Unicode characters that you can insert into the Content=”&#x1F3AE;” section of your buttons:

The MSDN documentation for adding App Bars: