Toggle Group
Toggles that select one or several items, as a ListBox with the toggle-group class.
<ListBox Classes="toggle-group" SelectionMode="Multiple,Toggle" HorizontalAlignment="Left">
<ListBoxItem Content="Bold" />
<ListBoxItem Content="Italic" IsSelected="True" />
<ListBoxItem Content="Underline" />
</ListBox>Usage
ListBox Classes="toggle-group" lays its ListBoxItems out in a row, 8px apart, and draws each as a toggle: ghost by default, selected and hovered items in the accent. The selection rule is the app's SelectionMode: Multiple,Toggle lets every item flip on its own; Toggle (or Single) keeps at most one item selected. IsSelected on an item, or SelectedItems on the list, is the state. A group holds a handful of items, so the list does not virtualize.
| Class | Effect |
|---|---|
outline | A 1px border and the background on every item (ghost is the default) |
segmented | Joins the items: only the outer corners are rounded and neighbours share one edge |
xsmall, small, large | Item height 20, 24 and 36; medium, the default, is 32. An icon takes the text size |
Examples
Ghost and outlined, loose and segmented. The segmented groups use SelectionMode="Toggle", so one item is selected at a time and clicking it again clears the selection.
<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>The four sizes of an outlined group.
<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>A PathIcon as an item's content; the icon follows the group's size.
<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>Not covered
- A selection rule built into the group: the app sets
SelectionMode.