Composition - Why does my element immediately set a Blur on my animation?

Question

I have the following Xaml for my sample app to demonstrate the issue:

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

    <Border x:Name="MyBorder"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
        <Image Stretch="Uniform"
            Width="165"
            Height="100"
            Source="/Assets/abstract.png" />
    </Border>
</Page>

Here is my code-behind:

using Windows.UI.Composition;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Hosting;

namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.Loaded += MainPage_Loaded;
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            var scalar = Window.Current.Compositor.CreateScalarKeyFrameAnimation();

            scalar.InsertKeyFrame(1.0f, 24f);
            scalar.DelayTime = TimeSpan.FromMilliseconds(1500);
            scalar.Duration = TimeSpan.FromMilliseconds(3000);

            var effect = new GaussianBlurEffect()
            {
                Name = "Blur",
                Source = new CompositionEffectSourceParameter("Backdrop"),
                BorderMode = EffectBorderMode.Hard,
            };

            var effectFactory = Window.Current.Compositor.CreateEffectFactory(effect, new[] { "Blur.BlurAmount" });
            var brush = effectFactory.CreateBrush();
            var sprite = Window.Current.Compositor.CreateSpriteVisual();

            sprite.Brush = brush;
            sprite.Size = new Vector2((float)MyBorder.ActualWidth, (float)MyBorder.ActualHeight);

            ElementCompositionPreview.SetElementChildVisual(MyBorder, sprite);

            var destinationBrush = Window.Current.Compositor.CreateBackdropBrush();
            brush.SetSourceParameter("Backdrop", destinationBrush);

            brush.StartAnimation("Blur.BlurAmount", scalar);
        }
    }
}

When the app runs, it's supposed to wait 1.5 seconds and then start blurring the image. However, when you run the code, the image has an initial blur already set on it (a slight blur). Anyone know why?

Answer 1

Change your code a bit. Try this one. I don't know the reason why need to set BlurAmount to zero but maybe new GaussianBlurEffect has preset this value something else.

var effect = new GaussianBlurEffect()
{
  Name = "Blur",
   Source = new CompositionEffectSourceParameter("Backdrop"),
   BorderMode = EffectBorderMode.Hard,
   BlurAmount = 0,
};

Answer 2

For more information on this issue, the reason it behaved like that and the reason to start with a BlurAmount = 0 as stated in the above answer is because BlurAmount has a default value of 3.0f:

https://microsoft.github.io/Win2D/html/P_Microsoft_Graphics_Canvas_Effects_GaussianBlurEffect_BlurAmount.htm