Checkbox

勾选标记以弹簧动效淡入的复选框。

示例可交互

Checkbox — Avalonia UIKit

Live demo unavailable

<StackPanel Spacing="8">
  <CheckBox Content="Accept terms and conditions" IsChecked="True" />
  <CheckBox Content="Subscribe to the newsletter" />
  <CheckBox Content="Disabled" IsEnabled="False" />
  <CheckBox Content="Disabled checked" IsChecked="True" IsEnabled="False" />
</StackPanel>

用法

主题覆盖 CheckBox。方框为 16px，标签在其后 8px；勾选标记在 UIKit.Spring.Control 上淡入，方框被切回时动效在中途反向。尺寸：xsmall、small、large（默认为 medium）。

IsThreeState="True" 配合 IsChecked="{x:Null}" 得到不确定状态，绘制为减号标记。没有 Content 的 CheckBox 会去掉标签及其间距：主题会自行给指示器加上 bare 样式类。焦点环包裹整行，且只在键盘焦点时显示，指针按下时不显示。

示例

四种尺寸会缩放方框、标记和标签。

尺寸可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="8">
  <CheckBox Classes="xsmall" Content="Extra small" IsChecked="True" />
  <CheckBox Classes="small" Content="Small" IsChecked="True" />
  <CheckBox Content="Medium" IsChecked="True" />
  <CheckBox Classes="large" Content="Large" IsChecked="True" />
</WrapPanel>

一个三态的“全选”方框，位于它所代表的条目之上。演示中的状态是静态的；实际应用通过绑定让它们保持同步。

不确定状态可交互

Live demo unavailable

<StackPanel Spacing="8">
  <CheckBox Content="Select all" IsThreeState="True" IsChecked="{x:Null}" />
  <StackPanel Spacing="8" Margin="24,0,0,0">
    <CheckBox Content="Documents" IsChecked="True" />
    <CheckBox Content="Photos" />
  </StackPanel>
</StackPanel>

用于表格或列表行的无标签方框；无需任何样式类。

无标签可交互

Live demo unavailable

<WrapPanel ItemSpacing="12" LineSpacing="8">
  <CheckBox IsChecked="True" />
  <CheckBox />
  <CheckBox Classes="small" IsChecked="True" />
  <CheckBox Classes="small" />
  <CheckBox IsChecked="True" IsEnabled="False" />
  <CheckBox IsEnabled="False" />
</WrapPanel>

Checkbox

#用法

#示例

用法

示例