.NET MAUI ScrollView Tutorial – Making Content Scrollable

When building applications with .NET MAUI, you will quickly run into situations where your content does not fit on the screen. That is exactly where the ScrollView control becomes essential.

In this tutorial, you will learn how to use ScrollView in .NET MAUI, when to apply it, and what best practices you should follow.

What is a ScrollView?

A ScrollView allows users to scroll content that is larger than the visible screen area.

Typical use cases include:

• Long forms

• Detail pages

• Settings screens

• Articles and text-heavy views

• Dynamic content layouts

Without a ScrollView, any content that exceeds the screen would simply be cut off and inaccessible.

Creating a Basic ScrollView

The simplest way to use a ScrollView is to wrap a layout inside it.

<ScrollView>
    <VerticalStackLayout Padding="20">

        <Label
            Text="Welcome to the MAUI ScrollView Tutorial"
            FontSize="24"
            FontAttributes="Bold" />

        <Label Text="This is a long text..." />

        <Label Text="More information..." />

        <Label Text="Even more content..." />

    </VerticalStackLayout>
</ScrollView>

A ScrollView can only contain one child element, so you typically use a layout like VerticalStackLayout, HorizontalStackLayout, or Grid to hold multiple elements.

Vertical Scrolling

By default, ScrollView scrolls vertically.

<ScrollView>
    <VerticalStackLayout>

        <!-- Many elements -->

    </VerticalStackLayout>
</ScrollView>

This is the most common scenario in mobile applications.

Horizontal Scrolling

To enable horizontal scrolling, you can set the Orientation property.

<ScrollView Orientation="Horizontal">

    <HorizontalStackLayout>

        <Button Text="Button 1" />
        <Button Text="Button 2" />
        <Button Text="Button 3" />
        <Button Text="Button 4" />

    </HorizontalStackLayout>

</ScrollView>

This is useful for:

• Image galleries

• Carousels

• Horizontal menus

Scrolling in Both Directions

If you want to allow scrolling in both directions, set Orientation to Both.

<ScrollView Orientation="Both">

    <Grid WidthRequest="1500"
          HeightRequest="1500">

        <!-- Large content -->

    </Grid>

</ScrollView>

This is often used for:

• Tables

• Charts

• Technical visualizations

Programmatic Scrolling

Sometimes you want to scroll automatically to a specific position.

Scroll to a Position

await scrollView.ScrollToAsync(
    0,
    500,
    true);

Parameters:

• X position

• Y position

• Enable animation

Scroll to a Specific Element

await scrollView.ScrollToAsync(
    targetLabel,
    ScrollToPosition.Center,
    true);

This brings the element into view automatically.

Detecting Scroll Position

You can use the Scrolled event to react to user scrolling.

scrollView.Scrolled += OnScrolled;

private void OnScrolled(object sender, ScrolledEventArgs e)
{
    Console.WriteLine($"X: {e.ScrollX}, Y: {e.ScrollY}");
}

Use cases include:

• Sticky headers

• Infinite scrolling

• Progress indicators

• Dynamic animations

Example: Long List of Items

<ScrollView>
    <VerticalStackLayout Padding="20">

        <Label Text="Item 1" />
        <Label Text="Item 2" />
        <Label Text="Item 3" />
        <Label Text="Item 4" />
        <Label Text="Item 5" />
        <Label Text="Item 6" />
        <Label Text="Item 7" />
        <Label Text="Item 8" />
        <Label Text="Item 9" />
        <Label Text="Item 10" />

    </VerticalStackLayout>
</ScrollView>

This approach works well for small to medium-sized datasets.

When NOT to Use ScrollView

A common mistake is using ScrollView for large data collections.

<ScrollView>
    <VerticalStackLayout>

        <!-- 1000 items -->

    </VerticalStackLayout>
</ScrollView>

This forces all elements to be rendered at once, which can significantly impact performance.

Instead, you should use a CollectionView for large datasets.

<CollectionView ItemsSource="{Binding Customers}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

CollectionView supports virtualization and only renders visible items.

Best Practices

Use ScrollView for Forms

<ScrollView>
    <VerticalStackLayout>

        <Entry Placeholder="First Name" />
        <Entry Placeholder="Last Name" />
        <Entry Placeholder="Email" />
        <Button Text="Save" />

    </VerticalStackLayout>
</ScrollView>

This is especially important on mobile devices when the keyboard is visible.

Avoid Nested ScrollViews

Do not nest ScrollViews inside each other:

<ScrollView>
    <ScrollView>
        ...
    </ScrollView>
</ScrollView>

This often leads to unexpected scrolling behavior.

Do Not Combine ScrollView with CollectionView

<!-- Not recommended -->
<ScrollView>
    <CollectionView />
</ScrollView>

Both controls try to handle scrolling, which causes conflicts.

Conclusion

ScrollView is one of the most important layout controls in .NET MAUI for handling overflow content.

Key takeaways:

• ScrollView makes content scrollable.

• Vertical scrolling is the default behavior.

• Horizontal and bidirectional scrolling are supported.

• You can control scrolling using ScrollToAsync() and Scrolled.

• For large datasets, CollectionView is the better choice.

Understanding ScrollView is essential for building responsive and user-friendly .NET MAUI applications across mobile, tablet, and desktop platforms.