Avalonia/samples/ControlCatalog/Pages/ScrollViewerPage.xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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" />

        <StackPanel Orientation="Vertical" Spacing="4">
          <TextBlock Text="Horizontal Scroll" />
          <ComboBox Items="{Binding AvailableVisibility}" SelectedItem="{Binding HorizontalScrollVisibility}" />
        </StackPanel>

        <StackPanel Orientation="Vertical" Spacing="4">
          <TextBlock Text="Vertical Scroll" />
          <ComboBox Items="{Binding AvailableVisibility}" SelectedItem="{Binding VerticalScrollVisibility}" />
        </StackPanel>
      </StackPanel>

      <ScrollViewer x:Name="ScrollViewer"
                    Grid.Column="1"
                    Width="400" Height="400"
                    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>
    
    <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>