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>