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.
