Working with the CommandBar in Windows 8.1

Introduction

During Build 2013, the annual Microsoft conference introduced Windows developers to over 5000 new APIs, which would arrive in the form of Windows 8.1.

One of the new features being introduced in Windows 8.1 is the ability to create a properly designed app bars using the AppBar controls. We learned in an earlier article about AppBar controls. Microsoft is making the lives of Windows application developers even easier by further simplifying the creation of app bars with the CommandBar control.

The CommandBar control allows Windows developers to create property designed app bars by providing the automatic command layouts and automatic resizing upon application resize.

When to use the CommandBar Control

CommandBar control is intended to be used when the app bar for the application contains only an AppBarButton, AppBarToggleButton and AppBarSeparator controls.  AppBar control can be used for scenarios where more complex content such as images, progress bars or text blocks are needed.

CommandBar supports the notion of primary commands and secondary commands, with the primary commands laid out on the right and the secondary commands laid out on the left of the control.

CommandBar Basics

  • Items added to a CommandBar control are by default added to the PrimaryCommands collection.
  • PrimaryCommands are shown on the right side and SecondaryCommands are shown on the left side.
  • CommandBar supports an IsCompact mode, which is activated when its constituent AppBar button controls have their IsCompact property set to true.

Hands On

Let us create a simple Windows Store application.

Create a new Windows Store project in Visual Studio 2013 titled  Windows8.1CommandBarDemo.

New Project
New Project

Open MainPage.xaml and navigate to the Page properties.

Search for BottomAppBar.

BottomAppBar
BottomAppBar

Click on the “New” button. It will prompt a dialog.

Select Object
Select Object

Select CommandBar and click OK.

The codebehind for MainPage.xaml will be changed as below.

<Page
    x:Class="Windows8._1CommandBarDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows8._1CommandBarDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <CommandBar/>
 
    </Page.BottomAppBar>
 
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        
 
    </Grid>
</Page>

Change the CommandBar element as below.

<Page.BottomAppBar>
        <CommandBar>
            
        </CommandBar>
 
    </Page.BottomAppBar>

Note: Due to bugs in the beta version of Visual Studio 2013, the designer view might occasionally throw exceptions.

Drag and drop an AppBarButton control between the CommandBar markup elements.

<Page.BottomAppBar>
        <CommandBar>
            <AppBarButton />
        </CommandBar>
 
    </Page.BottomAppBar>

Now, we will specify a few properties for the AppBarButton. We will label the AppBarButton as AppBarButtonDemo1.

<Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="AppbarButtonDemo1" />
        </CommandBar>
 
    </Page.BottomAppBar>

We will add code to display a MessageBox when this AppBarButton is clicked. For that, we will need to wire the Click eventhandler.

private async void AppBarButton_Click(object sender, RoutedEventArgs e)
        {
            Windows.UI.Popups.MessageDialog md = new MessageDialog("Primary AppbarButton clicked");
            await md.ShowAsync();
        }

Next, we will change certain attributes of the AppbarButton.

We will specify the tooltip of the AppbarButton as well as the icon.

<Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="AppBarButtonDemo1" Click="AppBarButton_Click" ToolTipService.ToolTip="CommandBar Demo" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-1,0,0,0"  >
                <AppBarButton.Icon>
                    <FontIcon/>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar>
 
    </Page.BottomAppBar>

Next, we will add an AppBarButton in the SecondaryCollection of the Command Bar.

For that, we will create a new node in the code behind, called CommandBar.SecondaryCommands and add an AppBarButton under that node. Like we did before, we will specify a few properties for this AppBarButton as well as a click event handler.

<CommandBar.SecondaryCommands>
                <AppBarButton Label="AppBarButtonDemo2"  ToolTipService.ToolTip="CommandBar Demo" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-1,0,0,0" Click="AppBarButton_Click_1"  >
                    <AppBarButton.Icon>
                        <FontIcon/>
                    </AppBarButton.Icon>
                </AppBarButton>
 
            </CommandBar.SecondaryCommands>
private async void AppBarButton_Click_1(object sender, RoutedEventArgs e)
        {
            Windows.UI.Popups.MessageDialog md = new Windows.UI.Popups.MessageDialog("Secondary AppbarButton clicked");
            await md.ShowAsync();
        }

Our final markup will look as below.

<Page
    x:Class="Windows8._1CommandBarDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows8._1CommandBarDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="AppBarButtonDemo1" Click="AppBarButton_Click" ToolTipService.ToolTip="CommandBar Demo" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-1,0,0,0"  >
                <AppBarButton.Icon>
                    <FontIcon/>
                </AppBarButton.Icon>
            </AppBarButton>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="AppBarButtonDemo2"  ToolTipService.ToolTip="CommandBar Demo" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-1,0,0,0" Click="AppBarButton_Click_1"  >
                    <AppBarButton.Icon>
                        <FontIcon/>
                    </AppBarButton.Icon>
                </AppBarButton>
 
            </CommandBar.SecondaryCommands>
        </CommandBar>
 
    </Page.BottomAppBar>
 
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        
 
    </Grid>
</Page>

We can now test this by running the application and swiping down to show the CommandBar.

Swipe down to show the CommandBar
Swipe down to show the CommandBar

Summary

In this article, we learned about CommandBar controls and how to use them in Windows 8.1 applications.

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com



Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Instead of only managing projects organizations do need to manage value! "Doing the right things" and "doing things right" are the essential ingredients for successful software and systems delivery. Unfortunately, with distributed delivery spanning multiple disciplines, geographies and time zones, many organizations struggle with teams working in silos, broken lines of communication, lack of collaboration, inadequate traceability, and poor project visibility. This often results in organizations "doing the …

  • Live Event Date: May 7, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT This eSeminar will explore three popular games engines and how they empower developers to create exciting, graphically rich, and high-performance games for Android® on Intel® Architecture. Join us for a deep dive as experts describe the features, tools, and common challenges using Marmalade, App Game Kit, and Havok game engines, as well as a discussion of the pros and cons of each engine and how they fit into your development …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds