Command Bar in UAP in Windows


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.
Content and Command areas are optional, either can be present or both.


The Content area is like a container, we can place any control inside the content area.
  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.
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


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

  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.
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).
the IsSticky property can be set as overall the Command Bar properties, it applies to the primary Command Area.


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


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