Quantcast
Channel: Windows Presentation Foundation (WPF) forum
Viewing all articles
Browse latest Browse all 18858

How to create a glow effect in WPF?

$
0
0

Goal: To create a glow effect around any geometry.

Problem: OuterGlowBitmapEffect is deprecated.

Workaround: I layer one geometry using GetWidenedPathGeometry with decreasing values using alpha channel with decreasing values  to form a glow.

Problem: Geometry excluding produces artifacts.

Notes:

1. EdgeMode must be Aliased.

2. I used RenderTransform to render in device dependent pixels and it still doesn't make it ideal.

3. BlurEffect and DropShadowEffect are not solutions.

Question: How can i get a glow effect in WPF?

Code:

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

            this.Loaded += delegate
            {
                this.KeyDown += MainWindow_KeyDown;

                canvas = new Canvas();
                this.Content = canvas;

                RenderOptions.SetEdgeMode(canvas, EdgeMode.Aliased);

                //canvas.RenderTransform = new MatrixTransform(
                //PresentationSource.FromVisual(this).CompositionTarget.TransformFromDevice);

                canvas.Background = Brushes.Black;
                canvas.MouseLeftButtonDown += (sender, e) =>
                {
                    down = true;

                    lines = new Polyline();
                    lines.Stroke = Brushes.White;
                    canvas.Children.Add(lines);
                };

                canvas.MouseUp += delegate { down = false; };
                canvas.MouseMove += canvas_MouseMove;
            };
        }

        Canvas canvas;
        Polyline lines;
        List<LineGeometry> linegeoms = new List<LineGeometry>();
        bool down;
        double thickness = 30;

        void canvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (down)
                lines.Points.Add(new Point(e.GetPosition(canvas).X, e.GetPosition(canvas).Y));
        }

        int add = 1;

        void MainWindow_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Up)
                thickness += add;

            if (e.Key == Key.Down)
                thickness -= add;

            if (thickness <= 0)
                thickness = 1;

            Light();
        }

        void Light()
        {
            canvas.Children.Clear();

            Geometry linesgeom = this.lines.RenderedGeometry;

            Color color = Colors.White;
            double add = 255D / (thickness);

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

                Geometry geom1 = linesgeom.GetWidenedPathGeometry(new Pen(Brushes.Transparent, i--)).GetOutlinedPathGeometry();
                Geometry geom2 = linesgeom.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);
            }
        }
    }

Using:

Draw using "Mouse" or "Touch".

Use arrow keys "Up" and "Down" to control the thickness.

Artifact snapshot (you can see a small empty black point on the glow):


Viewing all articles
Browse latest Browse all 18858

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>