.NET MAUI ScrollView Tutorial – Inhalte einfach scrollbar machen

Wenn du mit .NET MAUI Anwendungen entwickelst, wirst du früher oder später auf das Problem stoßen, dass der verfügbare Bildschirmplatz nicht ausreicht, um alle Inhalte gleichzeitig anzuzeigen. Genau dafür gibt es das ScrollView-Steuerelement.

In diesem Tutorial lernst du, wie du eine ScrollView in .NET MAUI verwendest, welche Eigenschaften wichtig sind und welche Best Practices du beachten solltest.

Was ist eine ScrollView?

Eine ScrollView ermöglicht es Benutzern, Inhalte zu scrollen, die größer sind als der sichtbare Bereich des Bildschirms.

Typische Einsatzgebiete sind:

• Lange Formulare

• Detailansichten

• Einstellungen-Seiten

• Artikel- und Textanzeigen

• Dynamische Inhalte

Ohne ScrollView würden Teile des Inhalts außerhalb des Bildschirms liegen und nicht erreichbar sein.

Erste ScrollView erstellen

Die einfachste Variante besteht darin, ein Layout innerhalb einer ScrollView zu platzieren.

<ScrollView>
    <VerticalStackLayout Padding="20">

        <Label
            Text="Willkommen zum MAUI ScrollView Tutorial"
            FontSize="24"
            FontAttributes="Bold" />

        <Label Text="Dies ist ein langer Text..." />

        <Label Text="Weitere Informationen..." />

        <Label Text="Noch mehr Inhalt..." />

    </VerticalStackLayout>
</ScrollView>

Die ScrollView selbst enthält immer genau ein Kind-Element. Möchtest du mehrere Steuerelemente anzeigen, verwendest du ein Layout wie VerticalStackLayout, HorizontalStackLayout oder Grid.

Vertikales Scrollen

Standardmäßig scrollt die ScrollView vertikal.

<ScrollView>
    <VerticalStackLayout>

        <!-- Viele Elemente -->

    </VerticalStackLayout>
</ScrollView>

Dies ist die häufigste Verwendung in mobilen Anwendungen.

Horizontales Scrollen

Für horizontale Inhalte kannst du die Eigenschaft Orientation verwenden.

<ScrollView Orientation="Horizontal">

    <HorizontalStackLayout>

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

    </HorizontalStackLayout>

</ScrollView>

Dies eignet sich beispielsweise für:

• Bildgalerien

• Kartenansichten

• Horizontale Menüs

Scrollen in beide Richtungen

Soll ein Inhalt sowohl horizontal als auch vertikal scrollbar sein, kannst du die Orientation auf Both setzen.

<ScrollView Orientation="Both">

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

        <!-- Großer Inhalt -->

    </Grid>

</ScrollView>

Dies wird häufig für:

• Tabellen

• Diagramme

• Technische Visualisierungen

verwendet.

Programmatisch scrollen

Manchmal möchtest du automatisch zu einer bestimmten Position scrollen.

Zu einer Position scrollen

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

Parameter:

• X-Position

• Y-Position

• Animation aktivieren

Zu einem bestimmten Element scrollen

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

Das Element wird automatisch in den sichtbaren Bereich bewegt.

Scrollposition überwachen

Über das Event Scrolled kannst du auf Scrollbewegungen reagieren.

scrollView.Scrolled += OnScrolled;

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

Anwendungsfälle:

• Sticky Header

• Infinite Scrolling

• Fortschrittsanzeigen

• Dynamische Animationen

Beispiel: Lange Liste von Daten

<ScrollView>
    <VerticalStackLayout Padding="20">

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

    </VerticalStackLayout>
</ScrollView>

Bei wenigen bis mittleren Datenmengen funktioniert dieser Ansatz problemlos.

Wann sollte man keine ScrollView verwenden?

Ein häufiger Fehler besteht darin, große Datenlisten in einer ScrollView darzustellen.

Beispiel:

<ScrollView>
    <VerticalStackLayout>

        <!-- 1000 Datensätze -->

    </VerticalStackLayout>
</ScrollView>

Das führt dazu, dass alle Elemente gleichzeitig erzeugt werden, was Speicher und Performance belastet.

Für große Datenmengen solltest du stattdessen eine CollectionView verwenden.

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

Die CollectionView unterstützt Virtualisierung und lädt nur die aktuell sichtbaren Elemente.

Best Practices

ScrollView für Formulare verwenden

<ScrollView>
    <VerticalStackLayout>

        <Entry Placeholder="Vorname" />
        <Entry Placeholder="Nachname" />
        <Entry Placeholder="E-Mail" />
        <Button Text="Speichern" />

    </VerticalStackLayout>
</ScrollView>

Besonders wichtig auf Smartphones, wenn die Bildschirmtastatur eingeblendet wird.

Keine verschachtelten ScrollViews

Vermeide Konstrukte wie:

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

Dies führt häufig zu unerwartetem Scrollverhalten.

CollectionView nicht in ScrollView einbetten

<!-- Nicht empfohlen -->
<ScrollView>
    <CollectionView />
</ScrollView>

Beide Steuerelemente konkurrieren um das Scrollverhalten.

Fazit

Die ScrollView gehört zu den grundlegenden Steuerelementen in .NET MAUI und sorgt dafür, dass Inhalte unabhängig von der Bildschirmgröße zugänglich bleiben.

Die wichtigsten Punkte:

• ScrollView macht Inhalte scrollbar.

• Standardmäßig wird vertikal gescrollt.

• Horizontales und bidirektionales Scrollen sind möglich.

• Mit ScrollToAsync() kann programmatisch gescrollt werden.

• Über das Scrolled-Event lassen sich Scrollbewegungen überwachen.

• Für große Datenmengen sollte stattdessen eine CollectionView verwendet werden.

Wer diese Grundlagen beherrscht, kann benutzerfreundliche und responsive MAUI-Anwendungen entwickeln, die auf Smartphones, Tablets und Desktop-Geräten gleichermaßen funktionieren.