在 `IsMouseOver` 上更改 `ResourceDirectory` 中的按钮样式

Question

我有一个按钮样式与 ResourceDirectory 挂钩，就像这样

<Button x:Name="btnPO_Manager" Height="23" Content="PO Manager" Click="Menu_Button" Style="{StaticResource button_Menu}" />

这是我的 ResourceDirectory Style

<Color x:Key="color_BaseFont">Black</Color>
<Color x:Key="color_MajorFont">#d8b243</Color>
<Color x:Key="color_MinorFont">#a01e21</Color>
<Color x:Key="color_MajorBackground">Black</Color>
<Color x:Key="color_MinorBackground">#FF272727</Color>


<SolidColorBrush x:Key="brush_BaseFont" Color="{StaticResource color_BaseFont}"/>
<SolidColorBrush x:Key="brush_MajorFont" Color="{StaticResource color_MajorFont}"/>
<SolidColorBrush x:Key="brush_MinorFont" Color="{StaticResource color_MinorFont}"/>
<SolidColorBrush x:Key="brush_MajorBackground" Color="{StaticResource color_MajorBackground}"/>
<SolidColorBrush x:Key="brush_MinorBackground" Color="{StaticResource color_MinorBackground}"/>


<Style BasedOn="{StaticResource {x:Type Button}}"
       TargetType="Button"
       x:Key="button_Menu">
   <Setter Property="FontSize" Value="10"/>
   <Setter Property="Foreground" Value="{StaticResource brush_MajorFont}"/>
   <Setter Property="Background" Value="{StaticResource brush_MinorBackground}"/>

   <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Foreground" Value="{StaticResource brush_MinorFont}"/>
         <Setter Property="Background" Value="{StaticResource brush_MajorBackground}"/>
      </Trigger>
   </Style.Triggers>

</Style>

除触发器背景属性外，这一切都很好用。鼠标悬停时前景发生变化，但背景保持默认 blue/gray 颜色。

我尝试将默认颜色移至 IsMouseOver = False，但结果相同。除鼠标悬停背景外一切正常。

<Style.Triggers>
   <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Foreground" Value="{StaticResource brush_MinorFont}"/>
      <Setter Property="Background" Value="{StaticResource brush_MajorBackground}"/>
   </Trigger>
   <Trigger Property="IsMouseOver" Value="False">
      <Setter Property="Foreground" Value="{StaticResource brush_MajorFont}"/>
      <Setter Property="Background" Value="{StaticResource brush_MinorBackground}"/>
   </Trigger>
</Style.Triggers>

为什么会这样，我该如何解决？任何帮助将不胜感激。

Answer 1

您的按钮样式未显示正确的背景颜色，因为它未绑定到控件模板的 鼠标悬停[=] 中父按钮的 Background 属性 23=] 状态，它使用静态引用的颜色。

要更改此设置，您必须更改控件模板。请注意，控件模板很复杂。它们需要特定的部件和状态才能正常工作，您可以找到它们 in the documentation.

最简单的方法是 extract the default control template 使用 Blend 或 Visual Studio 并根据您的需要进行调整。以下是根据您的自定义颜色调整的默认模板。

<Style x:Key="button_Menu_FocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/> <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/> <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/> <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/> <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/> <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/> <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/> <Style x:Key="button_Menu" TargetType="{x:Type Button}"> <Setter Property="FocusVisualStyle" Value="{StaticResource button_Menu_FocusVisual}"/> <Setter Property="Background" Value="{StaticResource brush_MinorBackground}"/> <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/> <Setter Property="Foreground" Value="{StaticResource brush_MajorFont}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Padding" Value="1"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border x:Name="border" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true"> <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsDefaulted" Value="true"> <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> </Trigger> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Background" TargetName="border" Value="{StaticResource brush_MajorBackground}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/> <Setter Property="TextElement.Foreground" TargetName="border" Value="{StaticResource brush_MinorFont}"/> </Trigger> <Trigger Property="IsPressed" Value="true"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/> <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

您也可以更改其他默认画笔，或将它们替换为您自己的颜色。

在 `IsMouseOver` 上更改 `ResourceDirectory` 中的按钮样式

Changing Style of button in `ResourceDirectory` on `IsMouseOver`

wpf

xaml

controltemplate