ScrollViewer expression animations extensions

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -605,6 +605,7 @@
     <Content Include="SamplePages\IconExtensions\IconExtensionsXaml.bind" />
     <Content Include="SamplePages\WrapLayout\WrapLayout.bind" />
     <Content Include="SamplePages\ObservableGroup\ObservableGroup.bind" />
+    <Content Include="SamplePages\ScrollViewerExtensions\ScrollViewerExtensionsXaml.bind" />
     <Content Include="SamplePages\Triggers\CompareStateTrigger.bind" />
     <Content Include="SamplePages\Triggers\IsEqualStateTrigger.bind" />
     <Content Include="SamplePages\Triggers\FullScreenModeStateTrigger.bind" />

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsCode.bind

@@ -1,71 +1,10 @@
-<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-      xmlns:common="using:Microsoft.Toolkit.Uwp.SampleApp.Common"
-      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
-      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-      xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
-      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      mc:Ignorable="d">
+// C# - Scale can be applied to any UIElement. In this case it is an image called ToolkitLogo.
+using Microsoft.Toolkit.Uwp.UI.Extensions;
 
-  <Page.Resources>
-    <common:DoubleTopThicknessConverter x:Key="DoubleTopThicknessConverter" />
-  </Page.Resources>
+// Binds the Y scroll axis of the ScrollViewer to the Y translation axis of the target
+listScrollViewer.StartExpressionAnimation(shapesPanel, Axis.Y);
 
-  <Grid>
-    <ListView Name="listView"
-              extensions:ScrollViewerExtensions.VerticalScrollBarMargin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
-              extensions:ScrollViewerExtensions.EnableMiddleClickScrolling="@[EnableMiddleClickScrolling:Bool:True]">
-      <ListView.Header>
-        <controls:ScrollHeader Mode="Sticky">
-          <Grid x:Name="MyHeaderGrid"
-                MinHeight="@[Header MinHeight:DoubleSlider:250:150-500]"
-                Background="{ThemeResource Brush-Sample-TransparentHeader}">
-            <StackPanel HorizontalAlignment="Center"
-                        VerticalAlignment="Center">
-              <TextBlock Margin="12"
-                         FontSize="48"
-                         FontWeight="Bold"
-                         Foreground="{ThemeResource Brush-Main}"
-                         Text="Scroll Header"
-                         TextAlignment="Center"
-                         TextWrapping="WrapWholeWords" />
-              <TextBlock Margin="12,0,12,12"
-                         VerticalAlignment="Center"
-                         Foreground="{ThemeResource Brush-Main}"
-                         Text="The attached property allows you to assign a Thickness to both vertical and horizontal ScrollBar inside any container. In this example, VerticalScrollBarMargin is bound to StickyHeader's MinHeight. Moving MinHeight's Slider will move the vertical ScrollBar accordingly."
-                         TextAlignment="Center"
-                         TextWrapping="WrapWholeWords" />
-            </StackPanel>
-          </Grid>
-        </controls:ScrollHeader>
-      </ListView.Header>
-      <ListView.ItemTemplate>
-        <DataTemplate>
-          <Grid MinHeight="100"
-                Background="{ThemeResource Brush-Grey-03}">
-            <Grid.ColumnDefinitions>
-              <ColumnDefinition Width="Auto" />
-              <ColumnDefinition Width="*" />
-            </Grid.ColumnDefinitions>
-            <Image x:Name="ToolkitLogo"
-                   Grid.Column="0"
-                   Width="100"
-                   Height="100"
-                   Margin="0,0,24,0"
-                   Source="ms-appx:///Assets/ToolkitLogo.png" />
-            <TextBlock Grid.Column="1"
-                       VerticalAlignment="Center"
-                       Text="{Binding Title}"
-                       TextTrimming="CharacterEllipsis" />
-          </Grid>
-        </DataTemplate>
-      </ListView.ItemTemplate>
-      <ListView.ItemContainerStyle>
-        <Style TargetType="ListViewItem">
-          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-          <Setter Property="Padding" Value="12,12,24,12" />
-        </Style>
-      </ListView.ItemContainerStyle>
-    </ListView>
-  </Grid>
-</Page>
+// It is also possible to synchronize different axes, as well as targeting
+// different Visual properties. By default, the expression works with the
+// Visual.Translate property, but Visual.Offset can be used as well.
+listScrollViewer.StartExpressionAnimation(shapesPanel, Axis.X, Axis.Y, VisualProperty.Offset);

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml

