Skip to content
Avalonia UIKit
GitHub

Search documentation

Find components, guides and examples.

Esc
↑↓Navigate↵OpenEscClose

Theme

Choose the color theme of the site and its live demos.

T

System

Light

Dark

↑↓Preview↵ApplyEscCancel
Browse documentation

Toolbar

A toolbar of ghost buttons and separators, as CommandBar.

ExampleInteractive
Toolbar — Avalonia UIKit
Live demo unavailable
<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.

For a row of any controls and content, use uikit:Toolbar.

Examples

xsmall, the default, and medium.

SizesInteractive
Live demo unavailable
<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
Live demo unavailable
<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>