WPF ToggleButton Template BorderBrush

Question

**Edit - I flagged the DynamicResource answer as the answer for this. That resolved the problem I described here. I was still having trouble in my main application and it turned out it was because I was using the brush elsewhere as a StaticResource before using it on my border as a DynamicResource. When I switched everything to DynamicResource it worked correctly. Thanks!

I can't seem to get the BorderBrush to work in a templated ToggleButton. Here's my sample .xaml, if you run this, you'll see that the border becomes transparent when you mouseover or check one of the buttons.

<Window x:Class="ToggleButtonStyle.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ToggleButtonStyle"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <!-- <ResourceDictionary Source="Dictionary1.xaml" /> -->
    <!-- main color of buttons-->
    <Color x:Key="MainThemeColor">Orange</Color>

    <!-- hover-over color for buttons -->
    <Color x:Key="MouseOverColor">Purple</Color>

    <!-- 5. Mouse over background color for step buttons -->
    <SolidColorBrush x:Key="MouseOverBackgroundBrush" Color="{DynamicResource MouseOverColor}"/>

    <!-- 6. Background color active step -->
    <SolidColorBrush x:Key="CheckedBackgroundBrush" Color="{DynamicResource MainThemeColor}"/>

    <Style TargetType="{x:Type ToggleButton}" x:Key="ToggleButtonStyle">
        <Setter Property="Background" Value="White" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="MinWidth" Value="80"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness ="{TemplateBinding BorderThickness}" Padding="5" Margin="2">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource CheckedBackgroundBrush}" />
                <Setter Property="Background" Value="{StaticResource MouseOverBackgroundBrush}" />
                <Setter Property="Foreground" Value="#333333" />
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource MouseOverBackgroundBrush}"/>
                <Setter Property="Background" Value="{StaticResource CheckedBackgroundBrush}" />
                <Setter Property="Foreground" Value="#ffffff"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel Orientation="Horizontal">
        <ToggleButton Style="{DynamicResource ToggleButtonStyle}">Button 1</ToggleButton>
        <ToggleButton Style="{DynamicResource ToggleButtonStyle}">Button 2</ToggleButton>
        <ToggleButton Style="{DynamicResource ToggleButtonStyle}">Button 3</ToggleButton>
    </StackPanel>
</Grid>

Answer 1

Since the Color property of the Brushes are set using the DynamicResource markup extension you should also set the properties in your setter using DynamicResource:

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="BorderBrush" Value="{DynamicResource CheckedBackgroundBrush}" />
        <Setter Property="Background" Value="{DynamicResource MouseOverBackgroundBrush}" />
        <Setter Property="Foreground" Value="#333333" />
    </Trigger>
    <Trigger Property="IsChecked" Value="True">
        <Setter Property="BorderBrush" Value="{DynamicResource MouseOverBackgroundBrush}"/>
        <Setter Property="Background" Value="{DynamicResource CheckedBackgroundBrush}" />
        <Setter Property="Foreground" Value="#ffffff"/>
    </Trigger>
</Style.Triggers>

I you use StaticResource the value of the setters won't be updated once the dynamic color resources have actually been looked up at runtime.

Answer 2

Using a Rectangle seems to work. Take a look at this: DynamicResource color doesn't work for BorderBrush on a Border - Bug?. Doesn't make any sense to me that this should not work.

<Style TargetType="{x:Type ToggleButton}">
        <Setter Property="Background" Value="White" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" Value="{DynamicResource MouseOverBackgroundBrush}"/>
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="MinWidth" Value="80"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Grid>
                        <Rectangle Fill="{TemplateBinding Background}"
                                   Stroke="{TemplateBinding BorderBrush}"
                                   StrokeThickness="{TemplateBinding BorderThickness}" 
                                   Margin="2">
                        </Rectangle>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource CheckedBackgroundBrush}" />
                <Setter Property="Background" Value="{StaticResource MouseOverBackgroundBrush}" />
                <Setter Property="Foreground" Value="#333333" />
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="BorderBrush" Value="{StaticResource MouseOverBackgroundBrush}"/>
                <Setter Property="Background" Value="{StaticResource CheckedBackgroundBrush}" />
                <Setter Property="Foreground" Value="#ffffff"/>
            </Trigger>
        </Style.Triggers>
    </Style>