使用 MahApps，我们如何更改 Expander 的 ToggleButton 的 MouseOver 样式？

问题描述

我的 WPF 使用 MahApps metro 框架。如下图 2 所示，将鼠标悬停在应用的任何 Expander 控件的标题上会使标题的 ToggleButton 几乎不可见。

问题：我们怎样才能让这个切换按钮更加突出？

XAML：

<!-- ... -->
<Expander Header="Test expander" Width="145" Padding="0">
     <StackPanel>
          <Button Content="Button 1" Foreground="White"/>
          <Button Content="Button 2" Foreground="White"/>
     </StackPanel>
</Expander>
<!-- ... -->

在标题上没有鼠标悬停显示上述扩展器：

鼠标悬停在标题上时显示上述扩展器：

如您所见，左侧的 ToggleButton 几乎不可见。

解决方法

Expander 控件有 4 种不同的样式，分别用于向上、向下、向左和向右方向。它们都使用 triggers in the repective control templates 以相同的方式定义 Mouse Over 状态。

<ControlTemplate.Triggers>
    <!-- ... -->
    <Trigger Property="IsMouseOver" Value="true">
        <Setter TargetName="Arrow" Property="Stroke" Value="{DynamicResource MahApps.Brushes.Gray2}" />
        <Setter TargetName="Circle" Property="Stroke" Value="{DynamicResource MahApps.Brushes.Gray2}" />
    </Trigger>
    <!-- ... -->
</ControlTemplate.Triggers>

如您所见，setter 使用 MahApps.Brushes.Gray2 直接分配 DynamicResource。它们不绑定到任何属性或设置在样式中，因此几乎没有选项可以更改它，例如：

• 通过复制默认样式并调整鼠标悬停触发器，为 MahApps.Styles.ToggleButton.ExpanderHeader.Down（以及任何面向不同的 Expander）创建自定义样式。

• 使用不同的画笔覆盖 MahApps.Brushes.Gray2 或创建自定义主题。

  <SolidColorBrush x:Key="MahApps.Brushes.Gray2" Color="Black"/>
  

  您可以在应用程序资源字典中覆盖此画笔。但是，这不仅会影响 Expander 控件，还会影响使用此画笔的所有控件。如果您在 Expander 资源中重新定义画笔，它将同样应用于其所有子级。