CODEWITHSUNDEEP
c#wpfblur
Spook
Spook

Reputation: 25927

How to blur drawing using the DrawingContext (WPF)?

MSDN says, that one may apply blur bitmap effect do stuff drawn by the DrawingContext using the PushEffect method. But, both PushEffect and *BitmapEffects are marked as obsolete.

How may I apply blur to what is drawn by the DrawingContext?

Upvotes: 0

Views: 2018

Answers (1)

pushpraj
pushpraj

Reputation: 13679

Here you go

in the constructor of your UserControl set the Effect property to an instance of BlurEffect and that would blur the whole render.

    public UserControl()
    {
        InitializeComponent();
        Effect = new BlurEffect() { Radius = 10 };
    }

Selective Blur

I attempted to achieve selective blur by leveraging RenderTargetBitmap class

I've created an extension method for simplified usage

Extension class

public static class DrawingContextExtension
{
    public static void RenderBlurred(this DrawingContext dc, int width, int height, Rect targetRect, double blurRadius, Action<DrawingContext> action)
    {
        Rect elementRect = new Rect(0, 0, width, height);
        BlurredElement element = new BlurredElement(action)
        {
            Width = width,
            Height = height,
            Effect = new BlurEffect() { Radius = blurRadius }
        };
        element.Arrange(elementRect);
        RenderTargetBitmap rtb = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Default);
        rtb.Render(element);
        dc.DrawImage(rtb, targetRect);
    }

    class BlurredElement : FrameworkElement
    {
        Action<DrawingContext> action;
        public BlurredElement(Action<DrawingContext> action)
        {
            this.action = action;
        }
        protected override void OnRender(DrawingContext drawingContext)
        {
            base.OnRender(drawingContext);
            action(drawingContext);
        }
    }
}

example code

    protected override void OnRender(DrawingContext drawingContext)
    {
        base.OnRender(drawingContext);
        int boxSize = 20;

        Pen pen = new Pen(new SolidColorBrush(Colors.Black), 1);
        for (int i = 0; i < 10; i++)
        {
            for (int j = 0; j < 10; j++)
            {
                Rect targetRect = new Rect(i * boxSize, j * boxSize, boxSize, boxSize);
                if (j % 2 == 0)
                {
                    Rect elementRect = new Rect(0, 0, boxSize, boxSize);
                    double blurRadius = 5;
                    drawingContext.RenderBlurred(boxSize, boxSize, targetRect, blurRadius, dc => dc.DrawRectangle(new SolidColorBrush(Colors.Transparent), pen, elementRect));
                }
                else
                {
                    drawingContext.DrawRectangle(new SolidColorBrush(Colors.Transparent), pen, targetRect);
                }
            }
        }
    }

result

result

in above example rectangles in every odd row is blurred

Upvotes: 4

Related Questions