CommandBar (WinUI)

The CommandBar control provides a versatile container for app commands, enabling a consistent command presentation across Windows devices. It adapts the layout for desktop, tablet, and mobile, supporting primary and secondary commands, overflow menus, and custom content.

Overview

The CommandBar is typically placed at the top of the window, but can also be used within pages or dialogs. It works seamlessly with the AppBarButton, AppBarToggleButton, and AppBarSeparator controls.

XAML Example

<CommandBar>
    <CommandBar.PrimaryCommands>
        <AppBarButton Icon="Add" Label="New" Click="OnNewClick"/>
        <AppBarButton Icon="Refresh" Label="Refresh" Click="OnRefreshClick"/>
    </CommandBar.PrimaryCommands>
    <CommandBar.SecondaryCommands>
        <AppBarButton Icon="Delete" Label="Delete" Click="OnDeleteClick"/>
        <AppBarButton Icon="Help" Label="Help" Click="OnHelpClick"/>
    </CommandBar.SecondaryCommands>
</CommandBar>

API Reference

Member	Type	Description
`PrimaryCommands`	IList<ICommandBarElement>	Collection of primary commands displayed directly on the bar.
`SecondaryCommands`	IList<ICommandBarElement>	Commands collapsed into the overflow menu.
`IsOpen`	bool	Indicates whether the overflow menu is open.
`ClosedDisplayMode`	AppBarClosedDisplayMode	Defines how the bar appears when closed.
`DynamicOverflowEnabled`	bool	Enables automatic overflow of commands based on available width.

C# Interaction

public MainPage()
{
    this.InitializeComponent();
    CommandBar.PrimaryCommands.Add(new AppBarButton
    {
        Icon = new SymbolIcon(Symbol.Add),
        Label = "New",
        Click = New_Click
    });
}

private void New_Click(object sender, RoutedEventArgs e)
{
    // Implement creation logic
}

Responsive Behavior

The CommandBar automatically moves commands from PrimaryCommands to SecondaryCommands when there isn’t enough horizontal space. Developers can control this using the DynamicOverflowEnabled property.

Theming & Styling

Custom styles can be applied via Resources or Style setters. Example below shows a dark theme variant:

<CommandBar Background="{ThemeResource SystemControlBackgroundBaseLowBrush}">
    <CommandBar.Resources>
        <SolidColorBrush x:Key="AppBarButtonForeground" Color="White"/>
    </CommandBar.Resources>
    …
</CommandBar>

Accessibility

All command elements expose Name for screen readers.
Use AutomationProperties.Name to provide descriptive labels.
Keyboard navigation works with Tab and Alt+F10 to open overflow.