当鼠标在上面时，如何改变图像按钮的颜色？

Question

我创建了一个Button，您可以在下面看到一个图像：

​

​

我使用了以下XAML代码来创建这个Button

<Button Grid.Column="3" Style="{StaticResource MaterialDesignFlatButton}" Padding="0"
        ToolTip="Settings" Width="30"
        IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
    <materialDesign:PackIcon Kind="Cog" Width="32" Height="32" VerticalAlignment="Center" HorizontalAlignment="Center">
        <materialDesign:PackIcon.Style>
            <Style TargetType="materialDesign:PackIcon">
                <Setter Property="Foreground" Value="WhiteSmoke" />
                <Setter Property="Opacity" Value="0.7" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="White" />
                        <Setter Property="Opacity" Value="1" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </materialDesign:PackIcon.Style>
    </materialDesign:PackIcon>
</Button>

我的问题是，只有当鼠标在图标上，而不是在Button上时，图标的颜色才会改变。当鼠标在Button上时，我希望它改变颜色。

如何在我的代码中修复它？

Answer 1

可以使用RelativeSource绑定引用父Button的IsMouseOver属性。

<Style.Triggers>
   <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Value="True">
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Opacity" Value="1" />
   </DataTrigger>
</Style.Triggers>