Toolbar

由 ghost 按钮与分隔符组成的工具栏，即 CommandBar。

示例可交互

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>

用法

主题覆盖 CommandBar 以及 CommandBarButton、CommandBarToggleButton 与 CommandBarSeparator：一个透明行，先放置 CommandBar 的 Content，再放置各个命令。按钮是紧凑的 ghost 按钮，带一个 Icon，右侧可选一个 Label（DefaultLabelPosition 保持为 Right），没有标签时为正方形；切换按钮是一个 Toggle，选中或悬停时使用强调色；分隔符是一条不占宽度的 20px 细线。尺寸：xsmall、默认的 small 与 medium（large 与之相同）。方向键可在命令之间移动。溢出按钮仅在存在 SecondaryCommands 时显示。

如果需要的是一行任意控件与内容，请使用 uikit:Toolbar。

示例

xsmall、默认尺寸与 medium。

尺寸可交互

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>

在 CommandBar 上设置 IsEnabled="False" 会禁用所有命令。

禁用可交互

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>

Toolbar

#用法

#示例

用法

示例