WPF按钮鼠标悬停时如何修改图标颜色？

问题描述 #

我有一个包含图标和文本的WPF按钮，默认状态为透明无边框。已实现鼠标悬停时修改边框、背景及文本颜色，但尝试用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>

可行解决方案 #

方案1：使用OpacityMask的正确实现 #

你之前的OpacityMask用法有误，正确逻辑是让图标作为遮罩，通过修改Image的背景色来实现视觉上的图标变色，同时绑定按钮的IsMouseOver状态触发变化：

<Button HorizontalAlignment="Center" VerticalAlignment="Top" Padding="6">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Image Width="32" Height="32">
            <Image.Style>
                <Style TargetType="Image">
                    <!-- 默认状态：背景色与按钮文本一致，图标作为遮罩 -->
                    <Setter Property="Background" Value="#535353"/>
                    <Setter Property="OpacityMask">
                        <Setter.Value>
                            <ImageBrush ImageSource="Resources/icon-shape.png"/>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <!-- 绑定按钮的鼠标悬停状态 -->
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                            <Setter Property="Background" Value="Green"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        <Label Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}">Hello World</Label>
    </StackPanel>
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#535353"/>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#CDEAF7"/>
                    <Setter Property="BorderBrush" Value="#98D5ef"/>
                    <Setter Property="Foreground" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

方案2：矢量图标绑定按钮前景色 #

如果你的图标是矢量格式（或可转为XAML路径），可以将图标定义为Drawing资源，直接绑定按钮的Foreground属性，实现颜色同步：

1. 先在窗口资源中定义矢量图标：

<Window.Resources>
    <DrawingImage x:Key="IconShape">
        <DrawingImage.Drawing>
            <GeometryDrawing Brush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}">
                <!-- 替换为你图标的路径数据，可从SVG转成XAML路径 -->
                <GeometryDrawing.Geometry>
                    <PathGeometry Figures="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 26c-6.63 0-12-5.37-12-12S9.37 4 16 4s12 5.37 12 12-5.37 12-12 12zm-1-7h2v-2h-2v2zm0-4h2V7h-2v10z"/>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
        </DrawingImage.Drawing>
    </DrawingImage>
</Window.Resources>

2. 修改按钮内的Image控件：

<Image Source="{StaticResource IconShape}" Width="32" Height="32"/>

此时按钮Foreground变化时，图标颜色会自动同步，无需额外触发器处理。

方案3：用ColorMatrixEffect修改位图颜色 #

如果必须使用位图图标，可通过ColorMatrixEffect动态调整颜色，绑定按钮的IsMouseOver状态：

<Button HorizontalAlignment="Center" VerticalAlignment="Top" Padding="6">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Image x:Name="MyImage" Source="Resources/icon-shape.png" Width="32" Height="32">
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Effect">
                        <Setter.Value>
                            <!-- 默认颜色对应#535353的矩阵参数 -->
                            <ColorMatrixEffect>
                                <ColorMatrixEffect.ColorMatrix>
                                    <ColorMatrix Matrix="0.3255 0 0 0 0
                                                       0 0.3255 0 0 0
                                                       0 0 0.3255 0 0
                                                       0 0 0 1 0"/>
                                </ColorMatrixEffect.ColorMatrix>
                            </ColorMatrixEffect>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <!-- 悬停时绿色对应的矩阵参数 -->
                                    <ColorMatrixEffect>
                                        <ColorMatrixEffect.ColorMatrix>
                                            <ColorMatrix Matrix="0 0 0 0 0
                                                               1 1 1 0 0
                                                               0 0 0 0 0
                                                               0 0 0 1 0"/>
                                        </ColorMatrixEffect.ColorMatrix>
                                    </ColorMatrixEffect>
                                </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">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#535353"/>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#CDEAF7"/>
                    <Setter Property="BorderBrush" Value="#98D5ef"/>
                    <Setter Property="Foreground" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

注：ColorMatrix的参数需根据目标颜色计算，公式为颜色通道值/255，比如绿色G通道为255，对应系数为1。

内容的提问来源于stack exchange，提问作者Michael Foster