C# WPF - How to modify the ToolBar.ButtonStyleKey style

Question

Hello,
I have requirement to show the toolbar button border on mouse Hovering and otherwise hide it. I tried to do the following:

<Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    <Setter Property="Foreground" Value="Blue"/>
    <Setter Property="Control.Background" Value="Transparent" />
    <Setter Property="Control.BorderBrush" Value="Transparent" />
    <Setter Property="Control.BorderThickness" Value="1" />
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Control.BorderBrush"  Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

but it doesn't work as expected. What I expect to happen is that on mouse over the border will turn into red color otherwise will be transparent. Actual result was that it act like in the default behavior with the default colors.
Surely I'm doing something wrong.
Does anyone knows what is it?
Thanks,
Adi Barda

Answer 1

Try the following to override button style identified by the ToolBar.ButtonStyleKey when used inside a ToolBar.

<ToolBar.Resources>
    <Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="{x:Type Button}">
        <Setter Property="Foreground"
           Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Padding" Value="2"/>
        <Setter Property="BorderThickness" Value="4"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
           <Setter.Value>
             <ControlTemplate TargetType="{x:Type Button}">
                 <Border x:Name="Bd"
                    SnapsToDevicePixels="true"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}">
                      <ContentPresenter
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                  </Border>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver" Value="true">
                       <Setter Property="BorderBrush" TargetName="Bd" Value="Orange"/>
                     </Trigger>
                  </ControlTemplate.Triggers>
             </ControlTemplate>
           </Setter.Value>
        </Setter>
    </Style>
</ToolBar.Resources>