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

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