Avalonia/samples/ControlCatalog/Pages/ScrollSnapPage.xaml

<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>