Creating a behavior to stretch header content when at the top of a scroller 31. August 2016 Shawn UWP, Composition (0) 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 30. August 2016 Shawn UWP, Composition (0) 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]
Easily Create Parallax effects in Windows 10 apps 10. December 2015 Shawn UWP (0) In October James Clarke tweeted some source code to add a parallax effect to UWP apps using the new Windows Composition framework. At the time the new SDK was not available so you could not get it working. Now that the new SDK is released we can start building apps using Windows Composition. The sample that James posted is nice and short, but it’s still code that you would need to repeat over and over. As I’ve mentioned before, I’m not a fan of repeating code. I am however a fan of custom controls and behaviors. This effect can easily be made into a behavior. In James’ sample he is parallaxing an image, but there is no reason it has to be an image. It could be any visual element. This allows you to use graphics or whatever you want as a background. public class ParallaxBehavior : Behavior<FrameworkElement>{ /// <summary> /// Gets or sets the element that will parallax while scrolling. /// </summary> public UIElement ParallaxContent { get { r... [More]