fix: Update Scroll View Animation Example and Sample Code Presenter

WinUIGallery/ControlPages/ScrollViewPage.xaml

@@ -197,7 +197,8 @@
                     ColumnDefinitions="Auto, *">
                     <TextBlock Text="Scroll with animation" VerticalAlignment="Center" Margin="0,0,10,0"/>
 
-                    <ComboBox Grid.Column="1" x:Name="cmbVerticalAnimation" SelectedIndex="0" HorizontalAlignment="Stretch" AutomationProperties.Name="vertical animation options">
+                    <ComboBox Grid.Column="1" x:Name="cmbVerticalAnimation" SelectedIndex="0" HorizontalAlignment="Stretch" AutomationProperties.Name="vertical animation options"
+                              SelectionChanged="cmbVerticalAnimation_SelectionChanged">
                         <ComboBoxItem>Default</ComboBoxItem>
                         <ComboBoxItem>Accordion</ComboBoxItem>
                         <ComboBoxItem>Teleportation</ComboBoxItem>
@@ -213,7 +214,8 @@
                         SpinButtonPlacementMode="Inline"
                         SmallChange="500"
                         LargeChange="1000"
-                        AutomationProperties.Name="animation duration">
+                        AutomationProperties.Name="animation duration"
+                        ValueChanged="nbAnimationDuration_ValueChanged">
                     </NumberBox>
 
                     <Button x:Name="btnScrollWithAnimation" Content="Scroll with animation" Grid.Row="2" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" AutomationProperties.Name="scroll with animation" Click="BtnScrollWithAnimation_Click"/>

WinUIGallery/ControlPages/ScrollViewPage.xaml.cs

@@ -11,13 +11,17 @@
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using System;
+using System.IO;
 using System.Numerics;
 using Windows.Globalization.NumberFormatting;
+using Windows.Storage;
 
 namespace WinUIGallery.ControlPages
 {
     public sealed partial class ScrollViewPage : Page
     {
+        private double prvAnimationDuration;
+
         public ScrollViewPage()
         {
             this.InitializeComponent();
@@ -43,7 +47,10 @@ private void ScrollViewPage_Loaded(object sender, RoutedEventArgs e)
                 NumberRounder = rounder
             };
             nbZoomFactor.NumberFormatter = formatter;
-
+
+            Example3.CSharp = Example3.CSharp.Replace("nbAnimationDuration.Value", nbAnimationDuration.Value.ToString());
+            prvAnimationDuration = nbAnimationDuration.Value;
+
             this.Loaded -= ScrollViewPage_Loaded;
         }
 
@@ -256,5 +263,39 @@ private double GetTargetVerticalOffset()
                 return 4.0 * scrollView3.ScrollableHeight / 5.0;
             }
         }
+
+        private void cmbVerticalAnimation_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            if (sender is ComboBox combo)
+            {
+                switch (combo.SelectedIndex)
+                {
+                    case 0:
+                        Example3.CSharp = ReadSampleCodeFileContent("ScrollViewSample3_DefaultAnimation_cs");
+                        break;
+                    case 1:
+                        Example3.CSharp = ReadSampleCodeFileContent("ScrollViewSample3_AccordionAnimation_cs");
+                        break;
+                    case 2:
+                        Example3.CSharp = ReadSampleCodeFileContent("ScrollViewSample3_TeleportationAnimation_cs");
+                        break;
+                }
+                if (nbAnimationDuration != null)
+                    Example3.CSharp = Example3.CSharp.Replace("nbAnimationDuration.Value", nbAnimationDuration.Value.ToString());
+                Example3.UpdateLayout();
+            }         
+        }
+
+        private void nbAnimationDuration_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs args)
+        {
+            Example3.CSharp = Example3.CSharp.Replace(prvAnimationDuration.ToString(),nbAnimationDuration.Value.ToString());
+            prvAnimationDuration = nbAnimationDuration.Value;
+        }
+
+        private string ReadSampleCodeFileContent(string sampleCodeFileName)
+        {
+            StorageFolder folder = Windows.ApplicationModel.Package.Current.InstalledLocation;
+            return File.ReadAllText($"{folder.Path}\\ControlPagesSampleCode\\ScrollView\\{sampleCodeFileName}.txt");
+        }
     }
 }

