How to combine multiple effects in UWP Composition API

Question

I want to combine blur, Saturation and tint color.

I have a Blend effect, that consist of GaussianBlur and Tint color.

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
var graphicsEffect = new BlendEffect
{
 Mode = BlendEffectMode.Overlay,
 Background = new GaussianBlurEffect()
 {
 Name = "Blur",
 Source = new CompositionEffectSourceParameter("Backdrop"),
 BlurAmount = 10f
 BorderMode = EffectBorderMode.Hard,
 },
 Foreground = new ColorSourceEffect()
 {
 Name = "Tint",
 Color = Color.FromArgb(120, 255, 255, 255),
 }
};
var effectFactory = _compositor.CreateEffectFactory(graphicsEffect)
_brush = effectFactory.CreateBrush();
_brush.SetSourceParameter("Backdrop", _compositor.CreateBackdropBrush());
_effectSprite = _compositor.CreateSpriteVisual();
_effectSprite.Size = new Vector2((float)this.ActualWidth, (float)this.ActualHeight)
_effectSprite.Brush = _brush;
ElementCompositionPreview.SetElementChildVisual(this, _effectSprite)

How do I add SaturationEffect before or after this effect?

I've tried to wrap it into another BlendEffect and set another BackdropBrush as a source of the SaturationEffect, but I got white background only.

I've also tried to create brush from SaturationEffect and set it a a source of GaussianBlur, but I got exception "Invalid Source Brush"

Answer 1

Here's an example:

(input) Backdrop -> GaussianBlur ->|
 ColorSource ->| Blend -> Saturation (output)

var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
var blurEffect = new GaussianBlurEffect()
{
 Name = "Blur",
 BlurAmount = 0.0f,
 BorderMode = EffectBorderMode.Hard,
 Optimization = EffectOptimization.Balanced,
 Source = new CompositionEffectSourceParameter("source"),
};
var colorEffect = new ColorSourceEffect
{
 Name = "Tint",
};
var blendEffect = new BlendEffect
{
 Background = blurEffect,
 Foreground = colorEffect,
 Mode = BlendEffectMode.Overlay,
};
var saturationEffect = new SaturationEffect
{
 Name = "Saturation",
 Source = blendEffect,
 Saturation = 1.5f,
};
var factory = compositor.CreateEffectFactory(saturationEffect, new[]
{
 "Blur.BlurAmount",
 "Tint.Color",
 "Saturation.Saturation",
});
var brush = factory.CreateBrush();
brush.SetSourceParameter("source", compositor.CreateBackdropBrush());
// Animatable properties
brush.Properties.InsertScalar("Blur.BlurAmount", 10);
brush.Properties.InsertColor("Tint.Color", Color.FromArgb(20, 255, 0, 0));
brush.Properties.InsertScalar("Saturation.Saturation", 1.5f);
var sprite = compositor.CreateSpriteVisual();
sprite.Brush = brush;
sprite.Offset = new Vector3(50, 250, 0);
sprite.Size = new Vector2(200, 200);
ElementCompositionPreview.SetElementChildVisual(this, sprite);

Screenshot

• Sergio0694: This works perfectly, why hasn't it been marked as an answer already?