From 904be53ffaa891742d3c51ca5359ea5c41bd53fb Mon Sep 17 00:00:00 2001
From: Emmanuel Hansen <emmausssss@gmail.com>
Date: Wed, 29 Mar 2023 08:24:56 +0000
Subject: [PATCH] merge scroll viewer samples

---
 samples/ControlCatalog/MainView.xaml          |   3 -
 .../ControlCatalog/Pages/ScrollSnapPage.xaml  | 222 --------------
 .../Pages/ScrollSnapPage.xaml.cs              |  68 ----
 .../Pages/ScrollViewerPage.xaml               | 290 ++++++++++++++++--
 .../Pages/ScrollViewerPage.xaml.cs            |  37 +++
 5 files changed, 298 insertions(+), 322 deletions(-)
 delete mode 100644 samples/ControlCatalog/Pages/ScrollSnapPage.xaml
 delete mode 100644 samples/ControlCatalog/Pages/ScrollSnapPage.xaml.cs

diff --git a/samples/ControlCatalog/MainView.xaml b/samples/ControlCatalog/MainView.xaml
index 9f06525821..7ed2d67379 100644
--- a/samples/ControlCatalog/MainView.xaml
+++ b/samples/ControlCatalog/MainView.xaml
@@ -147,9 +147,6 @@
       <TabItem Header="ScrollViewer">
         <pages:ScrollViewerPage />
       </TabItem>
-      <TabItem Header="ScrollViewer Snapping">
-        <pages:ScrollSnapPage />
-      </TabItem>
       <TabItem Header="Slider">
         <pages:SliderPage />
       </TabItem>
