Command Bar in UAP

The Command Bar control in a UAP is a new control in Universal Windows programming. It is like a toolbar control or upgrade version for an Appbar control in Windows 8.1, we can place a Command Bar anywhere in the UI, like top or bottom or anywere.

A Command Bar is divided into the following two main areas or two property areas:

1. Content
2. Command Area

Display Mode

Initial or runtime, we can change the display mode of the Command Bar, the default mode is compact mode.

ClosedDisplayMode is a property to change the display mode of the Command Bar:

• Compact: Display Command Bar with icon mode, text are hidden
• Minimal: Display Command Bar, icon and text are hidden
• Hidden: Complete Command Bar is hidden.
• FlowDirection: We can change the content area from the left to the right using the FlowDirection property.

Note: Content and Command Area 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

<CommandBar.Content>
     <StackPanel Margin="10,2">
        <TextBlock Text="Update status Here !!!"/>
        <ProgressBar Maximum="100" Minimum="0" Height="15" Value="25"/>
     </StackPanel>
</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 the 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

<CommandBar.PrimaryCommands>
     <AppBarButton Label="Add Recored" Icon="Add" Click="AppBarButton_Click"/>
     <AppBarSeparator/>
     <AppBarToggleButton Label="Edit Recored" Icon="Delete" Click="AppBarToggleButton_Click"/>
     <AppBarButton>
      <ProgressBar Maximum="100" Minimum="0" Height="15" Value="25"/>
     </AppBarButton>
 </CommandBar.PrimaryCommands>

<CommandBar.PrimaryCommands> is an optional tag if we add controls under the Command Bar is automatically treated as Primary Commands only.

Note: It is a best practice to add the primary commands tag 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 automcatilacally disappears.

• IsSticky: True, the menu will display until the click of any menu item in the Command Bar.
  
  
• IsSticky: False, the menu will disappear, click anywhere outside the menu item (the default mode).

Note: the IsSticky property can be set as over all the Command Bar properties, it applies to the primary Command Area.

CommandBarOverflowPresenter

CommandbarOverflowPresenter changes the style of the Secondary commands style.



Example

<CommandBar.CommandBarOverflowPresenterStyle>
   <Style TargetType="CommandBarOverflowPresenter">
      <Setter Property="Background" Value="Red"/>
      <Setter Property="FontSize" Value="25"/>
   </Style>
</CommandBar.CommandBarOverflowPresenterStyle>

Note: Microsoft has recommend in Windows 10 programming to use the Command Bar instead of the App bar control.