Move FadeHeaderBehavior to new base class

Was much more aligned then it looked at first glance. Think it was first, so some things were just done locally in scope vs. cached from the other classes. At least now we can clean things up all together easily if we want to optimize things.

Main difference is some of the event hooks, so if they're not needed we may want flags/options for those in the base class to enable.

Author: michael-hawker

components/Behaviors/src/Headers/FadeHeaderBehavior.cs

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information.
 
 using CommunityToolkit.WinUI.Animations.Expressions;
+using CommunityToolkit.WinUI.Behaviors.Internal;
 
 #if WINUI3
 using Microsoft.UI.Composition;
@@ -22,134 +23,35 @@ namespace CommunityToolkit.WinUI.Behaviors;
 /// <seealso>
 ///     <cref>Microsoft.Xaml.Interactivity.Behavior{Windows.UI.Xaml.UIElement}</cref>
 /// </seealso>
-public class FadeHeaderBehavior : BehaviorBase<FrameworkElement>
+public class FadeHeaderBehavior : HeaderBehaviorBase
 {
-    /// <summary>
-    /// Attaches the behavior to the associated object.
-    /// </summary>
-    /// <returns>
-    ///   <c>true</c> if attaching succeeded; otherwise <c>false</c>.
-    /// </returns>
-    protected override bool Initialize()
+    /// <inheritdoc/>
+    protected override bool AssignAnimation()
     {
-        var result = AssignFadeAnimation();
-        return result;
-    }
-
-    /// <summary>
-    /// Detaches the behavior from the associated object.
-    /// </summary>
-    /// <returns>
-    ///   <c>true</c> if detaching succeeded; otherwise <c>false</c>.
-    /// </returns>
-    protected override bool Uninitialize()
-    {
-        RemoveFadeAnimation();
-        return true;
-    }
-
-    /// <summary>
-    /// If any of the properties are changed then the animation is automatically started depending on the AutomaticallyStart property.
-    /// </summary>
-    /// <param name="d">The dependency object.</param>
-    /// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
-    private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
-    {
-        var b = d as FadeHeaderBehavior;
-        b?.AssignFadeAnimation();
-    }
-
-    /// <summary>
-    /// The UIElement that will be faded.
-    /// </summary>
-    public static readonly DependencyProperty HeaderElementProperty = DependencyProperty.Register(
-        nameof(HeaderElement), typeof(UIElement), typeof(FadeHeaderBehavior), new PropertyMetadata(null, PropertyChangedCallback));
-
-    /// <summary>
-    /// Gets or sets the target element for the Fading behavior.
-    /// </summary>
-    /// <remarks>
-    /// Set this using the header of a ListView or GridView. You can use the entire root of the header or an element within the header.
-    ///
-    /// Using this example Header:
-    /// <ListView.Header>
-    ///     <Grid Name="MyHeader">
-    ///     </Grid>
-    /// </ListView.Header>
-    ///
-    /// The behavior would be implemented like this
-    /// <FadeHeaderBehavior HeaderElement="{Binding ElementName=HeaderPanel}" />
-    /// </remarks>
-    public UIElement HeaderElement
-    {
-        get { return (UIElement)GetValue(HeaderElementProperty); }
-        set { SetValue(HeaderElementProperty, value); }
-    }
-
-    /// <summary>
-    /// Uses Composition API to get the UIElement and sets an ExpressionAnimation
-    /// The ExpressionAnimation uses the height of the UIElement to calculate an opacity value
-    /// for the Header as it is scrolling off-screen. The opacity reaches 0 when the Header
-    /// is entirely scrolled off.
-    /// </summary>
-    /// <returns><c>true</c> if the assignment was successful; otherwise, <c>false</c>.</returns>
-    private bool AssignFadeAnimation()
-    {
-        if (AssociatedObject == null)
+        if (base.AssignAnimation())
         {
-            return false;
-        }
+            // Get the ScrollViewer's ManipulationPropertySet
+            var scrollPropSet = _scrollProperties!.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
 
-        var scroller = AssociatedObject as ScrollViewer ?? AssociatedObject.FindDescendant<ScrollViewer>();
-        if (scroller == null)
-        {
-            return false;
-        }
+            // Use the ScrollViewer's Y offset and the header's height to calculate the opacity percentage. Clamp it between 0% and 100%
+            var headerHeight = (float)HeaderElement.RenderSize.Height;
+            var opacityExpression = ExpressionFunctions.Clamp(1 - (-scrollPropSet.Translation.Y / headerHeight), 0, 1);
 
-        var listView = AssociatedObject as ListViewBase ?? AssociatedObject.FindDescendant<ListViewBase>();
+            // Begin animating
+            _headerVisual?.StartAnimation("Opacity", opacityExpression);
 
-        if (listView != null && listView.ItemsPanelRoot != null)
-        {
-            Canvas.SetZIndex(listView.ItemsPanelRoot, -1);
-        }
-
-        // Implicit operation: Find the Header object of the control if it uses ListViewBase
-        if (HeaderElement == null && listView != null)
-        {
-            HeaderElement = (listView.Header as UIElement)!;
+            return true;
         }
 
-        // If no header is set or detected, return.
-        if (HeaderElement == null || HeaderElement.RenderSize.Height == 0d)
-        {
-            return false;
-        }
-
-        // Get the ScrollViewer's ManipulationPropertySet
-        var scrollViewerManipulationPropSet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scroller);
-        var scrollPropSet = scrollViewerManipulationPropSet.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
-
-        // Use the ScrollViewer's Y offset and the header's height to calculate the opacity percentage. Clamp it between 0% and 100%
-        var headerHeight = (float)HeaderElement.RenderSize.Height;
-        var opacityExpression = ExpressionFunctions.Clamp(1 - (-scrollPropSet.Translation.Y / headerHeight), 0, 1);
-
-        // Begin animating
-        var targetElement = ElementCompositionPreview.GetElementVisual(HeaderElement);
-        targetElement.StartAnimation("Opacity", opacityExpression);
-
-        return true;
+        return false;
     }
 
