Advanced Scrolling with SkiaScroll in DrawnUi.Maui
DrawnUi.Maui’s SkiaScroll control provides high-performance, flexible scrolling for custom UIs, games, dashboards, and data-heavy apps. This article covers advanced usage, virtualization, customization, and best practices for SkiaScroll and related controls.
Why SkiaScroll?
- Smooth, pixel-perfect scrolling on all platforms
- Supports both vertical, horizontal, and bidirectional scrolling
- Virtualization for large data sets
- Customizable headers, footers, and overlays
- Pinch-to-zoom and gesture support
- Works with any DrawnUi content: layouts, images, shapes, etc.
Basic Usage
<draw:SkiaScroll Orientation="Vertical" WidthRequest="400" HeightRequest="600">
<draw:SkiaLayout Type="Column" Spacing="10">
<draw:SkiaLabel Text="Item 1" />
<draw:SkiaLabel Text="Item 2" />
<!-- More items -->
</draw:SkiaLayout>
</draw:SkiaScroll>
Multi-Directional and Zoomable Scrolling
<draw:SkiaScroll Orientation="Both" ZoomLocked="False" ZoomMin="1" ZoomMax="3">
<draw:SkiaLayout>
<draw:SkiaImage Source="large_map.jpg" />
</draw:SkiaLayout>
</draw:SkiaScroll>
Virtualization for Large Data Sets
Enable virtualization for smooth performance with thousands of items:
<draw:SkiaScroll Virtualisation="Enabled" Orientation="Vertical">
<draw:SkiaLayout
Type="Column"
ItemsSource="{Binding LargeItemCollection}"
Virtualisation="Enabled">
<draw:SkiaLayout.ItemTemplate>
<DataTemplate>
<draw:SkiaLabel Text="{Binding Title}" />
</DataTemplate>
</draw:SkiaLayout.ItemTemplate>
</draw:SkiaLayout>
</draw:SkiaScroll>
Virtualisation
on SkiaScroll controls viewport-based rendering.Virtualisation
on SkiaLayout controls the strategy (Enabled, Disabled).- Combine with
RecyclingTemplate
for template reuse. - Use
VirtualisationInflated
to control how much content outside the viewport is still rendered.
Custom Headers, Footers, and Overlays
<draw:SkiaScroll HeaderSticky="True" HeaderBehind="False">
<draw:SkiaScroll.Header>
<draw:SkiaShape Type="Rectangle" BackgroundColor="#3498DB" HeightRequest="80">
<draw:SkiaLabel Text="Sticky Header" TextColor="White" FontSize="18" />
</draw:SkiaShape>
</draw:SkiaScroll.Header>
<draw:SkiaLayout Type="Column">
<!-- Content -->
</draw:SkiaLayout>
<draw:SkiaScroll.Footer>
<draw:SkiaShape Type="Rectangle" BackgroundColor="#2C3E50" HeightRequest="60">
<draw:SkiaLabel Text="Footer" TextColor="White" />
</draw:SkiaShape>
</draw:SkiaScroll.Footer>
</draw:SkiaScroll>
Pull-to-Refresh
<draw:SkiaScroll x:Name="MyScrollView" Refreshing="OnRefreshing">
<draw:SkiaScroll.RefreshIndicator>
<draw:RefreshIndicator />
</draw:SkiaScroll.RefreshIndicator>
<draw:SkiaLayout Type="Column">
<!-- Content items -->
</draw:SkiaLayout>
</draw:SkiaScroll>
In code-behind:
private async void OnRefreshing(object sender, EventArgs e)
{
// Perform refresh operation
await LoadDataAsync();
((SkiaScroll)sender).EndRefresh();
}
Infinite and Looped Scrolling
Use SkiaScrollLooped for banners, carousels, or infinite galleries:
<draw:SkiaScrollLooped Orientation="Horizontal" IsBanner="True" CycleSpace="100">
<draw:SkiaLayout Type="Row">
<draw:SkiaImage Source="image1.jpg" />
<draw:SkiaImage Source="image2.jpg" />
<!-- More images -->
</draw:SkiaLayout>
</draw:SkiaScrollLooped>
Programmatic Scrolling and Position Tracking
// Scroll to a specific position
myScroll.ScrollToPosition(0, 500, true); // Animated scroll to Y=500
// Scroll to a child element
myScroll.ScrollToView(targetElement, true);
// Track scroll position
float y = myScroll.ViewportOffsetY;
Performance Tips
- Enable virtualization for large lists
- Use
Cache="Operations"
for static or rarely-changing content - Avoid nesting too many scrolls; prefer flat layouts
- Use SkiaLabelFps to monitor performance
- For custom drawing, override OnDraw in your content controls
Advanced: Custom Scroll Effects and Gestures
- Implement parallax, sticky headers, or custom scroll physics by extending SkiaScroll
- Use gesture listeners for advanced input (drag, swipe, pinch)
- Combine with SkiaDrawer for overlay panels
Summary
SkiaScroll and related controls provide a robust, high-performance foundation for any scrolling UI in DrawnUi.Maui. With support for virtualization, zoom, custom overlays, and advanced gestures, you can build everything from chat apps to dashboards and games with smooth, responsive scrolling.