WinUIGallery/ControlPagesSampleCode/ScrollView/ScrollViewSample3_AccordionAnimation_cs.txt

@@ -0,0 +1,68 @@
+//Accordion Animation
+private void ScrollView_ScrollAnimationStarting(ScrollView sender, ScrollingScrollAnimationStartingEventArgs e)
+{
+    // Cast the animation from the event arguments to a Vector3KeyFrameAnimation.
+    Vector3KeyFrameAnimation stockKeyFrameAnimation = e.Animation as Vector3KeyFrameAnimation;
+
+    // Check if the animation is of the correct type.
+    if (stockKeyFrameAnimation != null)
+    {
+        // Calculate the target vertical offset for the scroll animation.
+        double targetVerticalOffset = GetTargetVerticalOffset();
+        float targetVerticalPosition = (float)targetVerticalOffset;
+
+        // Create a new Vector3KeyFrameAnimation for custom animation.
+        Vector3KeyFrameAnimation customKeyFrameAnimation = stockKeyFrameAnimation.Compositor.CreateVector3KeyFrameAnimation();
+
+        // Calculate the initial vertical offset change for the animation.
+        float deltaVerticalPosition = 0.1f * (float)(targetVerticalOffset - scrollView3.VerticalOffset);
+
+        // Define the animation steps with keyframes for a smooth transition.
+        for (int step = 0; step < 3; step++)
+        {
+            // Insert a keyframe at a specific time with a computed vertical position.
+            customKeyFrameAnimation.InsertKeyFrame(
+                1.0f - (0.4f / (float)Math.Pow(2, step)), // Time progress for the keyframe
+                new Vector3((float)scrollView3.HorizontalOffset, targetVerticalPosition + deltaVerticalPosition, 0.0f));
+
+            // Adjust the deltaVerticalPosition for the next keyframe to create an "accordion" effect.
+            deltaVerticalPosition /= -2.0f;
+        }
+
+        // Insert the final keyframe with the target vertical position.
+        customKeyFrameAnimation.InsertKeyFrame(1.0f, new Vector3((float)scrollView3.HorizontalOffset, targetVerticalPosition, 0.0f));
+
+        // Set the duration of the custom animation.
+        customKeyFrameAnimation.Duration = TimeSpan.FromMilliseconds(nbAnimationDuration.Value);
+
+        // Replace the default animation with the custom animation.
+        e.Animation = customKeyFrameAnimation;
+    }
+}
+
+// This function is triggered when the button is clicked to scroll with animation.
+private void BtnScrollWithAnimation_Click(object sender, RoutedEventArgs e)
+{
+    // Check if the ScrollView control is initialized.
+    if (scrollView3 != null)
+    {
+        // Initiate a scroll to the target vertical offset with animation enabled.
+        scrollView3.ScrollTo(scrollView3.HorizontalOffset, GetTargetVerticalOffset(), new ScrollingScrollOptions(ScrollingAnimationMode.Enabled, ScrollingSnapPointsMode.Ignore));
+    }
+}
+
+// This function calculates the target vertical offset based on the current vertical offset of the ScrollView.
+private double GetTargetVerticalOffset()
+{
+    // Determine if the current vertical offset is greater than half of the scrollable height.
+    if (scrollView3.VerticalOffset > scrollView3.ScrollableHeight / 2.0)
+    {
+        // If yes, return a lower target vertical offset.
+        return scrollView3.ScrollableHeight / 5.0;
+    }
+    else
+    {
+        // If no, return a higher target vertical offset.
+        return 4.0 * scrollView3.ScrollableHeight / 5.0;
+    }
+}

WinUIGallery/ControlPagesSampleCode/ScrollView/ScrollViewSample3_DefaultAnimation_cs.txt

