ToggleGroup

Toggle buttons in a group that reports their states, as uikit:ToggleGroup.

<StackPanel Spacing="8" HorizontalAlignment="Left">
  <uikit:ToggleGroup>
    <ToggleButton Content="Bold" IsChecked="True" />
    <ToggleButton Content="Italic" />
    <ToggleButton Content="Underline" />
  </uikit:ToggleGroup>
  <uikit:ToggleGroup Classes="outline segmented small">
    <ToggleButton IsChecked="True">
      <PathIcon Data="{StaticResource UIKit.Icon.Bell}" />
    </ToggleButton>
    <ToggleButton>
      <PathIcon Data="{StaticResource UIKit.Icon.Inbox}" />
    </ToggleButton>
    <ToggleButton>
      <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
    </ToggleButton>
  </uikit:ToggleGroup>
</StackPanel>

#Usage

uikit:ToggleGroup is the Toggle Group made of ToggleButtons, in a row 8px apart. Its outline, segmented and size classes work as on the Toggle Group; outline and the size go on every toggle. Each toggle flips on its own and is its own Tab stop; the arrow keys do not move between them. A click on a toggle, or Space or Enter on it, raises the group's Click with Checked, every toggle's state after it. IsChecked on each toggle is the state. IsEnabled="False" on the group disables its toggles.

The demo has a group with labels, and outlined and segmented groups with icons.