如何在鼠标悬停在图像按钮上时更改图像按钮的颜色？

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>

如何在鼠标悬停在图像按钮上时更改图像按钮的颜色？

How to change color of an image button when the mouse is over it?

data-binding

wpf

xaml

material-design-in-xaml