I mentioned recently in my ‘Daily Life of a Developer’ series that I’ve been working on some old project ideas that have been stuck on my backlog of things to do for a while now. As part of the planning of one of my projects, I was coming up with cool ideas that I could do with new features in the Universal Windows Platform (UWP).
One of those ideas was to investigate and have a play with the Composition APIs which sit between the framework layer (XAML) and graphics layer (DirectX/C++) in the visual stack.
As I was looking through resources online for the Composition APIs, I came across a sample that James Clarke, a developer on the Composition APIs, posted on his GitHub which shows how you can use the animation expressions to create a simple parallax effect with a ScrollViewer with child elements and a background image.
Wanting to bring this functionality into this and future projects, I decided to re-write the code as a Behavior which can be attached to a scrolling UI element such as a ScrollViewer, GridView or ListView. This code looks as follows:
To understand what’s happening in the code, I’ll break it down for you, but first, here’s what the result will be for you:
Parallax Effect for UI elements in UWP
When the behaviour has attached and has an associated parallax element, an image for example, we acquire the ScrollViewer manipulation property set from the ScrollViewer element that we attached the behavior to.
From there, we get the compositor from that property set. The compositor is what we will use to apply animations and effects to composition objects in the visual tree.
We then begin to create the animation expression which you will have noticed is a string. Please take note of how you write your expressions as parts of the expression relate to the parameters that we set on that expression afterwards as you’ll see in the code. We set a scalar parameter which is the multiplier in this case for the effect. You’ll notice the key is the same as the one we’ve used in the expression. You also create a reference parameter which is the ScrollViewer object itself. You can give it it’s own key here but make sure it matches in the string expression.
To break down what the expression means, we are taking the Y translation of the ScrollViewer element and multiplying it by a value we can set in XAML. We will then use that result of the animation expression to set the offset of our ParallaxElement in the next block of code.
So, once we have our animation expression complete, we just need to attach it to the element we want to animate and start it, in this instance, the ParallaxElement which I’ve attached as an Image. When we run the application, you’ll now notice that when you scroll up and down in your scrolling UI element, the element you’ve attached the animation to will translate based on the expression we created earlier! It’s a very simple, but very effective animation. Top tip, keep the multiplier low to provider a smoother scrolling.
As I’m going to use this functionality in future projects, I’m going to be adding the Behavior to the Croft.Core.UWP project that I have hosted on GitHub and you can download for your own applications through Nuget!