diff --git a/samples/ControlCatalog/Pages/ScrollSnapPage.xaml b/samples/ControlCatalog/Pages/ScrollSnapPage.xaml
deleted file mode 100644
index fa206f0dff..0000000000
--- a/samples/ControlCatalog/Pages/ScrollSnapPage.xaml
+++ /dev/null
@@ -1,222 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             d:DesignHeight="800"
-             d:DesignWidth="400"
-             x:Class="ControlCatalog.Pages.ScrollSnapPage"
-             xmlns:pages="using:ControlCatalog.Pages"
-             x:DataType="pages:ScrollSnapPageViewModel">
-  <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock TextWrapping="Wrap"
-               Classes="h2">Scrollviewer can snap supported content both vertically and horizontally. Snapping occurs from scrolling with touch or pen.</TextBlock>
-
-    <Grid RowDefinitions="Auto, Auto, Auto, Auto, Auto">
-      <StackPanel Orientation="Horizontal"
-                  Spacing="4">
-        <StackPanel Orientation="Vertical"
-                    Spacing="4">
-          <TextBlock Text="Snap Point Type" />
-          <ComboBox ItemsSource="{Binding AvailableSnapPointsType}"
-                    SelectedItem="{Binding SnapPointsType}" />
-        </StackPanel>
-
-        <StackPanel Orientation="Vertical"
-                    Spacing="4">
-          <TextBlock Text="Snap Point Alignment" />
-          <ComboBox ItemsSource="{Binding AvailableSnapPointsAlignment}"
-                    SelectedItem="{Binding SnapPointsAlignment}" />
-        </StackPanel>
-
-        <ToggleSwitch IsChecked="{Binding AreSnapPointsRegular}"
-                      OffContent="No"
-                      OnContent="Yes"
-                      Content="Are Snap Points regular?" />
-      </StackPanel>
-      <TextBlock TextWrapping="Wrap"
-                 Grid.Row="1"
-                 Margin="0,10"
-                 Classes="h2">Vertical Snapping</TextBlock>
-
-      <Border
-        BorderBrush="Green"
-        BorderThickness="1"
-        Padding="0"
-        Grid.Row="2"
-        Margin="10, 5">
-        <ScrollViewer x:Name="VerticalSnapsScrollViewer"
-                      VerticalSnapPointsType="{Binding SnapPointsType}"
-                      VerticalSnapPointsAlignment="{Binding SnapPointsAlignment}"
-                      HorizontalAlignment="Stretch"
-                      Height="350"
-                      HorizontalScrollBarVisibility="Disabled">
-          <StackPanel AreVerticalSnapPointsRegular="{Binding AreSnapPointsRegular}"
-                      Orientation="Vertical"
-                      HorizontalAlignment="Stretch">
-            <Border Padding="5, 30"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 1"/>
-            </Border>
-            <Border Padding="5, 30"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 2"/>
-            </Border>
-            <Border Padding="5, 20"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 3"/>
-            </Border>
-            <Border Padding="5, 30"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 4"/>
-            </Border>
-            <Border Padding="5, 30"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 5"/>
-            </Border>
-            <Border Padding="5, 30"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 6"/>
-            </Border>
-            <Border Padding="5,8"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 7"/>
-            </Border>
-            <Border Padding="5, 30"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 8"/>
-            </Border>
-            <Border Padding="5,4"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 9"/>
-            </Border>
-            <Border Padding="5, 30"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 20"/>
-            </Border>
-            <Border Padding="5, 30"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 11"/>
-            </Border>
-            <Border Padding="5, 30"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         Text="Child 12"/>
-            </Border>
-          </StackPanel>
-        </ScrollViewer>
-      </Border>
-      <TextBlock TextWrapping="Wrap"
-                 Grid.Row="3"
-                 Margin="0,10"
-                 Classes="h2">Horizontal Snapping</TextBlock>
-      <Border
-        BorderBrush="Green"
-        BorderThickness="1"
-        Padding="0"
-        Grid.Row="4"
-        Margin="10, 10">
-        <ScrollViewer x:Name="HorizontalSnapsScrollViewer"
-                      HorizontalSnapPointsType="{Binding SnapPointsType}"
-                      HorizontalSnapPointsAlignment="{Binding SnapPointsAlignment}"
-                      HorizontalAlignment="Stretch"
-                      Height="350"
-                      HorizontalScrollBarVisibility="Auto"
-                      VerticalScrollBarVisibility="Disabled">
-          <StackPanel AreHorizontalSnapPointsRegular="{Binding AreSnapPointsRegular}"
-                      Orientation="Horizontal"
-                      HorizontalAlignment="Stretch">
-            <Border Padding="5, 30"
-                    Width="300"
-                    BorderBrush="Red"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         VerticalAlignment="Center"
-                         Text="Child 1"/>
-            </Border>
-            <Border Padding="5, 30"
-                    Width="300"
-                    BorderBrush="Red"
-                    VerticalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         VerticalAlignment="Center"
-                         Text="Child 2"/>
-            </Border>
-            <Border Padding="5, 20"
-                    Width="300"
-                    BorderBrush="Red"
-                    VerticalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         VerticalAlignment="Center"
-                         Text="Child 3"/>
-            </Border>
-            <Border Padding="5, 30"
-                    Width="300"
-                    BorderBrush="Red"
-                    VerticalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         VerticalAlignment="Center"
-                         Text="Child 4"/>
-            </Border>
-            <Border Padding="5, 30"
-                    Width="300"
-                    BorderBrush="Red"
-                    VerticalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         VerticalAlignment="Center"
-                         Text="Child 5"/>
-            </Border>
-            <Border Padding="5, 30"
-                    Width="300"
-                    BorderBrush="Red"
-                    VerticalAlignment="Stretch"
-                    BorderThickness="1">
-              <TextBlock FontWeight="Bold"
-                         VerticalAlignment="Center"
-                         Text="Child 6"/>
-            </Border>
-            
-          </StackPanel>
-        </ScrollViewer>
-      </Border>
-    </Grid>
-  </StackPanel>
-</UserControl>
diff --git a/samples/ControlCatalog/Pages/ScrollSnapPage.xaml.cs b/samples/ControlCatalog/Pages/ScrollSnapPage.xaml.cs
deleted file mode 100644
index 384dc67c66..0000000000
--- a/samples/ControlCatalog/Pages/ScrollSnapPage.xaml.cs
+++ /dev/null
@@ -1,68 +0,0 @@
-using System.Collections.Generic;
-using Avalonia.Controls;
-using Avalonia.Controls.Primitives;
-using Avalonia.Markup.Xaml;
-using MiniMvvm;
-
-namespace ControlCatalog.Pages
-{
-    public class ScrollSnapPageViewModel : ViewModelBase
-    {
-        private SnapPointsType _snapPointsType;
-        private SnapPointsAlignment _snapPointsAlignment;
-        private bool _areSnapPointsRegular;
-
-        public ScrollSnapPageViewModel()
-        {
-
-            AvailableSnapPointsType = new List<SnapPointsType>()
-            {
-                SnapPointsType.None,
-                SnapPointsType.Mandatory,
-                SnapPointsType.MandatorySingle
-            };
-
-            AvailableSnapPointsAlignment = new List<SnapPointsAlignment>()
-            {
-                SnapPointsAlignment.Near,
-                SnapPointsAlignment.Center,
-                SnapPointsAlignment.Far,
-            };
-        }
-
-        public bool AreSnapPointsRegular
-        {
-            get => _areSnapPointsRegular;
-            set => this.RaiseAndSetIfChanged(ref _areSnapPointsRegular, value);
-        }
-
-        public SnapPointsType SnapPointsType
-        {
-            get => _snapPointsType;
-            set => this.RaiseAndSetIfChanged(ref _snapPointsType, value);
-        }
-
-        public SnapPointsAlignment SnapPointsAlignment
-        {
-            get => _snapPointsAlignment;
-            set => this.RaiseAndSetIfChanged(ref _snapPointsAlignment, value);
-        }
-        public List<SnapPointsType> AvailableSnapPointsType { get; }
-        public List<SnapPointsAlignment> AvailableSnapPointsAlignment { get; }
-    }
-
-    public class ScrollSnapPage : UserControl
-    {
-        public ScrollSnapPage()
-        {
-            this.InitializeComponent();
-
-            DataContext = new ScrollSnapPageViewModel();
-        }
-
-        private void InitializeComponent()
-        {
-            AvaloniaXamlLoader.Load(this);
-        }
-    }
-}
diff --git a/samples/ControlCatalog/Pages/ScrollViewerPage.xaml b/samples/ControlCatalog/Pages/ScrollViewerPage.xaml
index 1a3d61eb85..4af61c3399 100644
--- a/samples/ControlCatalog/Pages/ScrollViewerPage.xaml
+++ b/samples/ControlCatalog/Pages/ScrollViewerPage.xaml
@@ -3,35 +3,267 @@
              xmlns:pages="using:ControlCatalog.Pages"
              x:Class="ControlCatalog.Pages.ScrollViewerPage"
              x:DataType="pages:ScrollViewerPageViewModel">
