In my last post I explained how to create a behavior that would provide a parallax effect on any control. I was playing with the behavior the other day and I wanted to reverse the scrolling of a header image from going down to going up. I switched the ParallaxMultiplier property from a negative number to a positive number and noticed that the image started to scroll off the screen.
This is not at all what I wanted. I want to see the image in the space provided, but scroll, or parallax, the image as I scroll the content. I want the image to scroll upwards so I can still see the top/center of the image as I scroll the page down.
To fix this I need to adjust the expression. Currently the expression is "ScrollManipulation.Translation.Y * ParallaxMultiplier". We need to move the image down as the scroller moves. To do this we can subtract the Y Translation of the scroller. But we only want to do this for a multiplier greater than zero.
ExpressionAnimation expression = compositor.CreateExpressionAnimation(ParallaxMultiplier > 0
? "ScrollManipulation.Translation.Y * ParallaxMultiplier - ScrollManipulation.Translation.Y"
: "ScrollManipulation.Translation.Y * ParallaxMultiplier");
Now, when the multiplier is greater than zero, the parallax effect works properly.
You can get an updated version of the behavior on my repo. This does “break” the sample that has the image as the background of text. But let’s be honest, that’s not a real scenario anyone would use.