From 8c101710773276f19e05bb0fbcfcd8633bb39734 Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Fri, 3 Apr 2020 13:42:59 +0200
Subject: [PATCH 01/11] Removed unnecessary using directive

---
 .../Extensions/ScrollViewer/ScrollViewerExtensions.cs          | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.cs
index 4549a53b550..bf209aacc6f 100644
--- a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.cs
@@ -2,7 +2,6 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
-using System;
 using System.Linq;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
@@ -11,7 +10,7 @@
 namespace Microsoft.Toolkit.Uwp.UI.Extensions
 {
     /// <summary>
-    /// Provides attached dependency properties for the <see cref="Windows.UI.Xaml.Controls.ListViewBase"/>
+    /// Provides attached dependency properties for the <see cref="ListViewBase"/>
     /// </summary>
     public static partial class ScrollViewerExtensions
     {

From 447434f869c552f2f6559a086d4fee6ed86615a9 Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Fri, 3 Apr 2020 13:48:51 +0200
Subject: [PATCH 02/11] Added ScrollViewer expression animation extensions

---
 Microsoft.Toolkit.Uwp.UI/Enums/Axis.cs        | 22 +++++++
 ...llViewerExtensions.ExpressionAnimations.cs | 60 +++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 Microsoft.Toolkit.Uwp.UI/Enums/Axis.cs
 create mode 100644 Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs

diff --git a/Microsoft.Toolkit.Uwp.UI/Enums/Axis.cs b/Microsoft.Toolkit.Uwp.UI/Enums/Axis.cs
new file mode 100644
index 00000000000..7828c86d177
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.UI/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.Enums
+{
+    /// <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
+    }
+}
diff --git a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
new file mode 100644
index 00000000000..e4933116271
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
@@ -0,0 +1,60 @@
+// 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 Microsoft.Toolkit.Uwp.UI.Enums;
+using Windows.UI.Composition;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Hosting;
+
+namespace Microsoft.Toolkit.Uwp.UI.Extensions
+{
+    /// <summary>
+    /// Provides attached dependency properties for the <see cref="ListViewBase"/>
+    /// </summary>
+    public static partial class ScrollViewerExtensions
+    {
+        /// <summary>
+        /// Creates and starts an animation on the target element that binds either the X or Y axis of the source <see cref="ScrollViewer"/>.
+        /// </summary>
+        /// <param name="scroller">The source <see cref="ScrollViewer"/> control to use.</param>
+        /// <param name="target">The target <see cref="UIElement"/> that will be animated.</param>
+        /// <param name="axis">The scrolling axis of the source <see cref="ScrollViewer"/>.</param>
+        /// <returns>An <see cref="ExpressionAnimation"/> instance that represents an already running animation.</returns>
+        public static ExpressionAnimation StartExpressionAnimation(
+            this ScrollViewer scroller,
+            UIElement target,
+            Axis axis)
+        {
+            return scroller.StartExpressionAnimation(target, axis, axis);
+        }
+
+        /// <summary>
+        /// Creates and starts an animation on the target element that binds either the X or Y axis of the source <see cref="ScrollViewer"/>
+        /// </summary>
+        /// <param name="scroller">The source <see cref="ScrollViewer"/> control to use</param>
+        /// <param name="target">The target <see cref="UIElement"/> that will be animated</param>
+        /// <param name="sourceAxis">The scrolling axis of the source <see cref="ScrollViewer"/></param>
+        /// <param name="targetAxis">The optional scrolling axis of the target element, if <see langword="null"/> the source axis will be used</param>
+        /// <returns>An <see cref="ExpressionAnimation"/> instance that represents an already running animation.</returns>
+        public static ExpressionAnimation StartExpressionAnimation(
+            this ScrollViewer scroller,
+            UIElement target,
+            Axis sourceAxis,
+            Axis targetAxis)
+        {
+            CompositionPropertySet scrollSet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scroller);
+
+            ExpressionAnimation animation = scrollSet.Compositor.CreateExpressionAnimation($"{nameof(scroller)}.{nameof(UIElement.Translation)}.{sourceAxis}");
+
+            animation.SetReferenceParameter(nameof(scroller), scrollSet);
+
+            Visual visual = ElementCompositionPreview.GetElementVisual(target);
+
+            visual.StartAnimation($"{nameof(Visual.Offset)}.{targetAxis}", animation);
+
+            return animation;
+        }
+    }
+}
\ No newline at end of file

