WPF - TextBox style remains default settings when Triggers fire

Question

I have this Dynamic Resource to set my TextBox's styles:

<Style x:Key="TextBoxStyle" TargetType="TextBox">
    <Setter Property="FontSize" Value="30"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="FontFamily" Value="CenturyGothicRegual"/>
    <Setter Property="Foreground" Value="#FF5B5B5B"/>
    <Setter Property="Opacity" Value="1"/>
    <Setter Property="BorderBrush" Value="#FF5B5B5B"/>
    <!--<Setter Property="FocusVisualStyle">
        <Setter.Value>
            <Style x:Name="ActiveStyle" TargetType="{x:Type TextBox}">
                <Setter Property="BorderBrush" Value="Black"/>
            </Style>
        </Setter.Value>
    </Setter>-->
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="10"/>
        </Trigger>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="BorderBrush" Value="Pink" />
            <Setter Property="BorderThickness" Value="15"/>
        </Trigger>
    </Style.Triggers>
</Style>

And the textbox that uses it:

<TextBox Grid.Row="2" Grid.Column="1" Margin="2,2,2,2" Style="{DynamicResource TextBoxStyle}"
         FontSize="30" Text="asdasd" HorizontalContentAlignment="Left" VerticalContentAlignment="Center"
         FocusVisualStyle="{StaticResource TextBoxStyle}">
</TextBox>

Again the problem is that when I hover over my mouse or click in the textbox, the border gets the default blueish colour. However the borderthickness does change when I set them (ugly that way but needed to debug). So how to get around this issue?

Answer 1

You need to override the ControlTemplate of the Button because there is a trigger in the default template that sets the BorderBrush property to a hardcoded value on mouse over:

<Style x:Key="TextBoxStyle" TargetType="TextBox">
    <Setter Property="FontSize" Value="30"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="FontFamily" Value="CenturyGothicRegual"/>
    <Setter Property="Foreground" Value="#FF5B5B5B"/>
    <Setter Property="Opacity" Value="1"/>
    <Setter Property="BorderBrush" Value="#FF5B5B5B"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="10"/>
        </Trigger>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="BorderBrush" Value="Pink" />
            <Setter Property="BorderThickness" Value="15"/>
        </Trigger>
    </Style.Triggers>
</Style>