Question

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

这是应用的样式：

<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开发一样，每当在不同版本的Microsoft Windows（Win7，Win8，Win10等）上运行应用程序时，每个控件都会看到不同的显示

如果要摆脱此更改，则必须为每个控件重写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>

鼠标悬停时更改按钮的背景

2 个答案: