WPF: How to make a glow effect for shapes like OuterGlowBitmapEffect did?

Question

1.00/5 (2 votes)

See more:

Goal: To create a glow effect around a shape.
Problem: OuterGlowBitmapEffect is obsolete.
Question: How to get the same effect (i prefer shapes over visual drawing)?
Note: DropShadowEffect and BlurEffect don't work.
I tried:
My next code works, but it has a problem: it draws by black color to get the effect.
I can do the same thing in Windows Forms by drawing transparent color instead of black to solve the problem.
Drawing by black loses transparency and that is why when i overlay it on other shapes/images, i see black background instead of transparent.
Code:

C#

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.Loaded += MainWindow_Loaded;
    }

    Canvas canvas;

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        canvas = new Canvas();
        canvas.Background = Brushes.Black;
        this.Content = canvas;

        Shape();
    }

    private void Shape()
    {
        Color color = Colors.White;
        double add = 255 / 20;
        color.A += (byte)add;

        for (int i = 20; i > 0; i--)
        {
            Line WhiteLine = new Line();
            WhiteLine.Stroke = new SolidColorBrush(color);
            WhiteLine.StrokeThickness = i;
            WhiteLine.X1 = 10;
            WhiteLine.Y1 = 10;
            WhiteLine.X2 = 100 + 10;
            WhiteLine.Y2 = 100 + 10;

            Line BlackLine = new Line();
            BlackLine.Stroke = Brushes.Black;
            BlackLine.StrokeThickness = i;

            BlackLine.X1 = 10;
            BlackLine.Y1 = 10;
            BlackLine.X2 = 100 + 10;
            BlackLine.Y2 = 100 + 10;

            canvas.Children.Add(BlackLine);
            canvas.Children.Add(WhiteLine);

            color.A += (byte)add;
        }
    }
}

Posted 13-Jul-15 4:06am

Ziya1995

Updated 25-Jul-15 21:40pm

v4

Add a Solution

Comments

Sergey Alexandrovich Kryukov 15-Jul-15 11:04am

The MSDN help on OuterGlowBitmapEffect says that you can use non-obsolete BlurEffect instead:
https://msdn.microsoft.com/en-us/library/system.windows.media.effects.outerglowbitmapeffect%28v=vs.110%29.aspx,
https://msdn.microsoft.com/en-us/library/system.windows.media.effects.blureffect%28v=vs.110%29.aspx.

Why BlurEffect does not work? As I already said in my other comment, you need to describe exactly and formally what rendering you want to achieve and what goes wrong.

—SA

Ziya1995 20-Jul-15 14:57pm

The problem here is you, but as i said i will continue to repeat it in different forms until you understand however you could get it just by reading my question here.
You just like repeat some rubbish without checking it whether it works or not hoping it will work.

> you need to describe exactly and formally
I gave a code piece you can run in WPF to see what it renders to understand what i want.

> Why BlurEffect does not work?
BlurEffect has completely a different goal from OuterGlowBitmapEffect.
But you don't believe me and you also don't know what does it do, but no problem - you can just check BlurEffect and see what happens and if you can achieve the effect described here in some magic way, you can save me from trouble i am in.

You can continue repeating some rubbish and giving lots of answers i don't need for just like now you answered BlurEffect without even checking it yourself just hoping for some "magic".

You can hate my demand, don't like how i demand and blah blah but the problem: you have not answered a pretty good described question on the forum and it is -1 to you.

If you wanna just solve the problem in just a few minutes, you can miss the thread.
I hope next time you will answer my question better)

Meanwhile i am trying to get the needed effect and when i find it and post it.

Sergey Alexandrovich Kryukov 20-Jul-15 15:10pm

Did you ever responded to my suggestion on using an alpha channel? I don't think so.

You don't understand: I did not claim I answered.

You don't understand some things: you are the one who is interested the most; you are not doing anyone a favor by explaining anything; and no one is obliged to help you. If I had a final solutions, I would post a formal answer. You don't need to "continue to repeat in different forms until..." anything. Your sentiments on hatred and -1 are just ridiculous. If you badly want to solve the problem, go ahead. How can you blame others if you did not solve it? You could write your demanding claim is someone claimed the solution. If you don't want to listen to my suggestions, don't, not a bid deal.

—SA

Ziya1995 21-Jul-15 3:00am

> If you don't want to listen to my suggestions
Make you suggestions, i listen.