@@ -0,0 +1,40 @@
+//Default Animation
+private void ScrollView_ScrollAnimationStarting(ScrollView sender, ScrollingScrollAnimationStartingEventArgs e)
+{
+    // Cast the animation from the event arguments to a Vector3KeyFrameAnimation.
+    Vector3KeyFrameAnimation stockKeyFrameAnimation = e.Animation as Vector3KeyFrameAnimation;
+
+    // Check if the animation is of the correct type.
+    if (stockKeyFrameAnimation != null)
+    {
+        // Set the duration of the default animation to the value specified by nbAnimationDuration.
+        stockKeyFrameAnimation.Duration = TimeSpan.FromMilliseconds(nbAnimationDuration.Value);
+    }
+}
+
+// This function is triggered when the button is clicked to scroll with animation.
+private void BtnScrollWithAnimation_Click(object sender, RoutedEventArgs e)
+{
+    // Check if the ScrollView control is initialized.
+    if (scrollView3 != null)
+    {
+        // Initiate a scroll to the target vertical offset with animation enabled.
+        scrollView3.ScrollTo(scrollView3.HorizontalOffset, GetTargetVerticalOffset(), new ScrollingScrollOptions(ScrollingAnimationMode.Enabled, ScrollingSnapPointsMode.Ignore));
+    }
+}
+
+// This function calculates the target vertical offset based on the current vertical offset of the ScrollView.
+private double GetTargetVerticalOffset()
+{
+    // Determine if the current vertical offset is greater than half of the scrollable height.
+    if (scrollView3.VerticalOffset > scrollView3.ScrollableHeight / 2.0)
+    {
+        // If yes, return a lower target vertical offset.
+        return scrollView3.ScrollableHeight / 5.0;
+    }
+    else
+    {
+        // If no, return a higher target vertical offset.
+        return 4.0 * scrollView3.ScrollableHeight / 5.0;
+    }
+}

WinUIGallery/ControlPagesSampleCode/ScrollView/ScrollViewSample3_TeleportationAnimation_cs.txt

@@ -0,0 +1,86 @@
+//Teleportation Animation
+private void ScrollView_ScrollAnimationStarting(ScrollView sender, ScrollingScrollAnimationStartingEventArgs e)
+{
+    // Cast the animation from the event arguments to a Vector3KeyFrameAnimation.
+    Vector3KeyFrameAnimation stockKeyFrameAnimation = e.Animation as Vector3KeyFrameAnimation;
+
+    // Check if the animation is of the correct type.
+    if (stockKeyFrameAnimation != null)
+    {
+        // Calculate the target vertical offset for the scroll animation.
+        double targetVerticalOffset = GetTargetVerticalOffset();
+        float targetVerticalPosition = (float)targetVerticalOffset;
+
+        // Create a new Vector3KeyFrameAnimation for custom animation.
+        Vector3KeyFrameAnimation customKeyFrameAnimation = stockKeyFrameAnimation.Compositor.CreateVector3KeyFrameAnimation();
+
+        // Calculate the difference between the current and target vertical positions.
+        float deltaVerticalPosition = (float)(targetVerticalOffset - scrollView3.VerticalOffset);
+
+        // Define easing functions for smooth transitions.
+        // Start easing function with cubic Bezier curve for a quick start.
+        CubicBezierEasingFunction cubicBezierStart = stockKeyFrameAnimation.Compositor.CreateCubicBezierEasingFunction(
+            new Vector2(1.0f, 0.0f), // Control point 1
+            new Vector2(1.0f, 0.0f)); // Control point 2
+
+        // Define step easing function for a sudden change in animation.
+        StepEasingFunction step = stockKeyFrameAnimation.Compositor.CreateStepEasingFunction(1);
+
+        // End easing function with cubic Bezier curve for a smooth end.
+        CubicBezierEasingFunction cubicBezierEnd = stockKeyFrameAnimation.Compositor.CreateCubicBezierEasingFunction(
+            new Vector2(0.0f, 1.0f), // Control point 1
+            new Vector2(0.0f, 1.0f)); // Control point 2
+
+        // Insert keyframes into the custom animation.
+        // First keyframe near the midpoint of the animation with a quick dip.
+        customKeyFrameAnimation.InsertKeyFrame(
+            0.499999f, // Time progress for the keyframe (almost halfway)
+            new Vector3((float)scrollView3.HorizontalOffset, targetVerticalPosition - 0.9f * deltaVerticalPosition, 0.0f),
+            cubicBezierStart); // Easing function for start
+
+        // Second keyframe exactly at halfway with a sudden step change.
+        customKeyFrameAnimation.InsertKeyFrame(
+            0.5f, // Time progress for the keyframe (exactly halfway)
+            new Vector3((float)scrollView3.HorizontalOffset, targetVerticalPosition - 0.1f * deltaVerticalPosition, 0.0f),
+            step); // Easing function for sudden change
+
+        // Final keyframe at the end of the animation.
+        customKeyFrameAnimation.InsertKeyFrame(
+            1.0f, // Time progress for the keyframe (end)
+            new Vector3((float)scrollView3.HorizontalOffset, targetVerticalPosition, 0.0f),
+            cubicBezierEnd); // Easing function for end
+
+        // Set the duration of the custom animation.
+        customKeyFrameAnimation.Duration = TimeSpan.FromMilliseconds(nbAnimationDuration.Value);
+
+        // Replace the default animation with the custom animation.
+        e.Animation = customKeyFrameAnimation;
+    }
+}
+
+// This function is triggered when the button is clicked to scroll with animation.
+private void BtnScrollWithAnimation_Click(object sender, RoutedEventArgs e)
+{
+    // Check if the ScrollView control is initialized.
+    if (scrollView3 != null)
+    {
+        // Initiate a scroll to the target vertical offset with animation enabled.
+        scrollView3.ScrollTo(scrollView3.HorizontalOffset, GetTargetVerticalOffset(), new ScrollingScrollOptions(ScrollingAnimationMode.Enabled, ScrollingSnapPointsMode.Ignore));
+    }
+}
+
+// This function calculates the target vertical offset based on the current vertical offset of the ScrollView.
+private double GetTargetVerticalOffset()
+{
+    // Determine if the current vertical offset is greater than half of the scrollable height.
+    if (scrollView3.VerticalOffset > scrollView3.ScrollableHeight / 2.0)
+    {
+        // If yes, return a lower target vertical offset.
+        return scrollView3.ScrollableHeight / 5.0;
+    }
+    else
+    {
+        // If no, return a higher target vertical offset.
+        return 4.0 * scrollView3.ScrollableHeight / 5.0;
+    }
+}

