如何在鼠标悬停时修改通过DrawingImage插入的MenuItem图标颜色

要实现鼠标悬停时将图标颜色从红色改为白色，关键是让图标颜色能响应MenuItem的状态变化，具体可以通过绑定+触发器的方式实现：

修改步骤： #

1. 将GeometryDrawing的Brush属性绑定到MenuItem的Foreground属性，让图标颜色跟随前景色变化；
2. 在样式中设置默认Foreground为红色，同时添加鼠标悬停触发器，将Foreground改为白色。

修改后的完整MenuIcon样式代码： #

<Style x:Key="MenuIcon" TargetType="{x:Type MenuItem}">
    <Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}"/>
    <!-- 默认前景色为红色，图标继承该颜色 -->
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="Icon">
        <Setter.Value>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing 
                        Geometry="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z"
                        <!-- 绑定到MenuItem的Foreground属性 -->
                        Brush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=MenuItem}}"/>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Setter.Value>
    </Setter>
    <!-- 鼠标悬停触发器 -->
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="White"/>
            <!-- 可选：如果需要同时修改菜单项背景，可以添加此行 -->
            <!-- <Setter Property="Background" Value="#404040"/> -->
        </Trigger>
    </Style.Triggers>
</Style>

原理说明： #

• 通过绑定Brush到MenuItem.Foreground，图标颜色会和菜单项前景色保持同步；
• 利用Style.Triggers监听IsMouseOver状态，当鼠标悬停时自动修改Foreground为白色，图标颜色随之切换。

你的MenuItemControlTemplate1不需要额外修改，保持原有代码即可。

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