Universal Windows Platform - Command Bar

Introduction

CommandBar is another user interface element we can use on the Universal Windows Platform to provide more options in the form of icons and menu options to the user than what they see displayed by default. It is really helpful to implement simple navigation and some feature to your app. So, let’s get crack in Universal Windows Platform Command Bar.

Creating a New Project and Add a CommandBar

Firstly, open up a new project or you can simply load your previous project. Now, in your left-side of Visual Studio, you can see a side window named “Document Outline”. Just right click on the “BottomAppBar” and add a “Command Bar”.


                                 Figure 1

Now, you’ll notice that, it automatically generates a XAML code snippet for you.

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

Listing 1

Now, again right click on the “SecondaryCommands” and add a new “AppBarButton”.


                                       Figure 2

And you can see it creates another menu button for your “Command Bar”, and your XAML code will look like this.

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="about" /> </CommandBar.SecondaryCommands>
        <AppBarButton Label="accept" Icon="Accept" />
        <AppBarButton Label="cancel" Icon="Cancel" /> </CommandBar>
</Page.BottomAppBar>

Listing 2

We have modified the labels of “Accept” and “Cancel” button, it shows the hint about the “Command Bar” buttons, and changed the label of “AppBarButton” to “about”.

Changing the CommandBar Icons

Now, you can change the icons of your “Command Bar”, as you can see in the following picture, it already set to “Accept” icon. Because we’ve selected the “accept” button in the XAML code.


                                       Figure 3

Or you can choose a “font icon” as your Icon, like “A”, “B” or anything you want.


                                       Figure 4

If you change “Accept” to “A” and “Cancel” to “C”, the code will look like this.

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="about" /> </CommandBar.SecondaryCommands>
        <AppBarButton Label="accept">
            <AppBarButton.Icon>
                <FontIcon Glyph="A" /> </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Label="cancel">
            <AppBarButton.Icon>
                <FontIcon Glyph="C" /> </AppBarButton.Icon>
        </AppBarButton>
    </CommandBar>
</Page.BottomAppBar>

Listing 3

Changing the CommadBar Mode

You can also change the mode of “Command Bar”. For this, all you’ve to do is just make some change in your “” tag like the following screenshot:


                                             Figure 5

You’ve to select the “Minimal” view of “ClosedDisplayMode”.

<Page.BottomAppBar>
    <CommandBar ClosedDisplayMode="Minimal">
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="about" /> </CommandBar.SecondaryCommands>
        <AppBarButton Label="accept">
            <AppBarButton.Icon>
                <FontIcon Glyph="A" /> </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Label="cancel">
            <AppBarButton.Icon>
                <FontIcon Glyph="C" /> </AppBarButton.Icon>
        </AppBarButton>
    </CommandBar>
</Page.BottomAppBar>

Listing 4

Add an Event Handler

Now let’s go back to previous changes and give an event handler in “about” button. To do so, in XAML code select the “About AppBarButton” line and under the “Solution Explorer”, you can see a “Properties” window and select the thunder sign like the following screenshot:

 

                                          Figure 6

And double click on the “Click” section and it automatically generates the code block for you.


                                             Figure 7

If you take a look at the XAML code, you can see exactly like this.

<Page.BottomAppBar>
    <CommandBar ClosedDisplayMode="Minimal">
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="about" Click="AppBarButton_Click" /> </CommandBar.SecondaryCommands>
        <AppBarButton Label="accept" Icon="Accept" />
        <AppBarButton Label="cancel" Icon="Cancel" /> </CommandBar>
</Page.BottomAppBar>

Listing 5

As, we have made an event handler for our “about” button, so we have to take another page named “AboutPage.xaml” and we’ll navigate to that page if someone tap on the “about” button.

So, when you’ve done adding a new page, go to the “MainPage.xaml.cs” or wherever you’ve done this. In our case, we created our “Command Bar” in “MainPage.xaml”, and you can see this code block in that page.


                                                         Figure 8

The code will look like this.

 

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
   Frame.Navigate(typeof(AboutPage));
}

Listing 6

Running the Application

After all you set, run the application and it will look like this.


                                                                                 Figure 9


                                        Figure 10

When you tap on the “about” button, it navigates to the “AboutPage.xaml” page.


                                                            Figure 11

Summary

So, that’s it. I think you got the basic idea how to use “Command Bar” in Universal Windows Platform Application. Have a nice day. Happy coding!

Source code.