Toggle Group

用于选中一项或多项的切换按钮，即使用 toggle-group 样式类的 ListBox。

示例可交互

Toggle Group — Avalonia UIKit

Live demo unavailable

<ListBox Classes="toggle-group" SelectionMode="Multiple,Toggle" HorizontalAlignment="Left">
  <ListBoxItem Content="Bold" />
  <ListBoxItem Content="Italic" IsSelected="True" />
  <ListBoxItem Content="Underline" />
</ListBox>

用法

ListBox Classes="toggle-group" 把它的 ListBoxItem 排成一行，间距 8px，并把每一项绘制为切换按钮：默认为 ghost，选中与悬停的项使用强调色。选中规则由应用的 SelectionMode 决定：Multiple,Toggle 让每一项独立切换；Toggle（或 Single）最多保留一项选中状态。状态由项上的 IsSelected 或列表上的 SelectedItems 表示。一个组只容纳少量项，因此列表不会虚拟化。

样式类	效果
`outline`	为每一项添加 1px 边框与背景（默认为 ghost）
`segmented`	把各项连成整体：只保留外侧圆角，相邻项共用一条边缘
`xsmall`、`small`、`large`	项高分别为 20、24 与 36；默认的 medium 为 32。图标使用文字尺寸

uikit:ToggleGroup 是由 ToggleButton 组成的组，每一项独立切换。

示例

Ghost 与描边，分离与 segmented。分段组使用 SelectionMode="Toggle"，因此一次只选中一项，再次点击该项会清除选中状态。

变体可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="12">
  <ListBox Classes="toggle-group" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group segmented" SelectionMode="Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline segmented" SelectionMode="Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
</WrapPanel>

描边组的四种尺寸。

尺寸可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="12">
  <ListBox Classes="toggle-group outline xsmall" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline small" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline large" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
</WrapPanel>

用 PathIcon 作为项的内容；图标跟随组的尺寸。

图标可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="12">
  <ListBox Classes="toggle-group" SelectionMode="Multiple,Toggle">
    <ListBoxItem IsSelected="True">
      <PathIcon Data="{StaticResource UIKit.Icon.Eye}" />
    </ListBoxItem>
    <ListBoxItem>
      <PathIcon Data="{StaticResource UIKit.Icon.Star}" />
    </ListBoxItem>
    <ListBoxItem>
      <PathIcon Data="{StaticResource UIKit.Icon.Bell}" />
    </ListBoxItem>
  </ListBox>
  <ListBox Classes="toggle-group outline segmented" SelectionMode="Toggle">
    <ListBoxItem IsSelected="True">
      <PathIcon Data="{StaticResource UIKit.Icon.PanelLeftOpen}" />
    </ListBoxItem>
    <ListBoxItem>
      <PathIcon Data="{StaticResource UIKit.Icon.PanelLeftClose}" />
    </ListBoxItem>
  </ListBox>
</WrapPanel>

Toggle Group

#用法

#示例

用法

示例