如何使用DX合成器模糊部分图像？

Question

如何使用DX Compositor在UWP应用中模糊图像的矩形部分（ Windows.UI.Xaml.Controls.Image ）？

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);