and today I was putting together some demo code for other purposes and I thought I’d screen-capture what I had as a walk through of some of the capabilities of those composition APIs starting from a blank slate and walking through it;

That’s just one of my own, unofficial walk-throughs. For the official bits, visit the team site at;

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;

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.

In that post, I’d failed to get a simple XAML scene lit with a PointLight and then James pinged me on Twitter saying;

and I’d actually seen the sample in question which shimmers some text;

and I hadn’t realised that it was a XAML based sample so I stared at it and it took me maybe 2-3 minutes to figure out what’s different about it from my attempt and I thought it was worth sharing what it taught me.

My attempt to do lighting with XAML involved a piece of ‘UI’ like this;

and all I had to do was promote the PointLight variable to be a member of my Page and life is good and the light does what I expect it to.

Now, to be honest, I’ve hit this type of issue working with the composition APIs before and so I should have expected it and fixed my code but I think my intuitive expectation was that having created a light and handed it ‘to the system’ I’d expect the system to keep hold of it rather than asking me to keep hold of it.

I don’t have to ‘insert’ the light into any kind of scene or anything like that

and so I hadn’t assumed that I was the owner of the PointLight and needed to keep it around although it’s worth saying that the PointLight is disposable so maybe that should have made it clear that the ownership lives with me as a consumer of the light.

That’s my learning for this post

In looking around this area of ownership, I did spot that others are asking questions around object lifetimes and disposing of some of these pieces so it’s something that docs/guides could perhaps do more to help users of the APIs here understand how the lifetimes are meant to work;

but at least on this simplest of samples I got resolution as to why my code didn’t work when the sample code did!