WPF blurred opacity mask and a scale layout transform

Question

In WPF, I have an image that I am trying to apply a blurred opacity mask with the following code:

            var target = new DrawingVisual
            {
                Effect = new BlurEffect
                {
                    Radius = 50
                }
            };

            using (var targetDC = target.RenderOpen())
                targetDC.DrawGeometry(Brushes.White, null, new RectangleGeometry(new Rect(image.RenderSize)));

            image.OpacityMask = new VisualBrush(target)
            {
                Transform = new ScaleTransform(0.75, 0.75, image.RenderSize.Width / 2, image.RenderSize.Height / 2)
            };

which achieves the desired effect

However, when applying the following LayoutTransform to the image:

        <Image.LayoutTransform>
            <ScaleTransform ScaleX="5" ScaleY="5" CenterX=".5" CenterY=".5" />
        </Image.LayoutTransform>

I get a very different result

How can I make it so that the blur effect seems consistent after scaling?

Answer 1

Not sure what exactly goes wrong with your OpacityMask. Something like this should scale as desired:

<Image Source="...">
    <Image.OpacityMask>
        <VisualBrush>
            <VisualBrush.Visual>
                <Rectangle Fill="Black" Width="10" Height="10">
                    <Rectangle.Effect>
                        <BlurEffect Radius="1"/>
                    </Rectangle.Effect>
                </Rectangle>
            </VisualBrush.Visual>
        </VisualBrush>
    </Image.OpacityMask>
    <Image.LayoutTransform>
        <ScaleTransform ScaleX="5" ScaleY="5"/>
    </Image.LayoutTransform>
</Image>