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?

Any image that needs to be resized will looking slightly blurry. https://stackoverflow.com/questions/19302061/resize-image-in-xaml-without-losing-quality — Hans Passant, Jun 14 '19 at 13:38
That's not the root problem, remove the animation code and it looks less blurry. — Maximus, Jun 14 '19 at 16:09

score 1 · Accepted Answer · edited Jun 17 '19 at 05:48

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,
};

edited Jun 17 '19 at 05:48

Nico Zhu

32,367
2
15
36

answered Jun 16 '19 at 06:31

Weissu

409
3
15

Yup, that was the fix! Wow, I didn't expect that strange behavior. Thanks!! – Maximus Jun 17 '19 at 13:48

score 0 · Answer 2 · answered Jul 12 '19 at 21:45

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

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

2 Answers2