From 271bdfc1abe6ce8a9da082a67a571a783c5caec6 Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Tue, 12 May 2020 13:29:04 +0200
Subject: [PATCH 03/11] Added VisualProperty option

---
 .../Enums/VisualProperty.cs                   | 24 +++++++++++++++++++
 ...llViewerExtensions.ExpressionAnimations.cs | 24 +++++++++++++++----
 2 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 Microsoft.Toolkit.Uwp.UI/Enums/VisualProperty.cs

diff --git a/Microsoft.Toolkit.Uwp.UI/Enums/VisualProperty.cs b/Microsoft.Toolkit.Uwp.UI/Enums/VisualProperty.cs
new file mode 100644
index 00000000000..de9ecb3af27
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.UI/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.Enums
+{
+    /// <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
+    }
+}
diff --git a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
index e4933116271..3d47d48928c 100644
--- a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
@@ -2,6 +2,8 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using System;
+using System.Numerics;
 using Microsoft.Toolkit.Uwp.UI.Enums;
 using Windows.UI.Composition;
 using Windows.UI.Xaml;
@@ -21,13 +23,15 @@ public static partial class ScrollViewerExtensions
         /// <param name="scroller">The source <see cref="ScrollViewer"/> control to use.</param>
         /// <param name="target">The target <see cref="UIElement"/> that will be animated.</param>
         /// <param name="axis">The scrolling axis of the source <see cref="ScrollViewer"/>.</param>
+        /// <param name="property">The target <see cref="Visual"/> property to animate.</param>
         /// <returns>An <see cref="ExpressionAnimation"/> instance that represents an already running animation.</returns>
         public static ExpressionAnimation StartExpressionAnimation(
             this ScrollViewer scroller,
             UIElement target,
-            Axis axis)
+            Axis axis,
+            VisualProperty property = VisualProperty.Translation)
         {
-            return scroller.StartExpressionAnimation(target, axis, axis);
+            return scroller.StartExpressionAnimation(target, axis, axis, property);
         }
 
         /// <summary>
@@ -37,12 +41,14 @@ public static ExpressionAnimation StartExpressionAnimation(
         /// <param name="target">The target <see cref="UIElement"/> that will be animated</param>
         /// <param name="sourceAxis">The scrolling axis of the source <see cref="ScrollViewer"/></param>
         /// <param name="targetAxis">The optional scrolling axis of the target element, if <see langword="null"/> the source axis will be used</param>
+        /// <param name="property">The target <see cref="Visual"/> property to animate.</param>
         /// <returns>An <see cref="ExpressionAnimation"/> instance that represents an already running animation.</returns>
         public static ExpressionAnimation StartExpressionAnimation(
             this ScrollViewer scroller,
             UIElement target,
             Axis sourceAxis,
-            Axis targetAxis)
+            Axis targetAxis,
+            VisualProperty property = VisualProperty.Translation)
         {
             CompositionPropertySet scrollSet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scroller);
 
@@ -52,7 +58,17 @@ public static ExpressionAnimation StartExpressionAnimation(
 
             Visual visual = ElementCompositionPreview.GetElementVisual(target);
 
-            visual.StartAnimation($"{nameof(Visual.Offset)}.{targetAxis}", animation);
+            switch (property)
+            {
+                case VisualProperty.Translation:
+                    ElementCompositionPreview.SetIsTranslationEnabled(target, true);
+                    visual.StartAnimation($"{nameof(Matrix4x4.Translation)}.{targetAxis}", animation);
+                    break;
+                case VisualProperty.Offset:
+                    visual.StartAnimation($"{nameof(Visual.Offset)}.{targetAxis}", animation);
+                    break;
+                default: throw new ArgumentException($"Invalid target property: {property}", nameof(property));
+            }
 
             return animation;
         }

