Apologies for a bit of a ‘radio silence’ on this blog in recent weeks, I’ve been doing some travelling and other bits and pieces.

Whilst I was away, a mail flooded in from my reader saying;

“Hi,I read your blog and I have a question with blur effect and really need your help.

The main page has a background image and the bottom of the main page is a grid, I want it with blur effect. I have been looking at some answers on stackoverflow,but it seems useless.

Is there a way easily to make it?”

I should say that the title of the mail includes the acronym UWP so this is about UWP rather than, say, WPF.

I think that the UWP Composition APIs can achieve this sort of effect for a UI so I could post an example that did that using those ‘raw’ APIs but I wanted to take this question in a different direction and look into a new thing that has arrived since I last posted on this blog site.

That’s the UWP Community Toolkit. and there’s a video about it over on Channel9 on Robert Green’s excellent Toolbox show;

and if you dig into those resources you’ll find that one of the things that this Toolkit offers to developers is an easier way to do some animations that are powered by the composition APIs.

The Blur animation is powered by the CompositionBackdropBrush from Windows 10 build 1607 so you’d need to be on that target platform to have it do something for you but, otherwise, it should be fine to have a small piece of XAML like this one;

  <Grid
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Image
      Source="ms-appx:///Assets/eva.jpg"
      Stretch="UniformToFill"
      Grid.RowSpan="2">
    </Image>
    <Grid
      Grid.Row="1"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
      xmlns:core="using:Microsoft.Xaml.Interactions.Core">
      <interactivity:Interaction.Behaviors>
        <behaviors:Blur
          x:Name="blurBehavior"
          Value="10"
          Duration="0"
          Delay="0"
          AutomaticallyStart="True" />
      </interactivity:Interaction.Behaviors>
    </Grid>
  </Grid>

and bring in the NuGet packages Microsoft.Toolkit.Uwp, Microsoft.Toolkit.Uwp.UI, Microsoft.Toolkit.Uwp.UI.Animations along with Win2D.uwp and that should be all that’s needed to blur the bottom half of the image that’s being displayed here.

Hopefully, that might answer the question that got asked.

Only one note here – I’m still trying to figure out whether this will work with the V1.0.0 NuGet packages that are currently published. I seemed to struggle to get my blur to show using those packages whereas it worked fine when I built the source code for the toolkit from github. I need to investigate but apply a bit of a caveat if you see something similar.