> you are not doing anyone a favor by explaining anything
As i understand you didn't understand something out the question, ask your questions and i answer.

> Did you ever responded to my suggestion on using an alpha channel? I don't think so.
The code given in this thread in the question uses the alpha channel and this tech is what i use to create the needed effect in Windows Forms and now trying to do the same in WPF.
I did not respond, sorry, but now you can be sure - using alpha channel is the major part, the problem comes at other stages.

Next?

I also note i am pretty close to get the effect.

Sergey Alexandrovich Kryukov 21-Jul-15 3:03am

Thank you for answering my question. Next? No, I think it's enough.
—SA

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ziya1995 · Accepted Answer · 2015-07-26T22:57:00

Solution 1: To glow shapes using clip and alpha channel.
Con: Empty points appear at complex shapes.

You can play with the next code lines to make it better:

C#

RenderOptions.SetEdgeMode(canvas, EdgeMode.Aliased);
            canvas.RenderTransform = new MatrixTransform(
                PresentationSource.FromVisual(this).CompositionTarget.TransformFromDevice);

Code:

C#

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += MainWindow_Loaded;
    }

    Canvas canvas;

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        canvas = new Canvas();
        canvas.Background = Brushes.Black;
        this.Content = canvas;

        RenderOptions.SetEdgeMode(canvas, EdgeMode.Aliased);
        canvas.RenderTransform = new MatrixTransform(
            PresentationSource.FromVisual(this).CompositionTarget.TransformFromDevice);

        Glow();
    }

    Geometry GetGeometry()
    {
        Path path = new Path();
        path.Data = Geometry.Parse("M 50 50 200 50 125 200 Z");
        return path.Data;
    }

    private void Glow()
    {
        int thickness = 30;
        Color color = Colors.White;
        byte add = (byte)(255 / thickness);
        Geometry geom = GetGeometry();

        for (int i = thickness; i > 0; )
        {
            color.A += add;

            Geometry geom1 = geom.GetWidenedPathGeometry(new Pen(Brushes.Transparent, i--)).GetOutlinedPathGeometry();
            Geometry geom2 = geom.GetWidenedPathGeometry(new Pen(Brushes.Transparent, i)).GetOutlinedPathGeometry();

            GeometryGroup GG = new GeometryGroup();
            GG.Children.Add(geom1);
            GG.Children.Add(geom2);

            Path path = new Path();
            path.Data = GG;
            path.Fill = new SolidColorBrush(color);

            canvas.Children.Add(path);
        }
    }
}

Ziya1995 · Accepted Answer · 2015-07-27T01:06:00

Solution 2: To glow shapes by layering background color with alpha channel.

Note: You can use any out the next code piece, but SnapsToDevicePixels is not recommended to use:
RenderOptions.SetEdgeMode(canvas, EdgeMode.Aliased);
RenderOptions.SetBitmapScalingMode(canvas, BitmapScalingMode.NearestNeighbor);
canvas.SnapsToDevicePixels = true; // is not recommended to use.
canvas.UseLayoutRounding = true;

Code:

C#

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.Loaded += MainWindow_Loaded;
    }

    Canvas canvas;

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        canvas = new Canvas();
        canvas.Background = Brushes.Black;
        this.Content = canvas;

        /*
        RenderOptions.SetEdgeMode(canvas, EdgeMode.Aliased);
        RenderOptions.SetBitmapScalingMode(canvas, BitmapScalingMode.NearestNeighbor);
        canvas.SnapsToDevicePixels = true; // not recomendded
        canvas.UseLayoutRounding = true;
        */
        // Works

        Glow();
    }

    Geometry GetGeometry()
    {
        Path path = new Path();
        path.Data = Geometry.Parse("M 50 50 200 50 125 200 Z");
        return path.Data;
    }

    private void Glow()
    {
        int thickness = 30;
        Color color = Colors.White;
        byte add = (byte)(255 / thickness);

        Geometry geom = GetGeometry();

        for (int i = thickness; i > 0; )
        {
            color.A += add;

            Geometry geom1 = geom.GetWidenedPathGeometry(new Pen(Brushes.Transparent, i--)).GetOutlinedPathGeometry();

            {
                Path path = new Path();
                path.Data = geom1;
                path.Fill = Brushes.Black;

                canvas.Children.Add(path);
            }

            {
                Path path = new Path();
                path.Data = geom1;
                path.Fill = new SolidColorBrush(color);

                canvas.Children.Add(path);
            }
        }
    }
}