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