Group Box

以普通、填充与描边三种外观呈现的带标题分组，即 Avalonia 的 GroupBox。

示例可交互

Group Box — Avalonia UIKit

Live demo unavailable

<GroupBox Classes="outline" Header="Account" Width="320" HorizontalAlignment="Left">
  <StackPanel Spacing="12">
    <TextBox PlaceholderText="Display name" />
    <ToggleSwitch Content="Public profile" IsChecked="True" />
  </StackPanel>
</GroupBox>

用法

主题覆盖 GroupBox。Header 是弱化的标题，内容在其下方 16px 处（fill 与 outline 为 12px）。不加样式类时，分组位于页面背景之上；fill 会绘制分组框颜色，outline 会绘制 1px 边框，两者都会为内容添加 16px 的内边距。没有 Header 时，只保留表面。

示例

普通、填充与描边，以及一个没有标题的填充分组。

变体可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="16">
  <GroupBox Header="Normal" Content="On the page background." Width="280" />
  <GroupBox Classes="fill" Header="Fill" Content="On the group box fill." Width="280" />
  <GroupBox Classes="outline" Header="Outline" Content="Inside a 1px border." Width="280" />
  <GroupBox Classes="fill" Content="Without a title." Width="280" />
</WrapPanel>

uikit:GroupBoxes.Footer 在表面下方添加辅助文字：14px 弱化文字，位于其下方 8px 处，并与标题对齐。

Footer可交互

Live demo unavailable

<GroupBox Classes="fill" Header="Contributions &amp; activity" Width="400"
          uikit:GroupBoxes.Footer="Private contributions never reveal repository names.">
  <DockPanel>
    <ToggleSwitch DockPanel.Dock="Right" OnContent="{x:Null}" OffContent="{x:Null}" />
    <TextBlock Text="Make profile private" VerticalAlignment="Center" />
  </DockPanel>
</GroupBox>

Group Box

#用法

#示例

用法

示例