How to change the color of an Icon inserted using DrawingImage-CodePudding

I want to change the color of an icon on mouse hover. This icon is to be used in the root menu item. The code I am using is:

<Style x:Key="MenuIcon" TargetType="{x:Type MenuItem}">
    <Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}"/>
    <Setter Property="Icon">
        <Setter.Value>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing Geometry="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z"
                                     Brush="Red"/>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Setter.Value>
    </Setter>
</Style>

I want to change the color of Brush from Red to White on mouse hover. How to achieve this?

MenuItemControlTemplate1 used in the above style is as follows:

<ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
            <Border x:Name="templateRoot" 
                BorderBrush="#535353" 
                CornerRadius="3" 
                BorderThickness="1" 
                Background="{TemplateBinding Background}" 
                SnapsToDevicePixels="True">
                <Grid VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Source="{TemplateBinding Icon}"/>
                    <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    <Popup x:Name="PART_Popup"  AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" HorizontalOffset="-2">
                        <Border x:Name="SubMenuBorder" BorderBrush="#595959" BorderThickness="1" Background="#3A3A3A" Padding="2">
                            <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                <Grid RenderOptions.ClearTypeHint="Enabled">
                                    <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                        <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                                    </Canvas>
                                    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                                </Grid>
                            </ScrollViewer>
                        </Border>
                    </Popup>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSuspendingPopupAnimation" Value="True">
                    <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
                </Trigger>

                <Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
                    <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
                    <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

CodePudding user response：

<Style x:Key="MenuIcon" TargetType="{x:Type MenuItem}">
    <Setter Property="Icon">
        <Setter.Value>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing Geometry="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z" Brush="Red"/>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=MenuItem}, Path=IsMouseOver}" Value="True">
            <Setter Property="Icon">
                <Setter.Value>
                    <DrawingImage>
                        <DrawingImage.Drawing>
                            <GeometryDrawing Geometry="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z" Brush="White"/>
                        </DrawingImage.Drawing>
                    </DrawingImage>
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

Instead of TargetType="{x:Type MenuItem}"
You need to put the parent of the MenuItem. For example, if your situation is like this:

<Grid>
    <MenuItem Style="{StaticResource MenuIcon}"/>
</Grid>

So do this:

<Style.Triggers>
    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=IsMouseOver}" Value="True">
        <Setter Property="Icon">
            <Setter.Value>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <GeometryDrawing Geometry="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z" Brush="White"/>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Setter.Value>
        </Setter>
    </DataTrigger>
</Style.Triggers>