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]
Animating list items within Windows apps 17. April 2015 Shawn Windows Apps (0) In a previous post I’ve talked about some page transitions and animations within Windows apps. There are many other locations where adding animations is very easy. One of these is animating items within any ItemsControl class. This includes controls like the ListView/GridView controls. The ItemsControl exposes the ItemContainerTransitions property. This property exposes a TransitionCollection, the same collection I talked about in the previous post. One of the key transitions you’ll want to look at is the EntranceThemeTransition. The EntranceThemeTransition defines how items will enter the region when they are rendered. It contains three properties. FromVerticalOffset and FromHorizontalOffset define the where the item should start rendering, with respect to where the final location will be. So if you have a FromVerticalOffset of 100, the item will begin an entrance animation 100 pixels below where it will end. The last property IsStaggeringEnabled, defines if all items should animate ... [More]
Disabling tilt on a ListView or GridView 9. July 2014 Shawn Windows Phone (0) I have mentioned before that the tilt animation is enabled by default in Windows Phone 8.1 Runtime apps, but what happens when you want to display a collection of items but do not want to enable tilt? You may not want to enable tilt because there is no extra action that happens when you tap an item. As with most things, there are a few options here. The first is to not use a ListView/GridView at all. Instead just use an ItemsControl to display your items. This is great provided you do not have a lot of items you need to show. ItemsControl is not virtualized like the ListView/GridView so it uses a lot of memory when displaying a lot of items. This is my go to control for displaying a small collection of items that have no action associated with them. If you still want to use the ListView or GridView control then there is a simple way to disable the animation. You will need to modify the style of the ListViewItem or GridViewItem. For this post I will demonstrate using the ListViewItem,... [More]