@@ -40,8 +40,7 @@
             </ListView.Header>
             <ListView.ItemTemplate>
                 <DataTemplate>
-                    <Grid MinHeight="100"
-                Background="{ThemeResource Brush-Grey-03}">
+                    <Grid MinHeight="100" Background="Blue">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="Auto" />
                             <ColumnDefinition Width="*" />
@@ -66,5 +65,46 @@
                 </Style>
             </ListView.ItemContainerStyle>
         </ListView>
+        <StackPanel x:Name="shapesPanel"
+                    HorizontalAlignment="Center"
+                    Margin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
+                    Padding="88"
+                    Spacing="32">
+            <Polygon Height="100"
+                     Width="100"
+                     Points="0,0 0,72 44,36"
+                     Stroke="DarkGreen"
+                     Fill="Green"
+                     VerticalAlignment="Center"
+                     HorizontalAlignment="Center"/>
+            <StackPanel Orientation="Horizontal"
+                        VerticalAlignment="Center"
+                        HorizontalAlignment="Center"
+                        Spacing="4"
+                        Height="84"
+                        Width="100">
+                <Polygon Points="0,0 0,56 32,28"
+                         Stroke="Blue"
+                         Fill="DodgerBlue"/>
+                <Polygon Points="0,0 0,56 32,28"
+                         Stroke="Blue"
+                         Fill="DodgerBlue"/>
+            </StackPanel>
+            <TextBlock
+                Height="100"
+                FontSize="24"
+                TextAlignment="Center">
+                <Run Text="Look at me, I'm floating between"/>
+                <LineBreak/>
+                <Run Text="two different ListView items!"/>
+            </TextBlock>
+            <Polygon Height="100"
+                     Width="100"
+                     Points="0,0 0,60 60,60 60,0"
+                     Stroke="DarkRed"
+                     Fill="Crimson"
+                     VerticalAlignment="Center"
+                     HorizontalAlignment="Center"/>
+        </StackPanel>
     </Grid>
 </Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs

@@ -4,11 +4,9 @@
 
 using System.Collections.ObjectModel;
 using Microsoft.Toolkit.Uwp.SampleApp.Models;
-using Microsoft.Toolkit.Uwp.UI.Controls;
 using Microsoft.Toolkit.Uwp.UI.Extensions;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Navigation;
 
 namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
 {
@@ -35,6 +33,14 @@ public void OnXamlRendered(FrameworkElement control)
             if (listView != null)
             {
                 listView.ItemsSource = _items;
+
+                var shapesPanel = control.FindChildByName("shapesPanel") as StackPanel;
+                if (shapesPanel != null)
+                {
+                    var listScrollViewer = listView.FindDescendant<ScrollViewer>();
+
+                    listScrollViewer?.StartExpressionAnimation(shapesPanel, Axis.Y);
+                }
             }
         }
     }

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind

