Windows Phone - Command Bar

Introduction

Welcome again! Today in this article I'll talk about a simple but useful topic, the “Windows Phone Command Bar”. If you have previous experience with Windows Phone 7 or 8, you could have noticed that, in Windows Phone 8.1 they made a little change. What was called “App Bar” is now known as “Command Bar”. The “CommandBar” is 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. Obviously the code segment has also changed from before. So, let's get cracking in the Windows Phone Command Bar.

Creating a New Project and Add a CommandBar

First of all, 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've modified the labels of the “Accept” and “Cancel” buttons, 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 see in the picture below, it is already set to the “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 the “Command Bar”. For this, all you need do is to make some changes in your “” tag like the picture below.


                                       Figure 5

You need 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 return to the previous changes and provide an event handler for the “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 picture below.


                                          Figure 6

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


                                          Figure 7

If you have a look at the XAML code, you can see it is 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

Since we've made an event handler for our “About” button, we need to use another page named “About.xaml” and we'll navigate to that page if someone taps on the “About” button.

So, when you have added 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

When are done, the code will look like this:

 

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

Listing 6

Running the Application

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



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

Summary

So, that's it. I think you have the basic idea of how to use the “Command Bar” in Windows Phone 8.1.

I'll be here, with a new topic soon. Until then good bye. Have a nice day.

Happy coding!

Read the original article at http://bit.ly/1olGu0o