diff --git a/samples/ControlCatalog/MainView.xaml b/samples/ControlCatalog/MainView.xaml
index 166b98436e..83776ec2c1 100644
--- a/samples/ControlCatalog/MainView.xaml
+++ b/samples/ControlCatalog/MainView.xaml
@@ -144,9 +144,12 @@
       <TabItem Header="RelativePanel">
         <pages:RelativePanelPage />
       </TabItem>
-        <TabItem Header="ScrollViewer">
+      <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
new file mode 100644
index 0000000000..e7e1060f31
--- /dev/null
+++ b/samples/ControlCatalog/Pages/ScrollSnapPage.xaml
@@ -0,0 +1,222 @@
+<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, or using the pointer wheel.</TextBlock>
+
+    <Grid RowDefinitions="Auto, Auto, Auto, Auto, Auto">
+      <StackPanel Orientation="Horizontal"
+                  Spacing="4">
+        <StackPanel Orientation="Vertical"
+                    Spacing="4">
+          <TextBlock Text="Snap Point Type" />
+          <ComboBox Items="{Binding AvailableSnapPointsType}"
+                    SelectedItem="{Binding SnapPointsType}" />
+        </StackPanel>
+
+        <StackPanel Orientation="Vertical"
+                    Spacing="4">
+          <TextBlock Text="Snap Point Alignment" />
+          <ComboBox Items="{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
new file mode 100644
index 0000000000..97aeb6bcdb
--- /dev/null
+++ b/samples/ControlCatalog/Pages/ScrollSnapPage.xaml.cs
@@ -0,0 +1,67 @@
+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 0eceb9e07d..1741c796db 100644
--- a/samples/ControlCatalog/Pages/ScrollViewerPage.xaml
+++ b/samples/ControlCatalog/Pages/ScrollViewerPage.xaml
@@ -31,141 +31,5 @@
                Source="/Assets/delicate-arch-896885_640.jpg" />
       </ScrollViewer>
     </Grid>
-    
-    <Grid ColumnDefinitions="Auto, *">
-      <StackPanel Orientation="Vertical" Spacing="4">
-        <StackPanel Orientation="Vertical" Spacing="4">
-          <TextBlock Text="Snap Point Type" />
-          <ComboBox Items="{Binding AvailableSnapPointsType}" SelectedItem="{Binding VerticalSnapPointsType}" />
-        </StackPanel>
-
-        <StackPanel Orientation="Vertical" Spacing="4">
-          <TextBlock Text="Snap Point Alignment" />
-          <ComboBox Items="{Binding AvailableSnapPointsAlignment}" SelectedItem="{Binding VerticalSnapPointsAlignment}" />
-        </StackPanel>
-
-        <ToggleSwitch IsChecked="{Binding AreSnapPointsRegular}"
-                      OffContent="No"
-                      OnContent="Yes"
-                      Content="Are Snap Points regular?" />
-      </StackPanel>
-
-      <ScrollViewer x:Name="VerticalSnapsScrollViewer"
-                    Grid.Column="1"
-                    Margin="5"
-                    VerticalSnapPointsType="{Binding VerticalSnapPointsType}"
-                    VerticalSnapPointsAlignment="{Binding VerticalSnapPointsAlignment}"
-                    Width="400" Height="200"
-                    HorizontalScrollBarVisibility="Disabled">
-        <StackPanel AreVerticalSnapPointsRegular="{Binding AreSnapPointsRegular}" Orientation="Vertical" HorizontalAlignment="Stretch">
-          <Border Padding="5"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 1"/>
-          </Border>
-          <Border Padding="5"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 2"/>
-          </Border>
-          <Border Padding="5, 10"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 3"/>
-          </Border>
-          <Border Padding="5"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 4"/>
-          </Border>
-          <Border Padding="5"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 5"/>
-          </Border>
-          <Border Padding="5"
-                  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"
-                  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"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 10"/>
-          </Border>
-          <Border Padding="5,0"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 11"/>
-          </Border>
-          <Border Padding="5"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 12"/>
-          </Border>
-          <Border Padding="5"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 13"/>
-          </Border>
-          <Border Padding="5,20"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 14"/>
-          </Border>
-          <Border Padding="5"
-                  BorderBrush="Red"
-                  HorizontalAlignment="Stretch"
-                  BorderThickness="1">
-            <TextBlock FontWeight="Bold"
-                       Text="Child 15"/>
-          </Border>
-        </StackPanel>
-      </ScrollViewer>
-    </Grid>
-
   </StackPanel>
 </UserControl>
diff --git a/samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs b/samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs
index 10244af5f3..dcd7a88a56 100644
--- a/samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs
+++ b/samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs
@@ -11,9 +11,6 @@ namespace ControlCatalog.Pages
         private bool _allowAutoHide;
         private ScrollBarVisibility _horizontalScrollVisibility;
         private ScrollBarVisibility _verticalScrollVisibility;
-        private SnapPointsType _verticalSnapPointsType;
-        private SnapPointsAlignment _verticalSnapPointsAlignment;
-        private bool _areSnapPointsRegular;
 
         public ScrollViewerPageViewModel()
         {
@@ -25,20 +22,6 @@ 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;
@@ -50,12 +33,6 @@ namespace ControlCatalog.Pages
             set => this.RaiseAndSetIfChanged(ref _allowAutoHide, value);
         }
 
-        public bool AreSnapPointsRegular
-        {
-            get => _areSnapPointsRegular;
-            set => this.RaiseAndSetIfChanged(ref _areSnapPointsRegular, value);
-        }
-
         public ScrollBarVisibility HorizontalScrollVisibility
         {
             get => _horizontalScrollVisibility;
@@ -68,21 +45,7 @@ namespace ControlCatalog.Pages
             set => this.RaiseAndSetIfChanged(ref _verticalScrollVisibility, value);
         }
 
-        public SnapPointsType VerticalSnapPointsType
-        {
-            get => _verticalSnapPointsType;
-            set => this.RaiseAndSetIfChanged(ref _verticalSnapPointsType, value);
-        }
-
-        public SnapPointsAlignment VerticalSnapPointsAlignment
-        {
-            get => _verticalSnapPointsAlignment;
-            set => this.RaiseAndSetIfChanged(ref _verticalSnapPointsAlignment, value);
-        }
-
         public List<ScrollBarVisibility> AvailableVisibility { get; }
-        public List<SnapPointsType> AvailableSnapPointsType { get; }
-        public List<SnapPointsAlignment> AvailableSnapPointsAlignment { get; }
     }
 
     public class ScrollViewerPage : UserControl