按钮的背景在鼠标悬停时闪烁或消失

Posted 2021-04-10

我在鼠标悬停效果上为App.xaml文件内的资源字典中的按钮添加了自定义样式。在我的计算机上，它运行正常，但在某些PC上，鼠标悬停时按钮的背景闪烁或消失。

App.xaml代码

      <ResourceDictionary>
            <Style x:Key="btn-danger" TargetType="{x:Type Button}">

                <Setter Property="Background" Value="#d84315" />
                <Setter Property="Foreground" Value="White" />

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" Cursor="Hand">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Border>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#d9534f" />
                        <Setter Property="FontWeight" Value="Bold" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>

如何使用

<Button Style="{StaticResource btn-danger}" Margin="5" Click="Ok_Button_Click" Height="29" Width="100" Content="{Binding Path=Ok, Source={StaticResource Resources}}"/>

答案

必须将触发器放置在template属性下，以正确更改边框背景。尝试如下更改样式定义：

<ResourceDictionary>
  <Style x:Key="btn-danger" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Gray" />                
    <Setter Property="Foreground" Value="White" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" Cursor="Hand">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#d9534f" />                                    
                        <Setter Property="FontWeight" Value="Bold" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>