Toggle
A toggle button, ghost or outlined, as ToggleButton.
ExampleInteractive
<WrapPanel ItemSpacing="8" LineSpacing="8">
<ToggleButton Content="Bold" IsChecked="True" />
<ToggleButton Content="Italic" />
<ToggleButton Content="Underline" IsEnabled="False" />
</WrapPanel>Usage
The theme covers ToggleButton in full. A toggle is ghost by default: no border and a transparent background until it is hovered or checked, when it shows the accent. Classes="outline" adds the 1px border and the background. A toggle is at least as wide as it is tall, so a PathIcon alone makes a square. IsChecked is the state; a toggle draws no focus ring.
| Class | Effect |
|---|---|
outline | A 1px border and the background (ghost is the default) |
xsmall, small, large | Height 20, 24 and 36; medium, the default, is 32 |
Examples
The outlined variant, checked, unchecked and disabled.
<WrapPanel ItemSpacing="8" LineSpacing="8">
<ToggleButton Classes="outline" Content="Bold" IsChecked="True" />
<ToggleButton Classes="outline" Content="Italic" />
<ToggleButton Classes="outline" Content="Underline" IsEnabled="False" />
</WrapPanel>The four sizes.
<WrapPanel ItemSpacing="8" LineSpacing="8">
<ToggleButton Classes="outline xsmall" Content="Extra small" IsChecked="True" />
<ToggleButton Classes="outline small" Content="Small" IsChecked="True" />
<ToggleButton Classes="outline" Content="Medium" IsChecked="True" />
<ToggleButton Classes="outline large" Content="Large" IsChecked="True" />
</WrapPanel>A PathIcon as the content makes a square toggle, ghost or outlined.
<WrapPanel ItemSpacing="8" LineSpacing="8">
<ToggleButton IsChecked="True">
<PathIcon Data="{StaticResource UIKit.Icon.Star}" />
</ToggleButton>
<ToggleButton>
<PathIcon Data="{StaticResource UIKit.Icon.Bell}" />
</ToggleButton>
<ToggleButton Classes="outline" IsChecked="True">
<PathIcon Data="{StaticResource UIKit.Icon.Eye}" />
</ToggleButton>
<ToggleButton Classes="outline">
<PathIcon Data="{StaticResource UIKit.Icon.PanelLeftOpen}" />
</ToggleButton>
</WrapPanel>Not covered
- Nothing: the control's look is covered in full.