如何更改悬停时按钮图像的颜色

Question

我有一个 WPF 按钮，如下所述。该按钮有简单的图像和文本。该按钮是透明的，没有边框。当我将鼠标悬停在我想要的按钮上的任意位置时

1. 更改边框和背景颜色（工作）

2. 更改文本颜色（工作）

3. 添加效果或过渡来更改图像颜色。你可以看到我尝试使用 OpacityMask 来做到这一点，但没有成功让它发挥作用。 有什么建议或想法吗？

    <Button HorizontalAlignment="Center" VerticalAlignment="Top" Padding="6">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image x:Name="MyImage" Source="Resources/icon-shape.png" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32"></Image>
            <Label Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}">Hello World</Label>
        </StackPanel>
        <Button.Style>
            <Style TargetType="Button">
                <!-- Set default border color -->
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Foreground" Value="#535353"/>
   
                <Style.Triggers>
                    <!-- Trigger for when the mouse is over the button -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#CDEAF7"/>
                        <Setter Property="BorderBrush" Value="#98D5ef"/>
                        <Setter Property="Foreground" Value="Red"/>
                      <!--  <Setter TargetName="MyImage" Property="OpacityMask">
                            <Setter.Value>
                                <SolidColorBrush Color="Green"/>
                            </Setter.Value>
                        </Setter> -->
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
   

我相信 OpacityMask 应该是与图像相同的资源，然后我应该设置图像的背景颜色。但是，这很棘手，因为当我将鼠标悬停在整个按钮上而不仅仅是图像上时，我需要它才能工作。

Answer 1

https://learn.microsoft.com/en-us/dotnet/api/system.windows.setter.targetname?view=netframework-4.8#remarks

您可以将此属性设置为应用 setter 集合（此 setter 所属集合）范围内的任何元素的名称。这通常是包含此设置器的模板内的命名元素。

看这个例子：

    <Button HorizontalAlignment="Center" VerticalAlignment="Top" Padding="6">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image x:Name="MyImage" Source="Resources/icon-shape.png" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32">
                <Image.Style>
                    <Style TargetType="Image">
                        <Style.Triggers>
                            <!-- Trigger for when the mouse is over the button -->
                            <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}}"
                                            Value="True">
                                <Setter Property="OpacityMask">
                                    <Setter.Value>
                                        <SolidColorBrush Color="Green"/>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <Label Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}">Hello World</Label>
        </StackPanel>
        <Button.Style>
            <Style TargetType="Button">
                <!-- Set default border color -->
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Foreground" Value="#535353"/>

                <Style.Triggers>
                    <!-- Trigger for when the mouse is over the button -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#CDEAF7"/>
                        <Setter Property="BorderBrush" Value="#98D5ef"/>
                        <Setter Property="Foreground" Value="Red"/>
                        <!--<Setter TargetName="MyImage" Property="OpacityMask">
                            <Setter.Value>
                                <SolidColorBrush Color="Green"/>
                            </Setter.Value>
                        </Setter>--> 
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>