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:



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



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:


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



The following will be generated for you:



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:



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



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:



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



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:



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



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



This selection produces the following XAML:

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

And produces the following preview.



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.