Introduction

The Command Bar control in a UAP is a new control in Universal Windows programming. It is like a toolbar control or upgrades version for an App bar control in Windows 8.1, we can place a Command Bar anywhere in the UI, like top or bottom or anywhere.
A Command Bar is divided into the following two main areas or two property areas.
  1. Content
  2. Command Area

update_status

Display Mode

Initial or runtime, we can change the display mode of the Command Bar, the default mode is the compact mode.
ClosedDisplayMode is a property to change the display mode of the Command Bar:
Note
Content and Command areas are optional, either can be present or both.

Content

The Content area is like a container, we can place any control inside the content area.
Example
  1. <CommandBar.Content>
  2. <StackPanel Margin="10,2">
  3. <TextBlock Text="Update status Here !!!"/>
  4. <ProgressBar Maximum="100" Minimum="0" Height="15" Value="25"/>
  5. </StackPanel>
  6. </CommandBar.Content>
Update status here -> Content area.

Command Area

A Command Area has a collection of AppBarButton, AppBarToggleButton and AppBarSeparator buttons only. We can’t add any extra controls into the list, directly under the Command Area.
Note
All three controls are not necessary to be present in the Command Bar.
A Command Area is divided into the following two areas.
  1. Primary commands
  2. Secondary commands

Commands

Primary and secondary commands are a priority and non-priority area, the priority area is always visible to the users, a non-priority area is always hidden to the users. Whenever the user wants to interact with the secondary area, click the “…” menu visible to the UI.

Primary Command Area

Example
  1. <CommandBar.PrimaryCommands>
  2. <AppBarButton Label="Add Recored" Icon="Add" Click="AppBarButton_Click"/>
  3. <AppBarSeparator/>
  4. <AppBarToggleButton Label="Edit Recored" Icon="Delete" Click="AppBarToggleButton_Click"/>
  5. <AppBarButton>
  6. <ProgressBar Maximum="100" Minimum="0" Height="15" Value="25"/>
  7. </AppBarButton>
  8. </CommandBar.PrimaryCommands>
<CommandBar.PrimaryCommands> is an optional tag if we add controls under the Command Bar and are automatically treated as Primary Commands only.
Note
It is a best practice to add the tag of the primary command always.

Secondary commands

Secondary commands are non-priority areas, but once the user has clicked the secondary area, we make it visible until the user interacts with the Command Bar based on the context menu. Generally, if we click outside the menu area, the overflow menu automatically disappears.
Note
the IsSticky property can be set as overall the Command Bar properties, it applies to the primary Command Area.

CommandBarOverflowPresenter

CommandbarOverflowPresenter changes the style of the Secondary command style.
command_bar_overflow_presenter
Example
  1. <CommandBar.CommandBarOverflowPresenterStyle>
  2. <Style TargetType="CommandBarOverflowPresenter">
  3. <Setter Property="Background" Value="Red"/>
  4. <Setter Property="FontSize" Value="25"/>
  5. </Style>
  6. </CommandBar.CommandBarOverflowPresenterStyle>
Note
Microsoft has recommended in Windows 10 programming to use the Command Bar instead of the App bar control.

Summary

In this article, we learned about the Command Bar in UAP in Windows.