SmoothScroll.Avalonia

Implement WinUI's InteractionTracker and ScrollView in Avalonia.

Features:

• Smooth scroll
• Panning and zooming
• Multi-touch support
• Physics-based overscroll bounce animations

1000029245.mp4

Warning

This is an experimental project.

The implemention contains some hack of Avalonia composition renderer.

ScrollViewer

Add ScrollViewerSmoothTheme to your application's styles to enable smooth scrolling for default ScrollViewer control:

<Application
    xmlns:smoothScroll="using:SmoothScroll.Avalonia.Controls">

    <Application.Styles>
        <... />
        <smoothScroll:ScrollViewerSmoothTheme />
    </Application.Styles>
</Application>

ScrollView

A standalone control that provides smooth scroll, with panning and zooming support.

First, add ScrollViewDefaultTheme to styles:

<Application
    xmlns:smoothScroll="using:SmoothScroll.Avalonia.Controls">

    <Application.Styles>
        <... />
        <smoothScroll:ScrollViewDefaultTheme />
    </Application.Styles>
</Application>

Now you can use ScrollView like this:

<smoothScroll:ScrollView
    HorizontalContentAlignment="Center"
    VerticalContentAlignment="Center"
    HorizontalScrollBarVisibility="Hidden"
    IsZoomEnabled="True"
    VerticalScrollBarVisibility="Hidden">
    <Image Source="avares://SmoothScroll.Avalonia.Sample/Assets/Images/4074.bmp" Stretch="UniformToFill" />
</smoothScroll:ScrollView>

ContentOrientation

Instead of depending on Vertical/HorizontalScrollBarVisibility, ScrollPresenter uses a standalone ContentOrientation property to control the layout of the content. This property determines how content can grow when it's not explicitly constrained.

If Height and Width are explicitly set on the content, ContentOrientation has no effect.

<ScrollViewer
    x:Name="HorizontalSnapsScrollViewer"
    HorizontalAlignment="Stretch">
    <ScrollViewer.Styles>
        <Style Selector="controls|ScrollPresenter">
            <Setter Property="ContentOrientation" Value="Horizontal" />
        </Style>
    </ScrollViewer.Styles>
    <StackPanel Orientation="Horizontal">
        ...
    </StackPanel>
</ScrollViewer>

<smoothScroll:ScrollView
    x:Name="HorizontalSnapsScrollViewer"
    HorizontalAlignment="Stretch"
    ContentOrientation="Horizontal">
    <StackPanel Orientation="Horizontal">
        ...
    </StackPanel>
</smoothScroll:ScrollView>

Credits

Meloman19/CompositionScroll

unoplatform/uno