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>

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

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

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

<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 1, again right-click on the “SecondaryCommands” and add a new “AppBarButton”.Figure 2And you can see it creates another menu button for your “Command Bar” and your XAML code will look like this.Listing 2We'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”.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 3Or you can choose a “font icon” as your Icon, like “A”, “B” or anything you want.Figure 4If you change “Accept” to “A” and “Cancel” to “C”, the code will look like this.Listing 3You 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 5You need to select the “Minimal” view of “ClosedDisplayMode”.Listing 4Now 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 6And double-click on the “Click” section and it automatically generates the code block for you.Figure 7If you have a look at the XAML code, you can see it is exactly like this.Listing 5Since 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 8When are done, the code will look like this:

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

Listing 6After 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.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