Description

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:

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:

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.