鼠标悬停在按钮上时按钮颜色不变

Button color not changing when mouse is hovered over the button

我写了下面的 XAML 代码。当鼠标悬停在按钮上时,我添加了样式代码来更改按钮的颜色。但是,尽管将鼠标悬停在按钮上时会出现边框效果,但背景不会变为红色。请指教

<Window.Resources>
                <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
                <Style x:Key="MyButtonStyle" TargetType="Button">
                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Border Name="border" 
                                    BorderThickness="1"
                                    BorderBrush="DarkGray" 
                                    Background="{TemplateBinding Background}">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                                        <Setter Property="Foreground" Value="Red"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
    </Window.Resources>

<Button Style="{StaticResource MyButtonStyle}" Content="Install" Command="{Binding InstallCommand}" Visibility="{Binding InstallEnabled, Converter={StaticResource BooleanToVisibilityConverter}}" Margin="150,30,30,22" Width="118" BorderBrush="#FF252424" FontSize="18" FontWeight="Bold" Foreground="White" FontFamily="Segoe UI Light" FontStretch="ExtraExpanded" Background="#FF4F4F4F"/>

您的代码几乎可以正常工作,请执行以下操作使其完整:

  • 您正在绑定样式,因此无需指定任何其他样式以及按钮,如果需要添加样式。
  • 从按钮标签中删除 BorderBrushForegroundBackground
  • 在setter中添加"Background"属性,然后运行应用程序并查看变化

更改如下所示:

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <!--Sets the initial Foreground color--> 
    <Setter Property="Foreground" Value="White"/>
    <!--Sets the initial Background color-->
    <Setter Property="Background" Value="Gray"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                        BorderThickness="1"                                  
                        Background="{TemplateBinding Background}">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            <ControlTemplate.Triggers>
                   <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                        <Setter Property="Foreground" Value="Red"/>
                        <Setter Property="Background" Value="Green"/>
                   </Trigger>
            </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

按钮控件是这样的:

 <Button Style="{StaticResource MyButtonStyle}" Content="Install"  
    Margin="150,30,30,22" Width="118"  FontSize="18" 
    FontWeight="Bold"  FontFamily="Segoe UI Light" FontStretch="ExtraExpanded"  />