How to use a DX Compositor to blur part of the image?

Question

How can I blur rectangular part of the image (Windows.UI.Xaml.Controls.Image) in UWP app using DX Compositor?

Answer 1

XAML

<Grid>
    <Image Name="image" Width="100" Height="200" />
    <Grid Name="rectangle" Widht="100" Height="100" />
</Grid>

C#

var blurEffect = new GaussianBlurEffect {
    Name = "Blur",
    BlurAmount = 2f,
    Source = new CompositionEffectSourceParameter("source"),
};

var visual = ElementCompositionPreview.GetElementVisual(rectangle);
var compositor = visual.Compositor;
var effectFactory = compositor.CreateEffectFactory(blurEffect, new[] { "Blur.BlurAmount" });
var effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("source", compositor.CreateBackdropBrush());

var blurSprite = compositor.CreateSpriteVisual();
blurSprite.Size = new Vector2((float)rectangle.Width, (float)rectangle.Height);
blurSprite.Brush = effectBrush;
blurSprite.Offset = new Vector3(0, (float)((image.Height - rectangle.Height) / 2), 0);

ElementCompositionPreview.SetElementChildVisual(image, blurSprite);