-  <StackPanel Orientation="Vertical" Spacing="20">
-    <TextBlock TextWrapping="Wrap" Classes="h2">Allows for horizontal and vertical content scrolling. Supports snapping on touch and pointer wheel scrolling.</TextBlock>
-
-    <Grid ColumnDefinitions="Auto, *">
-      <StackPanel Orientation="Vertical" Spacing="4">
-        <ToggleSwitch IsChecked="{Binding AllowAutoHide}" Content="Allow auto hide" />
-        <ToggleSwitch IsChecked="{Binding EnableInertia}" Content="Enable Inertia" />
-
-        <StackPanel Orientation="Vertical" Spacing="4">
-          <TextBlock Text="Horizontal Scroll" />
-          <ComboBox ItemsSource="{Binding AvailableVisibility}" SelectedItem="{Binding HorizontalScrollVisibility}" />
-        </StackPanel>
-
-        <StackPanel Orientation="Vertical" Spacing="4">
-          <TextBlock Text="Vertical Scroll" />
-          <ComboBox ItemsSource="{Binding AvailableVisibility}" SelectedItem="{Binding VerticalScrollVisibility}" />
-        </StackPanel>
+  <TabControl>
+    <TabItem Header="ScrollViewer">
+      <StackPanel Orientation="Vertical"
+                  Spacing="20">
+        <TextBlock TextWrapping="Wrap"
+                   Classes="h2">Allows for horizontal and vertical content scrolling. Supports snapping on touch and pointer wheel scrolling.</TextBlock>
+
+        <Grid ColumnDefinitions="Auto, *">
+          <StackPanel Orientation="Vertical"
+                      Spacing="4">
+            <ToggleSwitch IsChecked="{Binding AllowAutoHide}"
+                          Content="Allow auto hide" />
+            <ToggleSwitch IsChecked="{Binding EnableInertia}"
+                          Content="Enable Inertia" />
+
+            <StackPanel Orientation="Vertical"
+                        Spacing="4">
+              <TextBlock Text="Horizontal Scroll" />
+              <ComboBox ItemsSource="{Binding AvailableVisibility}"
+                        SelectedItem="{Binding HorizontalScrollVisibility}" />
+            </StackPanel>
+
+            <StackPanel Orientation="Vertical"
+                        Spacing="4">
+              <TextBlock Text="Vertical Scroll" />
+              <ComboBox ItemsSource="{Binding AvailableVisibility}"
+                        SelectedItem="{Binding VerticalScrollVisibility}" />
+            </StackPanel>
+          </StackPanel>
+
+          <ScrollViewer x:Name="ScrollViewer"
+                        Grid.Column="1"
+                        Width="400"
+                        Height="400"
+                        IsScrollInertiaEnabled="{Binding EnableInertia}"
+                        AllowAutoHide="{Binding AllowAutoHide}"
+                        HorizontalScrollBarVisibility="{Binding HorizontalScrollVisibility}"
+                        VerticalScrollBarVisibility="{Binding VerticalScrollVisibility}">
+            <Image Width="800"
+                   Height="800"
+                   Stretch="UniformToFill"
+                   Source="/Assets/delicate-arch-896885_640.jpg" />
+          </ScrollViewer>
+        </Grid>
       </StackPanel>
