Command Bar in UAP in Windows

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
   
   

 

 

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:

• Compact: Display Command Bar with icon mode, the text is 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 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

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

• 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 overall the Command Bar properties, it applies to the primary Command Area.

 

CommandBarOverflowPresenter

 

CommandbarOverflowPresenter changes the style of the Secondary command style.

 

 

 

Example

<CommandBar.CommandBarOverflowPresenterStyle>
   <Style TargetType="CommandBarOverflowPresenter">
      <Setter Property="Background" Value="Red"/>
      <Setter Property="FontSize" Value="25"/>
   </Style>
</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.