ToggleButton
The ToggleButton control is a subclass of the Button control that has a built-in checked state. This means the button can be checked or unchecked on click by a user. You may change the styling of controls based on whether ToggleButton is checked or not by using the :checked pseudoclass.​

Source code

​ToggleButton.cs​

Examples

Speaker Mute Button

This button will show a muted speaker icon or an unmuted speaker icon based on whether the button is checked or unchecked, which the ToggleButton control toggles between when users click on the button.
1
<Style Selector="ToggleButton DrawingPresenter.tbchecked">
2
<Setter Property="IsVisible" Value="false"/>
3
</Style>
4
<Style Selector="ToggleButton:checked DrawingPresenter.tbchecked">
5
<Setter Property="IsVisible" Value="true"/>
6
</Style>
7
<Style Selector="ToggleButton DrawingPresenter.tbunchecked">
8
<Setter Property="IsVisible" Value="true"/>
9
</Style>
10
<Style Selector="ToggleButton:checked DrawingPresenter.tbunchecked">
11
<Setter Property="IsVisible" Value="false"/>
12
</Style>
Copied!
The style code above reacts to ToggleButton's :checked pseudoclass, so that if the ToggleButton is checked, any DrawingPresenter with the class .tbchecked will be visible, and any DrawingPresenter with the class .tbunchecked will not be visible.
1
<ToggleButton Classes="vtrx" IsChecked="{Binding Path=vtrx.muted}" ToolTip.Tip="stop audio">
2
<Panel>
3
<DrawingPresenter Drawing="{DynamicResource Icon.Speaker}" Classes="tbunchecked"/>
4
<DrawingPresenter Width="14" Height="14" Margin="14,14,0,0" Drawing="{DynamicResource Icon.SpeakerMute}" Classes="tbchecked"/>
5
</Panel>
6
</ToggleButton>
Copied!
Last modified 3mo ago
Export as PDF
Copy link