Windows Phone – Command Bar

Welcome again! Today I’ll talk about a simple but useful topic “Windows Phone Command Bar”. If you’ve previous experience about Windows Phone 7 or 8, you could have noticed that, in Windows Phone 8.1 they made a little bit change. Previously we’re familiar with “App Bar”, now it’s known as “Command Bar”. Obviously the code segment also changed than before. So, let’s get crack in Windows Phone Command Bar.

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

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>

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

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>

We’ve 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”.

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

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

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>

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

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>

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

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

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>

As, we’ve made an event handler for our “about” button, so we have to take another page named “About.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.

When’ve done, the code will look like this.

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

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

When you tap on the “about” button, it navigates to the “About.xaml” page. So, that’s it. I think you got the basic idea how to use “Command Bar” in Windows Phone 8.1.

I’ll be here, with a new topic soon. Till then good bye. Have a nice day. Happy coding.

You can download the full source code from here,
Download link: http://1drv.ms/1yqPkwZ