How to apply a simple blur effect?

Question

I programm an universal Windows platform app with Visual Studio and I want to get a simple Blur effect on my main grid layout, but I don't know how to apply a GaussianBlurEffect object on my grid. I searched for a long time and I've readed the Microsoft documentation but I don't understand the Visual Layer part. If anyone can give me a little explaination about visuals, it would be nice :)

Sorry if my English is bad, I'm french.

Possible duplicate of [Blur the background of the WPF container](http://stackoverflow.com/questions/7815278/blur-the-background-of-the-wpf-container) — lokusking, Oct 14 '16 at 05:41

Vincent · Answer 1 · 2016-10-17T12:18:02.673

You will find a lot of good samples on the Windows UI DevLabs repository

The idea of Visuals is to provide a low level API (but not as low as DirectX) to handle a lot of GPU accelerated effects on the UI. It allows you to draw what you want or create some effects on the rendering.

Here is a very basic sample to show how to apply a blur effect on a Grid. (It works the same for any other UIElement).

This code is adding a layer over the one used by the XAML renderer to render the grid. This newest layer will apply an effect on top of the image rendered by the XAML renderer.

The XAML of the page:

<Page
x:Class="BlurSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BlurSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="MainGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Rectangle Fill="Red" />
    <Rectangle Fill="Green" Grid.Column="1" />
    <Rectangle Fill="Blue" Grid.Row="1" Grid.Column="1" />
    <Rectangle Fill="Yellow" Grid.Row="1" />
</Grid>

And the code behind:

public sealed partial class MainPage : Page
{
    private CompositionEffectBrush  brush;
    private Compositor              compositor;

    public MainPage()
    {
        this.InitializeComponent();

        MainGrid.SizeChanged    += OnMainGridSizeChanged;

        compositor      = ElementCompositionPreview.GetElementVisual(MainGrid).Compositor;

        // we create the effect. 
        // Notice the Source parameter definition. Here we tell the effect that the source will come from another element/object
        var blurEffect  = new GaussianBlurEffect
        {
            Name        = "Blur",
            Source      = new CompositionEffectSourceParameter("background"),
            BlurAmount  = 100f,
            BorderMode  = EffectBorderMode.Hard,
        };

        // we convert the effect to a brush that can be used to paint the visual layer
        var blurEffectFactory   = compositor.CreateEffectFactory(blurEffect);
        brush                   = blurEffectFactory.CreateBrush();

        // We create a special brush to get the image output of the previous layer.
        // we are basically chaining the layers (xaml grid definition -> rendered bitmap of the grid -> blur effect -> screen)
        var destinationBrush    = compositor.CreateBackdropBrush();
        brush.SetSourceParameter("background", destinationBrush);

        // we create the visual sprite that will hold our generated bitmap (the blurred grid)
        // Visual Sprite are "raw" elements so there is no automatic layouting. You have to specify the size yourself
        var blurSprite          = compositor.CreateSpriteVisual();
        blurSprite.Size         = new Vector2((float) MainGrid.ActualWidth, (float) MainGrid.ActualHeight);
        blurSprite.Brush        = brush;

        // we add our sprite to the rendering pipeline
        ElementCompositionPreview.SetElementChildVisual(MainGrid, blurSprite);
    }

    private void OnMainGridSizeChanged(object sender, SizeChangedEventArgs e)
    {
        SpriteVisual blurVisual = (SpriteVisual) ElementCompositionPreview.GetElementChildVisual(MainGrid);

        if (blurVisual != null)
        {
            blurVisual.Size = e.NewSize.ToVector2();
        }
    }
}

Update: Animation

To animate the blur effect, you will have to do two things:

declare the property you want to animate
create the animation

To declare the property, you will have to change the blurEffectFactory creation. Notice the declaration of the Blur.BlurAmount property :

// we convert the effect to a blur that can be used to paint the visual layer
var blurEffectFactory   = compositor.CreateEffectFactory(blurEffect, new[] { "Blur.BlurAmount" });
brush           = blurEffectFactory.CreateBrush();

Once declared, you can use the Blur.BlurAmount property in any animation you want. Here, I'm declaring a continuous animation of 3 seconds which will blur/unblur the image:

var blurAnimation       = compositor.CreateScalarKeyFrameAnimation();
blurAnimation.InsertKeyFrame(0.0f, 100.0f);
blurAnimation.InsertKeyFrame(0.5f, 0.0f);
blurAnimation.InsertKeyFrame(1.0f, 100.0f);
blurAnimation.Duration  = TimeSpan.FromSeconds(3);
blurAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
brush.StartAnimation("Blur.BlurAmount", blurAnimation);

Do you know how to animate the BlurAmount property ? – Mandragora Oct 14 '16 at 17:12 — Mandragora, Oct 14 '16 at 17:12

How to apply a simple blur effect?

1 Answers1