鼠标悬停时更改按钮的背景[复制]

Question

这个问题在这里已有答案：

• How do you change Background for a Button MouseOver in WPF? 6个答案
• How to remove default mouse-over effect on WPF buttons? 7个答案

当鼠标悬停在两个按钮上时，我必须更改两个按钮的颜色，我已经搜索并遵循了许多教程，但无法使其工作。

这是应用的样式：

<Window.Resources>
    <Style x:Key="btnStyleBase" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Width" Value="42"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Button.Background" Value="Transparent"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="btnStyleClose" TargetType="{x:Type Button}" BasedOn="{StaticResource btnStyleBase}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Button.Background" Value="Red"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

这是实现样式的按钮：

<Button Name="btn1" Style="{StaticResource btnStyleBase}" Click="..." />
<Button Name="btn2" Style="{StaticResource btnStyleClose}" Click="..." />

“IsMouseOver”属性被触发，但即使它可以应用任何其他设置器，按钮的背景也保持默认浅蓝色

Answer 1

默认情况下，WPF控件具有ControlTemplate，该控件在操作系统后台中定义。

与Web Developments一样，每当您在不同版本的Microsoft Windows（Win7，Win8，Win10，...）上运行应用程序时，您将看到每个控件的不同显示

如果要删除此更改，则必须为每个Control重写ControlTemplate。

对于Button您可以使用它（并根据需要进行更改）：[此模板还有颜色更改动画，您可以自定义]

 <Style TargetType="Button" x:Key="ButtonBaseStyle">
     <Setter Property="Padding" Value="12,6"/>
     <Setter Property="BorderThickness" Value="1"/>
 </Style>

 <Style TargetType="Button" x:Key="PrimaryButton" BasedOn="{StaticResource ButtonBaseStyle}">
     <Setter Property="BorderBrush" Value="#2e6da4"/>
     <Setter Property="Background" Value="#337ab7"/>
     <Setter Property="Foreground" Value="#fff"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Button">
                 <Border CornerRadius="4" Name="container" Cursor="Hand" Padding="{TemplateBinding Padding}" 
                         BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"
                         Background="{TemplateBinding Background}">
                     <ContentPresenter ContentSource="{TemplateBinding Content}" 
                         ContentTemplate="{TemplateBinding ContentTemplate}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                     <VisualStateManager.VisualStateGroups>
                         <VisualStateGroup>
                             <VisualState Name="Normal">

                             </VisualState>
                             <VisualState Name="MouseOver">
                                 <Storyboard>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#286090"></ColorAnimation>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#204d74"></ColorAnimation>
                                 </Storyboard>
                             </VisualState>
                             <VisualState Name="Pressed">
                                 <Storyboard>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#204d74"></ColorAnimation>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#122b40"></ColorAnimation>
                                 </Storyboard>
                             </VisualState>
                             <VisualState Name="Disabled">
                                 <Storyboard>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#337ab7"></ColorAnimation>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#2e6da4"></ColorAnimation>
                                     <DoubleAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="Opacity"
                                                      Duration="0:0:0.02" To="0.8"></DoubleAnimation>
                                 </Storyboard>
                             </VisualState>
                         </VisualStateGroup>
                     </VisualStateManager.VisualStateGroups>
                 </Border>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

有像Bootstrap WPF和Material Design WPF这样的开源解决方案，你可以阅读和更改它们。

Answer 2

我认为它正在寻找一个叫做Button的房产，里面有一个叫做Background的儿童房产。将Button.Background改为Background，你应该保持良好状态：

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Transparent"/>
    </Trigger>
</Style.Triggers>