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

  • Thanks :)

    Posted by zain on 07/22/2014 02:06pm

    Nice.. that was awesome

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

Top White Papers and Webcasts

  • Live Event Date: August 20, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT When you look at natural user interfaces as a developer, it isn't just fun and games. There are some very serious, real-world usage models of how things can help make the world a better place – things like Intel® RealSense™ technology. Check out this upcoming eSeminar and join the panel of experts, both from inside and outside of Intel, as they discuss how natural user interfaces will likely be getting adopted in a wide variety …

  • Java developers know that testing code changes can be a huge pain, and waiting for an application to redeploy after a code fix can take an eternity. Wouldn't it be great if you could see your code changes immediately, fine-tune, debug, explore and deploy code without waiting for ages? In this white paper, find out how that's possible with a Java plugin that drastically changes the way you develop, test and run Java applications. Discover the advantages of this plugin, and the changes you can expect to see …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds