Change svg fill and brush colour via binding

A useful feature would be to allow the color defined in the svg to be overridden from a xaml binding (or indeed code behind).

Some use cases that come to mind…

• Support ‘hover over’ color changing effect, e.g. allow a binding to be created to change the color when during a mouse over event.
• Support theming, e.g. allow a dark theme to override the default svg color
• Support ‘off the shelf’ svg libraries, e.g. allow a quick way to change a monotone svg (typically black) to something more useful without having to edit the svg.

AFAIK, it’s been discussed elsewhere, e.g. #163, #88.

The following code snippet (heavily based on https://github.com/ElinamLLC/SharpVectors/issues/88#issuecomment-576503027) integrated into SvgViewbox would provide the functionality to override the ‘fill’ and ‘stroke’ brushes. It would need a bit of improvement though to remove the default color brushes mind you.

    public class SvgViewboxEx : SvgViewbox
    {
        public static readonly DependencyProperty FillProperty = DependencyProperty.Register("Fill", typeof(Brush), typeof(SvgViewboxEx), new PropertyMetadata(Brushes.BlueViolet));

        public static readonly DependencyProperty StrokeProperty = DependencyProperty.Register("Stroke", typeof(Brush), typeof(SvgViewboxEx), new PropertyMetadata(Brushes.DarkViolet));

        public Brush Fill
        {
            get => (Brush) GetValue(FillProperty);
            set => SetValue(FillProperty, value);
        }

        public Brush Stroke
        {
            get => (Brush) GetValue(StrokeProperty);
            set => SetValue(StrokeProperty, value);
        }

        protected override void OnSettingsChanged()
        {
            base.OnSettingsChanged();

            var drawings = ((SvgDrawingCanvas) Child).DrawObjects;

            foreach (var drawing in drawings)
            {
                if (drawing is GeometryDrawing geometryDrawing)
                {
                    // svg fill color - translated to a geometry.Brush
                    var brush = new Binding(nameof(Fill))
                                    {
                                        Source = this,
                                        Mode = BindingMode.OneWay
                                    };
                    BindingOperations.SetBinding(geometryDrawing, GeometryDrawing.BrushProperty, brush);

                    // svg stroke color - translated to a geometry.Pen.Brush
                    if (geometryDrawing.Pen != null)
                    {
                        var stroke = new Binding(nameof(Stroke))
                                         {
                                             Source = this,
                                             Mode = BindingMode.OneWay
                                         };
                        BindingOperations.SetBinding(geometryDrawing.Pen, Pen.BrushProperty, stroke);
                    }
                }
            }
        }
    }

At any rate, the above code can be used verbatim for anyone wanting this feature without waiting for an equivalent in SharpVectors.

[r-tmp]

@paulushub Just tested it in a small project (.NET 6), not much to say except that seems to be working as expected 🙂.

[paulushub]

Sorry for the delay, release 1.8.1 is now available.