+    </TabItem>
+    <TabItem Header="Snapping">
+      <StackPanel Orientation="Vertical"
+                  Spacing="4">
+        <TextBlock TextWrapping="Wrap"
+                   Classes="h2">Scrollviewer can snap supported content both vertically and horizontally. Snapping occurs from scrolling with touch or pen.</TextBlock>
+
+        <Grid RowDefinitions="Auto, Auto, Auto, Auto, Auto">
+          <StackPanel Orientation="Horizontal"
+                      Spacing="4">
+            <StackPanel Orientation="Vertical"
+                        Spacing="4">
+              <TextBlock Text="Snap Point Type" />
+              <ComboBox ItemsSource="{Binding AvailableSnapPointsType}"
+                        SelectedItem="{Binding SnapPointsType}" />
+            </StackPanel>
 
-      <ScrollViewer x:Name="ScrollViewer"
-                    Grid.Column="1"
-                    Width="400" Height="400"
-                    IsScrollInertiaEnabled="{Binding EnableInertia}"
-                    AllowAutoHide="{Binding AllowAutoHide}"
-                    HorizontalScrollBarVisibility="{Binding HorizontalScrollVisibility}"
-                    VerticalScrollBarVisibility="{Binding VerticalScrollVisibility}">
-        <Image Width="800" Height="800" Stretch="UniformToFill"
-               Source="/Assets/delicate-arch-896885_640.jpg" />
-      </ScrollViewer>
-    </Grid>
-  </StackPanel>
+            <StackPanel Orientation="Vertical"
+                        Spacing="4">
+              <TextBlock Text="Snap Point Alignment" />
+              <ComboBox ItemsSource="{Binding AvailableSnapPointsAlignment}"
+                        SelectedItem="{Binding SnapPointsAlignment}" />
+            </StackPanel>
+
+            <ToggleSwitch IsChecked="{Binding AreSnapPointsRegular}"
+                          OffContent="No"
+                          OnContent="Yes"
+                          Content="Are Snap Points regular?" />
+          </StackPanel>
+          <TextBlock TextWrapping="Wrap"
+                     Grid.Row="1"
+                     Margin="0,10"
+                     Classes="h2">Vertical Snapping</TextBlock>
+
+          <Border
+            BorderBrush="Green"
+            BorderThickness="1"
+            Padding="0"
+            Grid.Row="2"
+            Margin="10, 5">
+            <ScrollViewer x:Name="VerticalSnapsScrollViewer"
+                          VerticalSnapPointsType="{Binding SnapPointsType}"
+                          VerticalSnapPointsAlignment="{Binding SnapPointsAlignment}"
+                          HorizontalAlignment="Stretch"
+                          Height="350"
+                          HorizontalScrollBarVisibility="Disabled">
+              <StackPanel AreVerticalSnapPointsRegular="{Binding AreSnapPointsRegular}"
+                          Orientation="Vertical"
+                          HorizontalAlignment="Stretch">
+                <Border Padding="5, 30"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 1"/>
+                </Border>
+                <Border Padding="5, 30"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 2"/>
+                </Border>
+                <Border Padding="5, 20"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 3"/>
+                </Border>
+                <Border Padding="5, 30"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 4"/>
+                </Border>
+                <Border Padding="5, 30"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 5"/>
+                </Border>
+                <Border Padding="5, 30"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 6"/>
+                </Border>
+                <Border Padding="5,8"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 7"/>
+                </Border>
+                <Border Padding="5, 30"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 8"/>
+                </Border>
+                <Border Padding="5,4"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 9"/>
+                </Border>
+                <Border Padding="5, 30"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 20"/>
+                </Border>
+                <Border Padding="5, 30"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 11"/>
+                </Border>
+                <Border Padding="5, 30"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             Text="Child 12"/>
+                </Border>
+              </StackPanel>
+            </ScrollViewer>
+          </Border>
+          <TextBlock TextWrapping="Wrap"
+                     Grid.Row="3"
+                     Margin="0,10"
+                     Classes="h2">Horizontal Snapping</TextBlock>
+          <Border
+            BorderBrush="Green"
+            BorderThickness="1"
+            Padding="0"
+            Grid.Row="4"
+            Margin="10, 10">
+            <ScrollViewer x:Name="HorizontalSnapsScrollViewer"
+                          HorizontalSnapPointsType="{Binding SnapPointsType}"
+                          HorizontalSnapPointsAlignment="{Binding SnapPointsAlignment}"
+                          HorizontalAlignment="Stretch"
+                          Height="350"
+                          HorizontalScrollBarVisibility="Auto"
+                          VerticalScrollBarVisibility="Disabled">
+              <StackPanel AreHorizontalSnapPointsRegular="{Binding AreSnapPointsRegular}"
+                          Orientation="Horizontal"
+                          HorizontalAlignment="Stretch">
+                <Border Padding="5, 30"
+                        Width="300"
+                        BorderBrush="Red"
+                        HorizontalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             VerticalAlignment="Center"
+                             Text="Child 1"/>
+                </Border>
+                <Border Padding="5, 30"
+                        Width="300"
+                        BorderBrush="Red"
+                        VerticalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             VerticalAlignment="Center"
+                             Text="Child 2"/>
+                </Border>
+                <Border Padding="5, 20"
+                        Width="300"
+                        BorderBrush="Red"
+                        VerticalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             VerticalAlignment="Center"
+                             Text="Child 3"/>
+                </Border>
+                <Border Padding="5, 30"
+                        Width="300"
+                        BorderBrush="Red"
+                        VerticalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             VerticalAlignment="Center"
+                             Text="Child 4"/>
+                </Border>
+                <Border Padding="5, 30"
+                        Width="300"
+                        BorderBrush="Red"
+                        VerticalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             VerticalAlignment="Center"
+                             Text="Child 5"/>
+                </Border>
+                <Border Padding="5, 30"
+                        Width="300"
+                        BorderBrush="Red"
+                        VerticalAlignment="Stretch"
+                        BorderThickness="1">
+                  <TextBlock FontWeight="Bold"
+                             VerticalAlignment="Center"
+                             Text="Child 6"/>
+                </Border>
+
+              </StackPanel>
+            </ScrollViewer>
+          </Border>
+        </Grid>
+      </StackPanel>
+    </TabItem>
+  </TabControl>  
 </UserControl>
