Visually Located | Composition

Creating a behavior to stretch header content when at the top of a scroller

I’ve been playing around a lot with my wife’s new iPhone a lot lately. One feature I love on some of the apps is when you reach the top of a page a header image will stretch out to indicate you are at the top of the page. This is a fun feature that’s super easy to add using a behavior. The behavior will focus on scaling the image up by a factor but only when the ScrollerViewer is being “stretched”. public class StretchyHeaderBehavior : Behavior<FrameworkElement>{ private ScrollViewer _scroller; public double StretchyFactor { get { return (double)GetValue(ScaleFactorProperty); } set { SetValue(ScaleFactorProperty, value); } } public static readonly DependencyProperty ScaleFactorProperty = DependencyProperty.Register( nameof(StretchyFactor), typeof(double), typeof(StretchyHeaderBehavior), new PropertyMetadata(0.5)); protected override void OnAttached() { base.OnAttached(); AssociatedObj... [More]

Revisiting the ParallaxBehavior to work in both directions

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.CreateExp... [More]