Changing the brush color of the button content

In one of my views I have an WPF button that looks like below:

MyView.xaml:

<Button Grid.Column="1"
        Style="{StaticResource HoverOnCloseButton}"
        Background="Transparent"
        BorderBrush="Transparent"
        Command="{Binding CancelBtnCommand}">
    <Button.Content>
        <Image Width="10"
               Height="10"
               MinWidth="10"
               MinHeight="10"
               Stretch="Uniform"
               UseLayoutRounding="True"
               SnapsToDevicePixels="True"
               RenderOptions.BitmapScalingMode="HighQuality"
               Source="{Binding MySettings.CrossIcon, UpdateSourceTrigger=PropertyChanged}"/>
    </Button.Content>
</Button>

The button content is an image which is loaded from a property "CrossIcon" defined and initialized within a class "MySettings" that implements INotifyPropertyChanged:

public class MySettings: INotifyPropertyChanged
{
    public ImageSource CrossIcon { get; private set; }

    public ResourceDictionary ResourceDict { get; set; }

    public MySettings()
    {
        InitializeDictionary();
        this.CrossIcon = ResourceDict["crossDrawingImage"] as DrawingImage;
    }

    private void InitializeDictionary()
    {
            String url = String.Format("pack://application:,,,/myApp;component/Resources/Themes/Dark/MyDictionary.xaml");

            // Load resource dictionary
            ResourceDict = new ResourceDictionary
            {
                Source = new Uri(url, UriKind.RelativeOrAbsolute)
            };

    }
}

The MyDictionary.xaml defines the crossDrawingImage as below:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:core="clr-namespace:System;assembly=mscorlib">

    <DrawingImage x:Key="crossDrawingImage">
        <DrawingImage.Drawing>
            <DrawingGroup ClipGeometry="M0,0 V10 H10 V0 H0 Z">
                <GeometryDrawing Brush="#FF000000" Geometry="F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z" />
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>
</ResourceDictionary>

Now, what I am trying to do is to change the Brush (#FF000000) of the DrawingImage from my view MyView.xaml using the Style bound to the button through a trigger set on IsMouseOver:

        <Style x:Key="HoverOnCloseButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ButtonBase}">
                        <Border Background="{TemplateBinding Panel.Background}"
                                BorderBrush="Transparent"  
                                Name="border"
                                SnapsToDevicePixels="True">
                            <ContentPresenter Name="contentPresenter"
                                              HorizontalAlignment="Center" 
                                              VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                                <Setter Property="Panel.Background" TargetName="border" Value="Red"/>
                                <Setter Property="TextElement.Foreground"
                                        TargetName="contentPresenter">
                                    <Setter.Value>
                                        <SolidColorBrush>#FFFFFF</SolidColorBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

The setter below is not working:

        <Setter Property="TextElement.Foreground"
                TargetName="contentPresenter">
            <Setter.Value>
                <SolidColorBrush>#FFFFFF</SolidColorBrush>
            </Setter.Value>
        </Setter>

So how can I change the brush color of the drawingImage when the mouse is over the button?

ATTEMPT #2:

As explained here, it looks like there is no way to do this, the only possible solution seems to replace the entire DrawingImage by another one, so I have done the following by applying the following changes:

MyDictionary.xaml:
I create the same DrawingImage but with different Bush color.

    <DrawingImage x:Key="crossOnMouseHoverDrawingImage">
        <DrawingImage.Drawing>
            <DrawingGroup ClipGeometry="M0,0 V10 H10 V0 H0 Z">
                <GeometryDrawing Brush="#FFFFFFFF" Geometry="F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z" />
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>
</ResourceDictionary>

In MySettings class i create a new property and I initialize in the constructor in the following way:

    public ImageSource CrossOnMouseHoverIcon { get; private set; }

    public MySettings()
    {
        InitializeDictionary();
        this.CrossIcon = ResourceDict["crossDrawingImage"] as DrawingImage;
        this.CrossOnMouseHoverIcon = ResourceDict["crossOnMouseHoverDrawingImage"] as DrawingImage;
    }

Finally, I modify the Style replacing the trigger for IsMouseOver (for the rest I keep the same):

    <ControlTemplate.Triggers>
        <Trigger Property="UIElement.IsMouseOver" Value="True">
            <Setter Property="Panel.Background" TargetName="border" Value="Red"/>
            <Setter Property="ContentPresenter.ContentSource"
                    TargetName="contentPresenter"
                    Value="{Binding UISettings.CrossOnMouseHoverIcon, UpdateSourceTrigger=PropertyChanged}"/>
        </Trigger>
    </ControlTemplate.Triggers>

But still not working, it does nothing when I hover on the mouse. What am I doing wrong? for sure I am setting the setter wrong, but I am not able to see what is failing.

Maybe because you assign a type of DrawingImage to ContentSource but it should be Image. Try the following implementation of a button

<Button Width="50" Height="50" x:Name="btn" 
            BorderBrush="Transparent">
        <Button.Content>
            <Image Width="10"
           Height="10"
           MinWidth="10"
           MinHeight="10"
           Stretch="Uniform"
           UseLayoutRounding="True"
           SnapsToDevicePixels="True"
           RenderOptions.BitmapScalingMode="HighQuality">
                <Image.Style>
                    <Style TargetType="{x:Type Image}">
                        <Setter Property="Source" Value="{StaticResource blackCrossDrawingImage}"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=btn, Path=IsMouseOver}" Value="True">
                                <Setter Property="Source" Value="{StaticResource redCrossDrawingImage}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </Button.Content>
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ButtonBase}">
                            <Border Background="{TemplateBinding Panel.Background}"
                                    BorderBrush="Transparent"  
                                    Name="border"
                                    SnapsToDevicePixels="True">
                                <ContentPresenter Name="contentPresenter"
                                                  HorizontalAlignment="Center" 
                                                  VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>

and two resources

 <DrawingImage x:Key="redCrossDrawingImage">
    <DrawingImage.Drawing>
        <DrawingGroup ClipGeometry="M0,0 V10 H10 V0 H0 Z">
            <GeometryDrawing Brush="Red" Geometry="F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z">
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="blackCrossDrawingImage">
    <DrawingImage.Drawing>
        <DrawingGroup ClipGeometry="M0,0 V10 H10 V0 H0 Z">
            <GeometryDrawing Brush="Black" Geometry="F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z">
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingImage.Drawing>
</DrawingImage>