Skip to content

CommandBar.md

Latest commit

 

History

History
142 lines (109 loc) · 4.5 KB

CommandBar.md

File metadata and controls

142 lines (109 loc) · 4.5 KB

CommandBar

A toolbar control that displays primary commands inline and moves overflow items into a popup menu. Supports dynamic overflow, label positions, and open/closed states.

Basic usage

<CommandBar>
    <CommandBarButton Content="New" />
    <CommandBarButton Content="Open" />
    <CommandBarButton Content="Save" />
    <CommandBar.SecondaryCommands>
        <CommandBarButton Content="Settings" />
        <CommandBarButton Content="About" />
    </CommandBar.SecondaryCommands>
</CommandBar>

Properties

Property Type Default Description
PrimaryCommands IAvaloniaList<ICommandBarElement> — Collection of primary command elements
SecondaryCommands IAvaloniaList<ICommandBarElement> — Collection of secondary command elements shown in overflow popup
IsOpen bool false Whether the overflow popup is open
IsSticky bool true Whether the popup stays open on light-dismiss
ClosedDisplayMode CommandBarClosedDisplayMode Compact How the bar appears when closed (Compact, Minimal, Hidden)
DefaultLabelPosition CommandBarDefaultLabelPosition — Label position for primary command buttons (Bottom, Right, Collapsed)
ItemsAlignment CommandBarItemsAlignment — How primary commands are aligned (Left, Right)
OverflowButtonVisibility CommandBarOverflowButtonVisibility Auto When the overflow button is shown (Auto, Visible, Hidden)
IsDynamicOverflowEnabled bool true Whether primary commands automatically move to overflow when space is limited

Events

Event Description
Opening Raised when the overflow popup starts opening
Opened Raised when the overflow popup has opened
Closing Raised when the overflow popup starts closing
Closed Raised when the overflow popup has closed

Primary vs secondary commands

Primary commands are shown inline in the toolbar. Secondary commands are always shown in the overflow popup:

<CommandBar>
    <CommandBarButton Content="Save" Icon="{DynamicResource SaveIcon}" />
    <CommandBarButton Content="Print" Icon="{DynamicResource PrintIcon}" />
    
    <CommandBar.SecondaryCommands>
        <CommandBarButton Content="Options" />
        <CommandBarButton Content="Help" />
    </CommandBar.SecondaryCommands>
</CommandBar>

Dynamic overflow

When IsDynamicOverflowEnabled is true, primary commands automatically move to the overflow menu when space is limited. Use DynamicOverflowOrder to control which items overflow first:

<CommandBar IsDynamicOverflowEnabled="True">
    <CommandBarButton Content="Primary" DynamicOverflowOrder="0" />
    <CommandBarButton Content="Secondary" DynamicOverflowOrder="1" />
    <CommandBarButton Content="Tertiary" DynamicOverflowOrder="2" />
</CommandBar>

Items with higher DynamicOverflowOrder values overflow first.

Label positions

Control where button labels appear:

<CommandBar DefaultLabelPosition="Right">
    <CommandBarButton Content="Save" />
    <CommandBarButton Content="Open" />
</CommandBar>
  • Bottom: Labels below icons (default)
  • Right: Labels to the right of icons
  • Collapsed: Labels hidden (icons only)

Closed display modes

Control how the bar appears when the overflow popup is closed:

<CommandBar ClosedDisplayMode="Minimal">
    <!-- Commands -->
</CommandBar>
  • Compact: Shows primary commands in a compact layout
  • Minimal: Shows only icons (if available) or a single button
  • Hidden: Hides the bar entirely when closed

Toggle buttons

Use toggle buttons for stateful commands:

<CommandBar>
    <CommandBarButton Content="Bold" />
    <CommandBarToggleButton Content="Italic" />
    <CommandBarToggleButton Content="Underline" />
</CommandBar>

Separators

Add visual separators between command groups:

<CommandBar>
    <CommandBarButton Content="New" />
    <CommandBarButton Content="Open" />
    <CommandBarSeparator />
    <CommandBarButton Content="Save" />
    <CommandBarButton Content="Save As" />
</CommandBar>

Handling open/close events

commandBar.Opening += (sender, e) => { /* Prepare overflow menu */ };
commandBar.Opened += (sender, e) => { /* Animation complete */ };
commandBar.Closing += (sender, e) => { /* Cleanup */ };
commandBar.Closed += (sender, e) => { /* Fully closed */ };

Programmatic control

// Open/close overflow
commandBar.IsOpen = true;
commandBar.IsOpen = false;