From a633fb4bada4cd65ab0f9c2804001373660f9acf Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Tue, 12 May 2020 13:30:23 +0200
Subject: [PATCH 04/11] Added example to ScrollViewerExtensions sample page

---
 .../ScrollViewerExtensionsCode.bind           | 43 +++++++++++++++++
 .../ScrollViewerExtensionsPage.xaml           | 46 ++++++++++++++++++-
 .../ScrollViewerExtensionsPage.xaml.cs        | 11 ++++-
 3 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsCode.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsCode.bind
index d65a810e70b..bcf32571610 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsCode.bind
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsCode.bind
@@ -67,5 +67,48 @@
         </Style>
       </ListView.ItemContainerStyle>
     </ListView>
+    <StackPanel x:Name="shapesPanel"
+                HorizontalAlignment="Center"
+                Margin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
+                Padding="12"
+                Spacing="24">
+      <Border Height="100"
+              Width="100"
+              Background="#20000000">
+        <Polygon
+          Points="0,0 0,36 30,18.5"
+          Stroke="DarkGreen"
+          Fill="Green"
+          VerticalAlignment="Center"
+          HorizontalAlignment="Center"/>
+      </Border>
+      <Border Height="100"
+              Width="100"
+              Background="#20000000">
+        <StackPanel Orientation="Horizontal"
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Center"
+                    Spacing="4">
+          <Polygon
+            Points="0,0 0,36 16,18.5"
+            Stroke="Blue"
+            Fill="DodgerBlue"/>
+          <Polygon
+            Points="0,0 0,36 16,18.5"
+            Stroke="Blue"
+            Fill="DodgerBlue"/>
+        </StackPanel>
+      </Border>
+      <Border Height="100"
+              Width="100"
+              Background="#20000000">
+        <Polygon
+          Points="0,0 0,36 36,36 36,0"
+          Stroke="DarkRed"
+          Fill="Crimson"
+          VerticalAlignment="Center"
+          HorizontalAlignment="Center"/>
+      </Border>
+    </StackPanel>
   </Grid>
 </Page>
\ No newline at end of file
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml
index 44271197c6f..2b61098cb62 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml
+++ b/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,48 @@
                 </Style>
             </ListView.ItemContainerStyle>
         </ListView>
+        <StackPanel x:Name="shapesPanel"
+                    HorizontalAlignment="Center"
+                    Margin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
+                    Padding="12"
+                    Spacing="24">
+            <Border Height="100"
+                    Width="100"
+                    Background="#20000000">
+                <Polygon            
+                    Points="0,0 0,36 30,18.5" 
+                    Stroke="DarkGreen" 
+                    Fill="Green" 
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Center"/>
+            </Border>
+            <Border Height="100"
+                    Width="100"
+                    Background="#20000000">
+                <StackPanel Orientation="Horizontal"
+                            VerticalAlignment="Center"
+                            HorizontalAlignment="Center"
+                            Spacing="4">
+                    <Polygon 
+                        Points="0,0 0,36 16,18.5"
+                        Stroke="Blue"
+                        Fill="DodgerBlue"/>
+                    <Polygon
+                        Points="0,0 0,36 16,18.5"
+                        Stroke="Blue"
+                        Fill="DodgerBlue"/>
+                </StackPanel>
+            </Border>
+            <Border Height="100"
+                    Width="100"
+                    Background="#20000000">
+                <Polygon            
+                    Points="0,0 0,36 36,36 36,0" 
+                    Stroke="DarkRed" 
+                    Fill="Crimson" 
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Center"/>
+            </Border>
+        </StackPanel>
     </Grid>
 </Page>
\ No newline at end of file
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs
index eb277d11860..d8b6a161667 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs
@@ -4,11 +4,10 @@
 
 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;
+using Microsoft.Toolkit.Uwp.UI.Enums;
 
 namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
 {
@@ -35,6 +34,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);
+                }
             }
         }
     }

