Fading ListView or GridView Header

FadeHeaderBehavior.cs

public class FadeHeaderBehavior : Behavior<FrameworkElement>
    {
        public static readonly DependencyProperty HeaderElementProperty = DependencyProperty.Register(
            "HeaderElement", typeof(UIElement), typeof(FadeHeaderBehavior), new PropertyMetadata(null, PropertyChangedCallback));

        public UIElement HeaderElement
        {
            get { return (UIElement) GetValue(HeaderElementProperty); }
            set { SetValue(HeaderElementProperty, value); }
        }
        
        protected override void OnAttached()
        {
            base.OnAttached();
            AssignFade();
        }

        private void AssignFade()
        {
            //if we're running on earlier than 10586
            if (!ApiInformation.IsMethodPresent("Windows.UI.Xaml.Hosting.ElementCompositionPreview", nameof(ElementCompositionPreview.GetScrollViewerManipulationPropertySet)))
                return;
            
            if (AssociatedObject == null) return;

            var scroller = AssociatedObject as ScrollViewer ?? AssociatedObject.GetChildOfType<ScrollViewer>();
            if (scroller == null) return;

            var scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scroller);
            var compositor = scrollerViewerManipulation.Compositor;

            //---- expression animation for opacity -----//

            //I use the scroller's offset and the header's height to calculate the opacity percentage and clamp it at 100%
            var opacityExpression = compositor.CreateExpressionAnimation("Clamp(1 - (-ScrollManipululation.Translation.Y / HeaderHeight), 0, 1)");
            
            //mandatory for using the Scrollviewer
            opacityExpression.SetReferenceParameter("ScrollManipululation", scrollerViewerManipulation);

            //pass in the height of the header as a Scalar
            opacityExpression.SetScalarParameter("HeaderHeight", (float)HeaderElement.RenderSize.Height);

            //---------begin animating----------//
            
            var targetElement = ElementCompositionPreview.GetElementVisual(HeaderElement);
            targetElement.StartAnimation("Opacity", opacityExpression);
        }

        private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var b = d as FadeHeaderBehavior;
            b?.AssignFade();
        }
    }

This behavior will use the height of the header element to calculate the perfect opacity fade out. This means that as you scroll up, the header will hit 0% Opacity just as it scrolls off screen. To see this in action watch this Vine recording of a ListView with complex header.