As I realized, you need a control that behaves exactly like a ToggleButton
but, looks different. - You don't need a custom control for that purpose.
You can just create a Style
and set it to your ToggleButton
, like in the following Grid
:
<Grid>
<Grid.Resources>
<Style x:Key="myToggleButtonStyle"
TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<Grid x:Name="uncheckedGrid">
<Rectangle Stroke="DarkGreen" StrokeThickness="2"
Fill="LightGreen" />
<TextBlock Text="Unchecked" Margin="20" />
</Grid>
<Grid x:Name="checkedGrid" Visibility="Collapsed">
<Ellipse Stroke="DarkRed" StrokeThickness="2"
Fill="Salmon" />
<TextBlock Text="Checked" Margin="20" />
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="uncheckedGrid"
Value="Collapsed" />
<Setter Property="Visibility" TargetName="checkedGrid"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ToggleButton Style="{StaticResource myToggleButtonStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
In this Grid
, there is a ToggleButton
that shows a Rectangle
when it is unchecked and, shows an Ellipse
when it is checked. You can replace the Rectangle
and the Ellipse
with your images.