Search code examples
c#wpfxamlstylescontroltemplate

Button control style changes the background when IsPress=True, but it never changes back to the original color


I have an application default button style defined in a XAML resource dictionary. The ControlTemplate contains a trigger for IsPressed="True", which changes the button background when the button is pressed.

However, after the button is pressed and released, the background set during the IsPressed="True", the background color never changes back to the original background color.

This is in VS 2019 and .NET core v3.1.

The button xaml is:

<Button x:Name="btnHelp" Width="50" Height="25" Content="_Help" Click="btnHelp_Click"  BorderBrush="AliceBlue" Margin="10,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Here is the button style definition in my resource dictionary:

    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="1" />
    <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
    <Setter Property="Background" Value="{DynamicResource ButtonBackgroundBrush}" />
    <Setter Property="BorderBrush" Value="{DynamicResource BaseBorderBrush}" />
    <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border
                    x:Name="outerborder"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    ClipToBounds="True"
                    CornerRadius="{DynamicResource ButtonCornerRadius}">
                    <Grid>
                        <Border
                            Name="glow"
                            Margin="{DynamicResource GlowBorderMargin}"
                            BorderBrush="{DynamicResource ButtonGlowBrush}"
                            BorderThickness="{DynamicResource GlowBorderThickness}"
                            CornerRadius="{DynamicResource ButtonCornerRadius}"
                            Effect="{DynamicResource ButtonHoverGlowEffect}"
                            Visibility="Collapsed" />
                        <ContentPresenter
                            x:Name="content"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            RecognizesAccessKey="True"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" Value="{DynamicResource SelectedBrush}" />
                        <Setter Property="Background" Value="{DynamicResource MenuHoverBrush}" />
                        <!--<Setter TargetName="glow" Property="Visibility" Value="Visible" />-->
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPressedBrush}" />
                        <Setter Property="BorderBrush" Value="{DynamicResource DarkerSelectedBrush}" />
                        <Setter TargetName="glow" Property="Effect" Value="{DynamicResource ButtonPressedGlowEffect}" />
                        <Setter TargetName="glow" Property="Visibility" Value="Visible" />
                    </Trigger>
                    <Trigger Property="IsFocused" Value="True" >
                        <Setter Property="BorderBrush" Value="{DynamicResource SelectedBrush}" />
                        <Setter Property="Background" Value="{DynamicResource MenuHoverBrush}" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter TargetName="outerborder" Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" />
                        <Setter Property="Foreground" Value="{DynamicResource DisabledBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Solution

  • The culprit is the line below in the IsFocused trigger. When you click the Button, it gets focused, so the trigger will set the Background of the button. If you move the focus to another control, e.g. by pressing Tab, the background will change back to normal. Since you use the same background for the Pressed and the Focused state, it appears to be stuck in Pressed state, but is Focused.

    <Setter Property="Background" Value="{DynamicResource MenuHoverBrush}" />
    

    Remove the line from the trigger and your button will work as expected.

    <Trigger Property="IsFocused" Value="True" >
        <Setter Property="BorderBrush" Value="{DynamicResource SelectedBrush}" />
    </Trigger>