Part 23 - Working with the Command Bar

Sign in to queue

Description

Download the source code for this lesson at http://absolutebeginner.codeplex.com/

In this short lesson we’ll learn about the CommandBar, another user interface element we can use on the Phone to provide more options in the form of icons and menu options to the user than what they see displayed by default.

Here’s an example of a CommandBar with a single PrimaryCommand AppBarButton:

clip_image002

Clicking the ellipsis on the right will reveal the label for the PrimaryCommand AppBarButton and reveals a SecondaryCommand AppBarButton for an “about” feature:

clip_image004

How do you add these?  Obviously, with XAML.  However, Visual Studio does have a tool that makes quick work of this.

Create a new Blank App project called CommandBarExample.  Open the MainPage.xaml into the designer.

On the left side of Visual Studio, hover over the Document Outline tab and pin it down.  It will reveal each of the elements of the Page including a BottomAppBar and a Grid:
clip_image006

Right-click the ButtomAppBar to reveal a context menu.  Select “Add CommandBar”:

clip_image008

The following will be generated for you:

clip_image010

As you can see, several items were created in XAML.  First, a BottomAppBar is created for the Page.  Inside the BottomAppBar is a CommandBar element containing two AppBarButton controls:

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Accept" Label="appbarbutton"/>
            <AppBarButton Icon="Cancel" Label="appbarbutton"/>
        </CommandBar>
    </Page.BottomAppBar>

If you peek back at the Document Outline window, it will display the new elements in the outline:

clip_image012

We’ll right-click the SecondaryCommands item and select the menu option from the context menu to add a new AppBarButton:

clip_image014

Now, the XAML looks like this:

    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="appbarbutton"/>
            </CommandBar.SecondaryCommands>
            <AppBarButton Icon="Accept" Label="appbarbutton"/>
            <AppBarButton Icon="Cancel" Label="appbarbutton"/>
        </CommandBar>
    </Page.BottomAppBar>

In addition to the PrimaryCommands and SecondaryCommands, we can also add an AppBarToggleButton:

clip_image016

This will provide two states … on and off, as designated by the “chrome” around the symbol:

clip_image018

The Phone API has many common symbols available.  Put your mouse cursor on a given AppBarButton in the XAML view, then look at the Properties window.  If you scroll down to the Icon section, the Symbol Icons are visible by default:

clip_image020

You can select one of the available symbols for use in your app:

clip_image022

You can also use Fonts to choose a Glyph (letter) for use as an icon:

clip_image024

This selection produces the following XAML:

            <AppBarButton Label="appbarbutton">
                <AppBarButton.Icon>
                    <FontIcon Glyph="B"/>
                </AppBarButton.Icon>
            </AppBarButton>

And produces the following preview.

clip_image026

There are other options that allow you to use your own images as well.  Final note: the AppBarButton operates much like a regular button insomuch that you can handle the Click event and other related options.

Embed

Download

Download this episode

The Discussion

Add Your 2 Cents