Basic WPF ToggleButton Template

Question

I require a toggle button that has not border when IsChecked = False and has a simple 1pt border of a certain color when IsChecked = True. I have the following style but my border when the button IsChecked = True is being set to Transparent (using Snoop to inspect)

<Style x:Key="InfoToggleButton"
         TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="#EEEEF2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border CornerRadius="0" 
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter x:Name="contentPresenter" 
                                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                                            Content="{TemplateBinding Content}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="BorderBrush" Value="#007ACC"/>
                        <Setter Property="BorderThickness" Value="1"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Setter Property="BorderThickness" Value="0"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The button works and displays properly, but when I check/click it, the border does not get displayed.

I implement this style like

<ToggleButton Grid.Column="0"
    Style="{StaticResource InfoToggleButton}" 
    IsChecked="{Binding IsDisplayingBetInfo, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
    Content="{Binding BetInfoIconSource}"/>

How can I get a simple toggle button with border?

Thanks for your time.

Answer 1

you have to assign a name at the Border tag like in this way

<Border x:Name="MyBorderName"...

then the you have to assign the TargetName at the property. Example

<Setter TargetName="MyBorderName" Property="BorderBrush" Value="#007ACC"/>
<Setter TargetName="MyBorderName" Property="BorderThickness" Value="1"/>

Otherwise WPF does not know who to assign the Property BorderBrush and BorderThickness

Answer 2

I've figured out the problem and the solution but don't exactly know why it happens.
Problem: Some value other than {x:Null} must be set as the content of the toggle button. Solution: However, a blank string can be set as the content.
My reasoning: When no content is set, the ContentPresenter is null and thus cannot be clicked.

The problem can be solved by setting the default content to "" like this:

<Style x:Key="InfoToggleButton"
     TargetType="{x:Type ToggleButton}">
        <Setter Property="Background" Value="#EEEEF2"/>
        <Setter Property="Content" Value=""/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Border CornerRadius="0" 
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentPresenter x:Name="contentPresenter" 
                                        ContentTemplate="{TemplateBinding ContentTemplate}" 
                                        Content="{TemplateBinding Content}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="BorderBrush" Value="#007ACC"/>
                            <Setter Property="BorderThickness" Value="1"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="BorderBrush" Value="Transparent"/>
                            <Setter Property="BorderThickness" Value="0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>