How to swap SVG Fill Color on MouseOver?

Question

I'm using SharpVectors to embed svg file in my XAML.

Here is my Button ControlTemplate:

And here is an example of creating a button:

What I obtain is a SVG icon with a text inside my button.

Now I'd like to change the background color of my SVG on MouseOver (exactly the same behaviour asked here, the difference is that I do not have a "Fill" tag in my svgc:SvgViewbox.

Is there a way to solve my problem?

Update: My SVG file is a standard SVG, like this:

AnjumSKhan · Accepted Answer

There must be multiple GeomtryDrawing 's in your svg XAML like below :

Search for all such Brush in your code and change their values, thus creating two copies of your SVG XAML, then using Trigger swap these on MouseOver.

EDIT #1 (based on OP's 1st comment)

You can use an AttachedProperty to handle MouseEnter and MouseLeave events for your Path. This AP allows you to set the transparency level. Your Path must be under Grid.

public static byte GetSvgProp(DependencyObject obj)
{
    return (byte)obj.GetValue(SvgPropProperty);
}

public static void SetSvgProp(DependencyObject obj, byte value)
{
    obj.SetValue(SvgPropProperty, value);
}

// Using a DependencyProperty as the backing store for SvgProp.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty SvgPropProperty =
    DependencyProperty.RegisterAttached("SvgProp", typeof(byte), typeof(Window2), new PropertyMetadata((byte)0xFF, new PropertyChangedCallback(SvgPropChanged)));

private static void SvgPropChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{       
    ((Grid)d).Loaded += (s, args) => {

        var paths = ((Grid)s).Children.OfType();
        foreach (Path p in paths)
        {
            p.MouseEnter += (s1, args1) => {
                Path p1 = (Path)s1;
                p1.Tag = p1.Fill; // save old value
                var c = ((SolidColorBrush)p1.Fill).Color;
                Color newColor = new Color() { A=(byte)e.NewValue, R = c.R, G = c.G, B = c.B };
                p1.Fill = new SolidColorBrush() { Color = newColor };
            };
            p.MouseLeave += (s2, args2) => {
                Path p2 = (Path)s2;
                //p2.Fill.Opacity = 1.0;
                p2.Fill = (Brush)p2.Tag; // revert back to old value
            };
        }

    };
}

Assuming your SVG code is in a Grid :

How to swap SVG Fill Color on MouseOver?

Answers (2)

Related Questions