diff --git a/samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs b/samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs
index a097f1f951..7082ca1bf6 100644
--- a/samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs
+++ b/samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs
@@ -12,6 +12,9 @@ namespace ControlCatalog.Pages
         private bool _enableInertia;
         private ScrollBarVisibility _horizontalScrollVisibility;
         private ScrollBarVisibility _verticalScrollVisibility;
+        private SnapPointsType _snapPointsType;
+        private SnapPointsAlignment _snapPointsAlignment;
+        private bool _areSnapPointsRegular;
 
         public ScrollViewerPageViewModel()
         {
@@ -23,6 +26,20 @@ namespace ControlCatalog.Pages
                 ScrollBarVisibility.Disabled,
             };
 
+            AvailableSnapPointsType = new List<SnapPointsType>()
+            {
+                SnapPointsType.None,
+                SnapPointsType.Mandatory,
+                SnapPointsType.MandatorySingle
+            };
+
+            AvailableSnapPointsAlignment = new List<SnapPointsAlignment>()
+            {
+                SnapPointsAlignment.Near,
+                SnapPointsAlignment.Center,
+                SnapPointsAlignment.Far,
+            };
+
             HorizontalScrollVisibility = ScrollBarVisibility.Auto;
             VerticalScrollVisibility = ScrollBarVisibility.Auto;
             AllowAutoHide = true;
@@ -54,6 +71,26 @@ namespace ControlCatalog.Pages
         }
 
         public List<ScrollBarVisibility> AvailableVisibility { get; }
+
+        public bool AreSnapPointsRegular
+        {
+            get => _areSnapPointsRegular;
+            set => this.RaiseAndSetIfChanged(ref _areSnapPointsRegular, value);
+        }
+
+        public SnapPointsType SnapPointsType
+        {
+            get => _snapPointsType;
+            set => this.RaiseAndSetIfChanged(ref _snapPointsType, value);
+        }
+
+        public SnapPointsAlignment SnapPointsAlignment
+        {
+            get => _snapPointsAlignment;
+            set => this.RaiseAndSetIfChanged(ref _snapPointsAlignment, value);
+        }
+        public List<SnapPointsType> AvailableSnapPointsType { get; }
+        public List<SnapPointsAlignment> AvailableSnapPointsAlignment { get; }
     }
 
     public class ScrollViewerPage : UserControl