Implementando Rolagem Suave e Recursos de Zoom no Avalonia UI

O componente ScrollViewer nativo do Avalonia UI apresenta limitações significativas em termos de experiência do usuário, especialmente ao utilizar a roda do mouse, onde a rolagem tende a ser rígida e sem transições suaves. Além disso, a ausência de suporte nativo para operações de panorâmica (pan) e zoom frequentemente obriga os desenvolvedores a recorrerem a bibliotecas de terceiros, como o PanAndZoom.

Para contornar essas restrições, a biblioteca SmoothScroll.Avalonia oferece uma abordagem integrada para habilitar a rolagem suave em todas as instâncias de ScrollViewer de uma aplicação. Adicionalmente, o pacote disponibiliza o controle ScrollView, que herda de ScrollViewer e estende suas capacidades com funcionalidades nativas de zoom e panorâmica.

Nota: Esta é uma implementação de natureza experimental. A arquitetura atual depende de APIs internas da camada de renderização do Avalonia, o que pode exigir ajustes em futuras atualizações do framwork.

Configuração Global para Rolagem Suave

Após instalar o pacote NuGet correspondente, a ativação da rolagem suave em nível de aplicação requer a injeção do tema ScrollViewerSmoothTheme na coleção de estilos do Application.

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:smooth="using:SmoothScroll.Avalonia.Controls">
    <Application.Styles>
        <FluentTheme />
        <smooth:ScrollViewerSmoothTheme />
    </Application.Styles>
</Application>

Caso o projeto necessite de templates personalizados para o ScrollViewer, o mesmo comportamento pode ser alcançado substituindo o ScrollContentPresenter padrão pelo ScrollPresenter fornecido pela biblioteca dentro do seu dicionário de estilos.

Habilitando Pan e Zoom com o Controle ScrollView

O ScrollView opera como um controle distinto. Para que sua renderização ocorra corretamente, é mandatório incluir o tema padrão nas configurações globais da aplicação:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:smooth="using:SmoothScroll.Avalonia.Controls">
    <Application.Styles>
        <FluentTheme />
        <smooth:ScrollViewDefaultTheme />
    </Application.Styles>
</Application>

Dado que deriva drietamente de ScrollViewer, a substituição pontual de componentes existentes por ScrollView é trivial. O grande diferencial reside na adição de um conjunto robusto de propriedades e métodos dedicados ao gerenciamento de escala:

Membro Descrição
bool IsZoomEnabled Define se a funcionalidade de zoom está ativa.
double ZoomFactor Retorna a escala atual aplicada (somente leitura).
double MinZoomFactor Estabelece o limite inferior para a escala.
double MaxZoomFactor Estabelece o limite superior para a escala.
void ZoomTo(double) Aplica uma escala absoluta específica.
void ZoomBy(double) Incrementa ou decrementa a escala atual com base no valor fornecido.

Um cenário de uso comum é a construção de um visualizador de imagens interativo. O exemplo abaixo demonstra como enacpsular um elemento Image dentro do ScrollView, ocultando as barras de rolagem e centralizando o conteúdo:

<smooth:ScrollView IsZoomEnabled="True"
                   MinZoomFactor="0.5"
                   MaxZoomFactor="5.0"
                   HorizontalScrollBarVisibility="Hidden"
                   VerticalScrollBarVisibility="Hidden"
                   HorizontalContentAlignment="Center"
                   VerticalContentAlignment="Center">
    <Image Source="avares://MyApplication/Assets/Textures/landscape.png" 
           Stretch="Uniform" />
</smooth:ScrollView>

Tags: AvaloniaUI SmoothScroll XAML C# UIFramework

Publicado em 9-25 07:46