Group Box

A titled group in normal, fill and outline looks, as Avalonia's GroupBox.

ExampleInteractive

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>

Usage

The theme covers GroupBox. Header is the muted title, and the content follows 16px below it (12px for fill and outline). Without a class the group sits on the page background; fill paints the group box color and outline a 1px border, and both pad the content by 16px. Without a Header, only the surface remains.

Examples

Normal, fill and outline, and a fill group without a title.

VariantsInteractive

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 adds supporting text under the surface: 14px muted text, 8px below it and aligned with the title.

FooterInteractive

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

#Usage

#Examples

Usage

Examples