-    /// <summary>
-    /// Remove the opacity animation from the UIElement.
-    /// </summary>
-    private void RemoveFadeAnimation()
+    protected override void StopAnimation()
     {
-        if (HeaderElement != null)
+        if (_headerVisual != null)
         {
-            var targetElement = ElementCompositionPreview.GetElementVisual(HeaderElement);
-            targetElement.StopAnimation("Opacity");
-            targetElement.Opacity = 1.0f;
+            _headerVisual.StopAnimation("Opacity");
+            _headerVisual.Opacity = 1.0f;
         }
     }
 }

components/Behaviors/src/Headers/HeaderBehaviorBase.cs

@@ -80,8 +80,11 @@ protected override bool Uninitialize()
     }
 
     /// <summary>
-    /// Uses Composition API to get the UIElement and sets an ExpressionAnimation
+    /// Uses Composition API to get the UIElement and sets an ExpressionAnimation.
     /// </summary>
+    /// <remarks>
+    /// If this method returns true, you should have access to all protected fields with assigned components to use.
+    /// </remarks>
     /// <returns><c>true</c> if the assignment was successful; otherwise, <c>false</c>.</returns>
     protected virtual bool AssignAnimation()
     {
@@ -143,6 +146,7 @@ protected virtual bool AssignAnimation()
             return false;
         }
 
+        // TODO: Not sure if we need to provide an option to turn these events off, as FadeHeaderBehavior didn't use these two, unlike QuickReturn/Sticky did...
         headerElement.SizeChanged -= ScrollHeader_SizeChanged;
         headerElement.SizeChanged += ScrollHeader_SizeChanged;
 

components/Behaviors/src/Headers/QuickReturnHeaderBehavior.cs

@@ -63,12 +63,12 @@ protected override bool AssignAnimation()
     /// <inheritdoc/>
     protected override void StopAnimation()
     {
-        _headerVisual?.StopAnimation("Offset.Y");
-
         _animationProperties?.InsertScalar("OffsetY", 0.0f);
 
         if (_headerVisual != null)
         {
+            _headerVisual.StopAnimation("Offset.Y");
+
             var offset = _headerVisual.Offset;
             offset.Y = 0.0f;
             _headerVisual.Offset = offset;

components/Behaviors/src/Headers/StickyHeaderBehavior.cs

@@ -58,12 +58,12 @@ protected override bool AssignAnimation()
     /// <inheritdoc/>
     protected override void StopAnimation()
     {
-        _headerVisual?.StopAnimation("Offset.Y");
-
         _animationProperties?.InsertScalar("OffsetY", 0.0f);
 
         if (_headerVisual != null)
         {
+            _headerVisual.StopAnimation("Offset.Y");
+
             var offset = _headerVisual.Offset;
             offset.Y = 0.0f;
             _headerVisual.Offset = offset;