Using MarkupExtension to display images in xaml - wpf

Question

I have a Resource (.resx) with a log of svg images in it. Furthermore I use an ImageResource class that can take the byte[] provided by the resource and convert it into an ImageSource Object.
While doing that, I have the possibility to Change the color of the Icon
ImageResource.CreateFromSvg(image, Brushes.Green);
I was searching for an easy way to get these Images into xaml, so I created another static class that creates an Image using the ImageResource class. In xaml I could use
<Image Source={x:Static img:ImageResources.MyGreenIcon}/>
to get the icon. The downside was, that I was not able to choose the color in xaml. So I tried and created a MarkupExtension for that. It takes a byte[] and a Brush as parameters, calls the CreateFromSvg-Method and returns the Image. In Xaml it looks like this
<Image Source={i:Img {x:Static img:SvgResources.TheIcon}, Green}/>
Where SvgResources is the .resx-file the Image is in.
Although this works well, I was not able to change the color at runtime. Because MarkupExtension is not a DependencyProperty I can not use a binding for the color. I tried to use a trigger
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Source" Value="{i:Img {x:Static img:SvgResources.TheIcon}, Blue}" />
</Trigger>
</Style.Triggers>
</Style>
This does not give any error, but just do nothing. So my questions are
How can I reassign the Source of the Image to get another color
Is there a way to use something like a binding to change the color from VM
Is there a way to shorten the {x:Static img:SvgResources.TheIcon to something like svgResource.TheIcon
Edit
I found out, that the Trigger does change the Source if I don't set the source in the control itself, but instead provide a default value in the trigger (IsMouseOver = false). Questions 2 + 3 still remain

Answer 1

Answer to question 2.
You can extend your MarkupExtension to support Binding with MultiValueConverter.
Create simple MultiValueConverter, which will simply call your ImageResource.CreateFromSvg(...);. Values passed to this converter will be image and Brush (static image or brush resolved from Bindings)
In ProvideValue(...) detect is passed value Brush or Binding. If it's Brush create mock Binding for it with this Brush as Source.
If value is Binding - we will use it. Do same for image
Create Multibinding, assign just created MultiValueConverter and add image and brush bindings.
return provided value.
Complete example of Img MarkupExtension:
public class Img : MarkupExtension
{
private readonly object _image;
private readonly object _brush;
public Img(object image, object brush)
{
_image = image;
_brush = brush;
}
public override object ProvideValue(IServiceProvider serviceProvider)
{
var imageBinding = _image is Binding iBinding ? iBinding : new Binding { Source = _image};
var brushBinding = _brush is Binding bBinding ? bBinding : new Binding { Source = _brush };
var binding = new MultiBinding
{
Converter = new ImgValueConverter()
};
binding.Bindings.Add(imageBinding);
binding.Bindings.Add(brushBinding);
return binding.ProvideValue(serviceProvider);
}
private class ImgValueConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
var image = values[0];
var brush = values[1];
return ImageResource.CreateFromSvg(image, brush);
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
Usage example:
<Image Source="{i:Img {x:Static i:SvgResources.TheIcon}, {x:Static Brushes.Yellow}}"/>
<Image Source="{i:Img {x:Static i:SvgResources.TheIcon}, {Binding Brush}}"/>