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”.

Document Outline
                                 Figure 1

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

  1. <Page.BottomAppBar>  
  2.     <CommandBar>  
  3.         <AppBarButton Icon="Accept" Label="appbarbutton" />  
  4.         <AppBarButton Icon="Cancel" Label="appbarbutton" /> </CommandBar>  
  5. </Page.BottomAppBar>  
Listing 1

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

add appbarbutton
                                       Figure 2

And you can see it creates another menu button for your “Command Bar”, and your XAML code will look like this.
  1. <Page.BottomAppBar>  
  2.     <CommandBar>  
  3.         <CommandBar.SecondaryCommands>  
  4.             <AppBarButton Label="about" /> </CommandBar.SecondaryCommands>  
  5.         <AppBarButton Label="accept" Icon="Accept" />  
  6.         <AppBarButton Label="cancel" Icon="Cancel" /> </CommandBar>  
  7. </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.

Symbollcon
                                       Figure 3

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

Font icon
                                       Figure 4

If you change “Accept” to “A” and “Cancel” to “C”, the code will look like this.
  1. <Page.BottomAppBar>  
  2.     <CommandBar>  
  3.         <CommandBar.SecondaryCommands>  
  4.             <AppBarButton Label="about" /> </CommandBar.SecondaryCommands>  
  5.         <AppBarButton Label="accept">  
  6.             <AppBarButton.Icon>  
  7.                 <FontIcon Glyph="A" /> </AppBarButton.Icon>  
  8.         </AppBarButton>  
  9.         <AppBarButton Label="cancel">  
  10.             <AppBarButton.Icon>  
  11.                 <FontIcon Glyph="C" /> </AppBarButton.Icon>  
  12.         </AppBarButton>  
  13.     </CommandBar>  
  14. </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:

close display mode
                                             Figure 5

You’ve to select the “Minimal” view of “ClosedDisplayMode”.
  1. <Page.BottomAppBar>  
  2.     <CommandBar ClosedDisplayMode="Minimal">  
  3.         <CommandBar.SecondaryCommands>  
  4.             <AppBarButton Label="about" /> </CommandBar.SecondaryCommands>  
  5.         <AppBarButton Label="accept">  
  6.             <AppBarButton.Icon>  
  7.                 <FontIcon Glyph="A" /> </AppBarButton.Icon>  
  8.         </AppBarButton>  
  9.         <AppBarButton Label="cancel">  
  10.             <AppBarButton.Icon>  
  11.                 <FontIcon Glyph="C" /> </AppBarButton.Icon>  
  12.         </AppBarButton>  
  13.     </CommandBar>  
  14. </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:
 
event handler
                                          Figure 6

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

properties
                                             Figure 7

If you take a look at the XAML code, you can see exactly like this.
  1. <Page.BottomAppBar>  
  2.     <CommandBar ClosedDisplayMode="Minimal">  
  3.         <CommandBar.SecondaryCommands>  
  4.             <AppBarButton Label="about" Click="AppBarButton_Click" /> </CommandBar.SecondaryCommands>  
  5.         <AppBarButton Label="accept" Icon="Accept" />  
  6.         <AppBarButton Label="cancel" Icon="Cancel" /> </CommandBar>  
  7. </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.

about
                                                         Figure 8

The code will look like this.

 

  1. private void AppBarButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.    Frame.Navigate(typeof(AboutPage));  
  4. }  
Listing 6

Running the Application

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

command bar
                                                                                 Figure 9

main page
                                        Figure 10


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

about 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.