Skip to content
Avalonia UIKit
GitHub

Search documentation

Find components, guides and examples.

Esc
↑↓Navigate↵OpenEscClose

Theme

Choose the site's color theme.

ThemeT

System

Light

Dark

↑↓Preview↵ApplyEscCancel
Browse documentation

Toolbar

Partial

A toolbar of ghost buttons and separators, as CommandBar.

ExampleInteractive
Toolbar — Avalonia UIKit
Toolbar demo
<CommandBar Content="Files" HorizontalAlignment="Left">
  <CommandBarButton>
    <CommandBarButton.Icon>
      <PathIcon Data="{StaticResource UIKit.Icon.Undo2}" />
    </CommandBarButton.Icon>
  </CommandBarButton>
  <CommandBarButton>
    <CommandBarButton.Icon>
      <PathIcon Data="{StaticResource UIKit.Icon.Redo2}" />
    </CommandBarButton.Icon>
  </CommandBarButton>
  <CommandBarSeparator />
  <CommandBarButton Label="New">
    <CommandBarButton.Icon>
      <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
    </CommandBarButton.Icon>
  </CommandBarButton>
  <CommandBarSeparator />
  <CommandBarToggleButton Label="B" IsChecked="True" />
</CommandBar>

Usage

The theme covers CommandBar with CommandBarButton, CommandBarToggleButton and CommandBarSeparator: a transparent row with the bar's Content first, then the commands. A button is a compact ghost button with an Icon and an optional Label to its right (DefaultLabelPosition stays Right), square without a label; a toggle button is a Toggle, in the accent while checked or hovered; a separator is a 20px line taking no width. Sizes: xsmall, the default small and medium (large is the same). The arrow keys move between the commands. The overflow button shows only for SecondaryCommands.

Examples

xsmall, the default, and medium.

SizesInteractive
Toolbar demo: Sizes
<StackPanel Spacing="8" HorizontalAlignment="Left">
  <CommandBar Classes="xsmall">
    <CommandBarButton>
      <CommandBarButton.Icon>
        <PathIcon Data="{StaticResource UIKit.Icon.Undo2}" />
      </CommandBarButton.Icon>
    </CommandBarButton>
    <CommandBarButton>
      <CommandBarButton.Icon>
        <PathIcon Data="{StaticResource UIKit.Icon.Redo2}" />
      </CommandBarButton.Icon>
    </CommandBarButton>
    <CommandBarSeparator />
    <CommandBarButton Label="New">
      <CommandBarButton.Icon>
        <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
      </CommandBarButton.Icon>
    </CommandBarButton>
    <CommandBarSeparator />
    <CommandBarToggleButton Label="B" IsChecked="True" />
  </CommandBar>
  <CommandBar>
    <CommandBarButton>
      <CommandBarButton.Icon>
        <PathIcon Data="{StaticResource UIKit.Icon.Undo2}" />
      </CommandBarButton.Icon>
    </CommandBarButton>
    <CommandBarButton>
      <CommandBarButton.Icon>
        <PathIcon Data="{StaticResource UIKit.Icon.Redo2}" />
      </CommandBarButton.Icon>
    </CommandBarButton>
    <CommandBarSeparator />
    <CommandBarButton Label="New">
      <CommandBarButton.Icon>
        <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
      </CommandBarButton.Icon>
    </CommandBarButton>
    <CommandBarSeparator />
    <CommandBarToggleButton Label="B" IsChecked="True" />
  </CommandBar>
  <CommandBar Classes="medium">
    <CommandBarButton>
      <CommandBarButton.Icon>
        <PathIcon Data="{StaticResource UIKit.Icon.Undo2}" />
      </CommandBarButton.Icon>
    </CommandBarButton>
    <CommandBarButton>
      <CommandBarButton.Icon>
        <PathIcon Data="{StaticResource UIKit.Icon.Redo2}" />
      </CommandBarButton.Icon>
    </CommandBarButton>
    <CommandBarSeparator />
    <CommandBarButton Label="New">
      <CommandBarButton.Icon>
        <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
      </CommandBarButton.Icon>
    </CommandBarButton>
    <CommandBarSeparator />
    <CommandBarToggleButton Label="B" IsChecked="True" />
  </CommandBar>
</StackPanel>

IsEnabled="False" on the bar disables every command.

DisabledInteractive
Toolbar demo: Disabled
<CommandBar IsEnabled="False" HorizontalAlignment="Left">
  <CommandBarButton>
    <CommandBarButton.Icon>
      <PathIcon Data="{StaticResource UIKit.Icon.Undo2}" />
    </CommandBarButton.Icon>
  </CommandBarButton>
  <CommandBarButton>
    <CommandBarButton.Icon>
      <PathIcon Data="{StaticResource UIKit.Icon.Redo2}" />
    </CommandBarButton.Icon>
  </CommandBarButton>
  <CommandBarSeparator />
  <CommandBarButton Label="New">
    <CommandBarButton.Icon>
      <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
    </CommandBarButton.Icon>
  </CommandBarButton>
  <CommandBarSeparator />
  <CommandBarToggleButton Label="B" IsChecked="True" />
</CommandBar>

Not covered

  • Arbitrary elements and flexible spacers among the commands.
  • Named groups of commands.