From f3fd8435a1e014477b2d46275e4151ce343018c3 Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Tue, 12 May 2020 13:33:16 +0200
Subject: [PATCH 05/11] Minor code refactoring

---
 .../ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs   | 1 -
 .../{ => Extensions/ScrollViewer}/Enums/Axis.cs                 | 2 +-
 .../{ => Extensions/ScrollViewer}/Enums/VisualProperty.cs       | 2 +-
 .../ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs | 1 -
 4 files changed, 2 insertions(+), 4 deletions(-)
 rename Microsoft.Toolkit.Uwp.UI/{ => Extensions/ScrollViewer}/Enums/Axis.cs (91%)
 rename Microsoft.Toolkit.Uwp.UI/{ => Extensions/ScrollViewer}/Enums/VisualProperty.cs (93%)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs
index d8b6a161667..8cea51a5441 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml.cs
@@ -7,7 +7,6 @@
 using Microsoft.Toolkit.Uwp.UI.Extensions;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-using Microsoft.Toolkit.Uwp.UI.Enums;
 
 namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
 {
diff --git a/Microsoft.Toolkit.Uwp.UI/Enums/Axis.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/Enums/Axis.cs
similarity index 91%
rename from Microsoft.Toolkit.Uwp.UI/Enums/Axis.cs
rename to Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/Enums/Axis.cs
index 7828c86d177..6be7a01a3f6 100644
--- a/Microsoft.Toolkit.Uwp.UI/Enums/Axis.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/Enums/Axis.cs
@@ -2,7 +2,7 @@
 // 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.Enums
+namespace Microsoft.Toolkit.Uwp.UI.Extensions
 {
     /// <summary>
     /// Indicates an axis in the 2D space
diff --git a/Microsoft.Toolkit.Uwp.UI/Enums/VisualProperty.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/Enums/VisualProperty.cs
similarity index 93%
rename from Microsoft.Toolkit.Uwp.UI/Enums/VisualProperty.cs
rename to Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/Enums/VisualProperty.cs
index de9ecb3af27..2ec4967ce02 100644
--- a/Microsoft.Toolkit.Uwp.UI/Enums/VisualProperty.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/Enums/VisualProperty.cs
@@ -4,7 +4,7 @@
 
 using Windows.UI.Composition;
 
-namespace Microsoft.Toolkit.Uwp.UI.Enums
+namespace Microsoft.Toolkit.Uwp.UI.Extensions
 {
     /// <summary>
     /// Indicates a property of a <see cref="Visual"/> object.
diff --git a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
index 3d47d48928c..defaebb6fb8 100644
--- a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
@@ -4,7 +4,6 @@
 
 using System;
 using System.Numerics;
-using Microsoft.Toolkit.Uwp.UI.Enums;
 using Windows.UI.Composition;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;

From b3d12814957026dda820762fb3b46bb71c451400 Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Tue, 12 May 2020 13:37:17 +0200
Subject: [PATCH 06/11] Added C# sample code

---
 .../Microsoft.Toolkit.Uwp.SampleApp.csproj    |   1 +
 .../ScrollViewerExtensionsCode.bind           | 120 ++----------------
 .../ScrollViewerExtensionsXaml.bind           | 114 +++++++++++++++++
 .../SamplePages/samples.json                  |   3 +-
 4 files changed, 125 insertions(+), 113 deletions(-)
 create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
index 1dc21a42558..b56cc8ca2c5 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
+++ b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
@@ -546,6 +546,7 @@
     <Content Include="SamplePages\Eyedropper\EyedropperCode.bind" />
     <Content Include="SamplePages\TokenizingTextBox\TokenizingTextBoxCode.bind" />
     <Content Include="SamplePages\ObservableGroup\ObservableGroup.bind" />
+    <Content Include="SamplePages\ScrollViewerExtensions\ScrollViewerExtensionsXaml.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsCode.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsCode.bind
index bcf32571610..d6969770a7f 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsCode.bind
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsCode.bind
@@ -1,114 +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>
-    <StackPanel x:Name="shapesPanel"
-                HorizontalAlignment="Center"
-                Margin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
-                Padding="12"
-                Spacing="24">
-      <Border Height="100"
-              Width="100"
-              Background="#20000000">
-        <Polygon
-          Points="0,0 0,36 30,18.5"
-          Stroke="DarkGreen"
-          Fill="Green"
-          VerticalAlignment="Center"
-          HorizontalAlignment="Center"/>
-      </Border>
-      <Border Height="100"
-              Width="100"
-              Background="#20000000">
-        <StackPanel Orientation="Horizontal"
-                    VerticalAlignment="Center"
-                    HorizontalAlignment="Center"
-                    Spacing="4">
-          <Polygon
-            Points="0,0 0,36 16,18.5"
-            Stroke="Blue"
-            Fill="DodgerBlue"/>
-          <Polygon
-            Points="0,0 0,36 16,18.5"
-            Stroke="Blue"
-            Fill="DodgerBlue"/>
-        </StackPanel>
-      </Border>
-      <Border Height="100"
-              Width="100"
-              Background="#20000000">
-        <Polygon
-          Points="0,0 0,36 36,36 36,0"
-          Stroke="DarkRed"
-          Fill="Crimson"
-          VerticalAlignment="Center"
-          HorizontalAlignment="Center"/>
-      </Border>
-    </StackPanel>
-  </Grid>
-</Page>
\ No newline at end of file
+// 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);
\ No newline at end of file
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
new file mode 100644
index 00000000000..bcf32571610
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
@@ -0,0 +1,114 @@
+<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>
+    <StackPanel x:Name="shapesPanel"
+                HorizontalAlignment="Center"
+                Margin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
+                Padding="12"
+                Spacing="24">
+      <Border Height="100"
+              Width="100"
+              Background="#20000000">
+        <Polygon
+          Points="0,0 0,36 30,18.5"
+          Stroke="DarkGreen"
+          Fill="Green"
+          VerticalAlignment="Center"
+          HorizontalAlignment="Center"/>
+      </Border>
+      <Border Height="100"
+              Width="100"
+              Background="#20000000">
+        <StackPanel Orientation="Horizontal"
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Center"
+                    Spacing="4">
+          <Polygon
+            Points="0,0 0,36 16,18.5"
+            Stroke="Blue"
+            Fill="DodgerBlue"/>
+          <Polygon
+            Points="0,0 0,36 16,18.5"
+            Stroke="Blue"
+            Fill="DodgerBlue"/>
+        </StackPanel>
+      </Border>
+      <Border Height="100"
+              Width="100"
+              Background="#20000000">
+        <Polygon
+          Points="0,0 0,36 36,36 36,0"
+          Stroke="DarkRed"
+          Fill="Crimson"
+          VerticalAlignment="Center"
+          HorizontalAlignment="Center"/>
+      </Border>
+    </StackPanel>
+  </Grid>
+</Page>
\ No newline at end of file
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
index e40eb165412..7ab16cc3c89 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
@@ -1102,7 +1102,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"
       },

From 31a1b8dd3e554e2686fa1716244389dc618c3a43 Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Thu, 28 May 2020 22:17:11 +0200
Subject: [PATCH 07/11] Fixed XML docs for the ScrollViewerExtensions class

---
 .../ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
index defaebb6fb8..0b98f21b66f 100644
--- a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
@@ -12,7 +12,7 @@
 namespace Microsoft.Toolkit.Uwp.UI.Extensions
 {
     /// <summary>
-    /// Provides attached dependency properties for the <see cref="ListViewBase"/>
+    /// Provides attached dependency properties for the <see cref="ScrollViewer"/> control.
     /// </summary>
     public static partial class ScrollViewerExtensions
     {

From 50b455b1822ac7eb8acb19c5b770942b6465b5c4 Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Thu, 28 May 2020 22:32:44 +0200
Subject: [PATCH 08/11] Added more docs to the sample page

---
 .../ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
index bcf32571610..c3c51e8c0a8 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
@@ -67,6 +67,11 @@
         </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}}"
@@ -74,6 +79,7 @@
                 Spacing="24">
       <Border Height="100"
               Width="100"
+              Margin="0,56,0,0"
               Background="#20000000">
         <Polygon
           Points="0,0 0,36 30,18.5"

From 1a2c61066fa04afd1fb929bbc3f87de1d9ae1a82 Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Fri, 29 May 2020 00:14:51 +0200
Subject: [PATCH 09/11] Tweaked sample page a bit more

---
 .../ScrollViewerExtensionsXaml.bind                      | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
index c3c51e8c0a8..f730ed6109d 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
@@ -105,6 +105,15 @@
             Fill="DodgerBlue"/>
         </StackPanel>
       </Border>
+      <TextBlock
+        Margin="0,20,0,0"
+        Height="100"
+        FontSize="24"
+        TextAlignment="Center">
+        <Run Text="Look at me, I'm floating between"/>
+        <LineBreak/>
+        <Run Text="two different ListView items!"/>
+      </TextBlock>
       <Border Height="100"
               Width="100"
               Background="#20000000">

From 74c5d32946b8bfdaa129c6135c9d47c453f6d924 Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Fri, 29 May 2020 01:06:23 +0200
Subject: [PATCH 10/11] Removed bounding boxes in sample page

---
 .../ScrollViewerExtensionsPage.xaml           | 76 +++++++++----------
 .../ScrollViewerExtensionsXaml.bind           | 70 +++++++----------
 2 files changed, 66 insertions(+), 80 deletions(-)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml
index 2b61098cb62..08bf65c2e7c 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsPage.xaml
@@ -68,45 +68,43 @@
         <StackPanel x:Name="shapesPanel"
                     HorizontalAlignment="Center"
                     Margin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
-                    Padding="12"
-                    Spacing="24">
-            <Border Height="100"
-                    Width="100"
-                    Background="#20000000">
-                <Polygon            
-                    Points="0,0 0,36 30,18.5" 
-                    Stroke="DarkGreen" 
-                    Fill="Green" 
-                    VerticalAlignment="Center"
-                    HorizontalAlignment="Center"/>
-            </Border>
-            <Border Height="100"
-                    Width="100"
-                    Background="#20000000">
-                <StackPanel Orientation="Horizontal"
-                            VerticalAlignment="Center"
-                            HorizontalAlignment="Center"
-                            Spacing="4">
-                    <Polygon 
-                        Points="0,0 0,36 16,18.5"
-                        Stroke="Blue"
-                        Fill="DodgerBlue"/>
-                    <Polygon
-                        Points="0,0 0,36 16,18.5"
-                        Stroke="Blue"
-                        Fill="DodgerBlue"/>
-                </StackPanel>
-            </Border>
-            <Border Height="100"
-                    Width="100"
-                    Background="#20000000">
-                <Polygon            
-                    Points="0,0 0,36 36,36 36,0" 
-                    Stroke="DarkRed" 
-                    Fill="Crimson" 
-                    VerticalAlignment="Center"
-                    HorizontalAlignment="Center"/>
-            </Border>
+                    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>
\ No newline at end of file
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
index f730ed6109d..59737c4f9a2 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ScrollViewerExtensions/ScrollViewerExtensionsXaml.bind
@@ -75,38 +75,29 @@
     <StackPanel x:Name="shapesPanel"
                 HorizontalAlignment="Center"
                 Margin="{Binding MinHeight, ElementName=MyHeaderGrid, Converter={StaticResource DoubleTopThicknessConverter}}"
-                Padding="12"
-                Spacing="24">
-      <Border Height="100"
-              Width="100"
-              Margin="0,56,0,0"
-              Background="#20000000">
-        <Polygon
-          Points="0,0 0,36 30,18.5"
-          Stroke="DarkGreen"
-          Fill="Green"
-          VerticalAlignment="Center"
-          HorizontalAlignment="Center"/>
-      </Border>
-      <Border Height="100"
-              Width="100"
-              Background="#20000000">
-        <StackPanel Orientation="Horizontal"
-                    VerticalAlignment="Center"
-                    HorizontalAlignment="Center"
-                    Spacing="4">
-          <Polygon
-            Points="0,0 0,36 16,18.5"
-            Stroke="Blue"
-            Fill="DodgerBlue"/>
-          <Polygon
-            Points="0,0 0,36 16,18.5"
-            Stroke="Blue"
-            Fill="DodgerBlue"/>
-        </StackPanel>
-      </Border>
+                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
-        Margin="0,20,0,0"
         Height="100"
         FontSize="24"
         TextAlignment="Center">
@@ -114,16 +105,13 @@
         <LineBreak/>
         <Run Text="two different ListView items!"/>
       </TextBlock>
-      <Border Height="100"
-              Width="100"
-              Background="#20000000">
-        <Polygon
-          Points="0,0 0,36 36,36 36,0"
-          Stroke="DarkRed"
-          Fill="Crimson"
-          VerticalAlignment="Center"
-          HorizontalAlignment="Center"/>
-      </Border>
+      <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>
\ No newline at end of file

From 5c366a473a514c4679c41999f5471d8849a271ac Mon Sep 17 00:00:00 2001
From: Sergio Pedri <sergio0694@live.com>
Date: Fri, 29 May 2020 12:45:17 +0200
Subject: [PATCH 11/11] Fixed more XML docs

---
 .../ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs | 2 +-
 .../ScrollViewer/ScrollViewerExtensions.MiddleClickScrolling.cs | 2 +-
 .../ScrollViewer/ScrollViewerExtensions.Properties.cs           | 2 +-
 .../Extensions/ScrollViewer/ScrollViewerExtensions.cs           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
index 0b98f21b66f..a7624a7f0cf 100644
--- a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.ExpressionAnimations.cs
@@ -12,7 +12,7 @@
 namespace Microsoft.Toolkit.Uwp.UI.Extensions
 {
     /// <summary>
-    /// Provides attached dependency properties for the <see cref="ScrollViewer"/> control.
+    /// Provides attached dependency properties and methods for the <see cref="ScrollViewer"/> control.
     /// </summary>
     public static partial class ScrollViewerExtensions
     {
diff --git a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.MiddleClickScrolling.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.MiddleClickScrolling.cs
index ed252e38bc0..92eb76405f1 100644
--- a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.MiddleClickScrolling.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.MiddleClickScrolling.cs
@@ -15,7 +15,7 @@
 namespace Microsoft.Toolkit.Uwp.UI.Extensions
 {
     /// <summary>
-    /// Provides attached dependency properties for the <see cref="ScrollViewer"/> to scroll with middle click
+    /// Provides attached dependency properties and methods for the <see cref="ScrollViewer"/> control.
     /// </summary>
     public static partial class ScrollViewerExtensions
     {
diff --git a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.Properties.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.Properties.cs
index 16c6b02fc37..fcb8adf1373 100644
--- a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.Properties.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.Properties.cs
@@ -7,7 +7,7 @@
 namespace Microsoft.Toolkit.Uwp.UI.Extensions
 {
     /// <summary>
-    /// Provides attached dependency properties for the <see cref="Windows.UI.Xaml.Controls.ScrollViewer"/>
+    /// Provides attached dependency properties and methods for the <see cref="Windows.UI.Xaml.Controls.ScrollViewer"/> control.
     /// </summary>
     public partial class ScrollViewerExtensions
     {
diff --git a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.cs b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.cs
index bf209aacc6f..07f880b029c 100644
--- a/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.cs
+++ b/Microsoft.Toolkit.Uwp.UI/Extensions/ScrollViewer/ScrollViewerExtensions.cs
@@ -10,7 +10,7 @@
 namespace Microsoft.Toolkit.Uwp.UI.Extensions
 {
     /// <summary>
-    /// Provides attached dependency properties for the <see cref="ListViewBase"/>
+    /// Provides attached dependency properties and methods for the <see cref="ScrollViewer"/> control.
     /// </summary>
     public static partial class ScrollViewerExtensions
     {