WinUIGallery/Controls/SampleCodePresenter.xaml.cs

@@ -87,10 +87,6 @@ private void ReevaluateVisibility()
             {
                 Visibility = Visibility.Collapsed;
             }
-            else
-            {
-                Visibility = Visibility.Visible;
-            }
         }
 
         private void SampleCodePresenter_Loaded(object sender, RoutedEventArgs e)

WinUIGallery/WinUIGallery.csproj

@@ -150,6 +150,9 @@
         <None Remove="Assets\Tiles\GalleryIcon.ico" />
         <None Remove="ControlPagesSampleCode\Geometry\GeometrySample_xaml.txt" />
         <None Remove="ControlPagesSampleCode\Icons\FontIconSample2_xaml.txt" />
+        <None Remove="ControlPagesSampleCode\ScrollView\ScrollViewSample3_AccordionAnimation_cs.txt" />
+        <None Remove="ControlPagesSampleCode\ScrollView\ScrollViewSample3_DefaultAnimation_cs.txt" />
+        <None Remove="ControlPagesSampleCode\ScrollView\ScrollViewSample3_TeleportationAnimation_cs.txt" />
         <None Remove="ControlPagesSampleCode\Typography\TypographySample_xaml.txt" />
         <None Remove="ControlPages\DesignGuidance\ColorPage.xaml" />
         <None Remove="ControlPages\DesignGuidance\SpacingPage.xaml" />
@@ -196,6 +199,9 @@
         <Content Include="Assets\Design\Typography.light.png" />
         <Content Include="ControlPagesSampleCode\Geometry\GeometrySample_xaml.txt" />
         <Content Include="ControlPagesSampleCode\Icons\FontIconSample2_xaml.txt" />
+        <Content Include="ControlPagesSampleCode\ScrollView\ScrollViewSample3_AccordionAnimation_cs.txt" />
+        <Content Include="ControlPagesSampleCode\ScrollView\ScrollViewSample3_DefaultAnimation_cs.txt" />
+        <Content Include="ControlPagesSampleCode\ScrollView\ScrollViewSample3_TeleportationAnimation_cs.txt" />
         <Content Include="DataModel\IconsData.json" />
         <Content Include="DataModel\ControlInfoData.json" />
     </ItemGroup>