@@ -0,0 +1,117 @@
+<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:common="using:Microsoft.Toolkit.Uwp.SampleApp.Common"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+  <Page.Resources>
+    <common:DoubleTopThicknessConverter x:Key="DoubleTopThicknessConverter" />
+  </Page.Resources>
+
+  <Grid>
+    <ListView Name="listView"
+              extensions:ScrollViewerExtensions.VerticalScrollBarMargin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
+              extensions:ScrollViewerExtensions.EnableMiddleClickScrolling="@[EnableMiddleClickScrolling:Bool:True]">
+      <ListView.Header>
+        <controls:ScrollHeader Mode="Sticky">
+          <Grid x:Name="MyHeaderGrid"
+                MinHeight="@[Header MinHeight:DoubleSlider:250:150-500]"
+                Background="{ThemeResource Brush-Sample-TransparentHeader}">
+            <StackPanel HorizontalAlignment="Center"
+                        VerticalAlignment="Center">
+              <TextBlock Margin="12"
+                         FontSize="48"
+                         FontWeight="Bold"
+                         Foreground="{ThemeResource Brush-Main}"
+                         Text="Scroll Header"
+                         TextAlignment="Center"
+                         TextWrapping="WrapWholeWords" />
+              <TextBlock Margin="12,0,12,12"
+                         VerticalAlignment="Center"
+                         Foreground="{ThemeResource Brush-Main}"
+                         Text="The attached property allows you to assign a Thickness to both vertical and horizontal ScrollBar inside any container. In this example, VerticalScrollBarMargin is bound to StickyHeader's MinHeight. Moving MinHeight's Slider will move the vertical ScrollBar accordingly."
+                         TextAlignment="Center"
+                         TextWrapping="WrapWholeWords" />
+            </StackPanel>
+          </Grid>
+        </controls:ScrollHeader>
+      </ListView.Header>
+      <ListView.ItemTemplate>
+        <DataTemplate>
+          <Grid MinHeight="100"
+                Background="{ThemeResource Brush-Grey-03}">
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="Auto" />
+              <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Image x:Name="ToolkitLogo"
+                   Grid.Column="0"
+                   Width="100"
+                   Height="100"
+                   Margin="0,0,24,0"
+                   Source="ms-appx:///Assets/ToolkitLogo.png" />
+            <TextBlock Grid.Column="1"
+                       VerticalAlignment="Center"
+                       Text="{Binding Title}"
+                       TextTrimming="CharacterEllipsis" />
+          </Grid>
+        </DataTemplate>
+      </ListView.ItemTemplate>
+      <ListView.ItemContainerStyle>
+        <Style TargetType="ListViewItem">
+          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+          <Setter Property="Padding" Value="12,12,24,12" />
+        </Style>
+      </ListView.ItemContainerStyle>
+    </ListView>
+
+    <!--This is the panel that will be animated in sync with the main ScrollViewer control inside
+        the ListView in the page, using the ScrollViewerExtensions leveraging composition ExpressionAnimations.
+        We use x:Name here to be able to reference the panel from code behind and start the animation.
+        To inspect the C# code beind used, switch to the "Code" tab in this sample page.-->
+    <StackPanel x:Name="shapesPanel"
+                HorizontalAlignment="Center"
+                Margin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
+                Padding="88"
+                Spacing="32">
+      <Polygon Height="100"
+               Width="100"
+               Points="0,0 0,72 44,36"
+               Stroke="DarkGreen"
+               Fill="Green"
+               VerticalAlignment="Center"
+               HorizontalAlignment="Center"/>
+      <StackPanel Orientation="Horizontal"
+                  VerticalAlignment="Center"
+                  HorizontalAlignment="Center"
+                  Spacing="4"
+                  Height="84"
+                  Width="100">
+        <Polygon Points="0,0 0,56 32,28"
+                 Stroke="Blue"
+                 Fill="DodgerBlue"/>
+        <Polygon Points="0,0 0,56 32,28"
+                 Stroke="Blue"
+                 Fill="DodgerBlue"/>
+      </StackPanel>
+      <TextBlock
+        Height="100"
+        FontSize="24"
+        TextAlignment="Center">
+        <Run Text="Look at me, I'm floating between"/>
+        <LineBreak/>
+        <Run Text="two different ListView items!"/>
+      </TextBlock>
+      <Polygon Height="100"
+               Width="100"
+               Points="0,0 0,60 60,60 60,0"
+               Stroke="DarkRed"
+               Fill="Crimson"
+               VerticalAlignment="Center"
+               HorizontalAlignment="Center"/>
+    </StackPanel>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -1235,7 +1235,8 @@
         "Type": "ScrollViewerExtensionsPage",
         "About": "Extensions for all controls that contain a ScrollViewer like ListView.",
         "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer",
-        "XamlCodeFile": "ScrollViewerExtensionsCode.bind",
+        "XamlCodeFile": "ScrollViewerExtensionsXaml.bind",
+        "CodeFile": "ScrollViewerExtensionsCode.bind",
         "Icon": "/Assets/Helpers.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/extensions/ScrollViewerExtensions.md"
       },

Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/Enums/Axis.cs

@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace Microsoft.Toolkit.Uwp.UI.Extensions
+{
+    /// <summary>
+    /// Indicates an axis in the 2D space
+    /// </summary>
+    public enum Axis
+    {
+        /// <summary>
+        /// The X axis (horizontal)
+        /// </summary>
+        X,
+
+        /// <summary>
+        /// The Y axis (vertical)
+        /// </summary>
+        Y
+    }
+}

Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/Enums/VisualProperty.cs

@@ -0,0 +1,24 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.UI.Composition;
+
+namespace Microsoft.Toolkit.Uwp.UI.Extensions
+{
+    /// <summary>
+    /// Indicates a property of a <see cref="Visual"/> object.
+    /// </summary>
+    public enum VisualProperty
+    {
+        /// <summary>
+        /// The offset property of a <see cref="Visual"/> object.
+        /// </summary>
+        Offset,
+
+        /// <summary>
+        /// The translation property of a <see cref="Visual"/> object.
+        /// </summary>
+        Translation
+    }
+}