Handle scrolling and height with multiple collectionviews on one

ghz 8months ago ⋅ 75 views

Handle scrolling and height with multiple collectionviews on one page in dotNET MAUI

I've got a horizontally oriented (on top) and a vertically oriented (below) CollectionView on the same page. I would like the page to scroll down infinitely but the bottom CollectionView does not allow this. For some reason it gets a small, fixed height and does not fill the page.

I tried both with and without a parent ScrollView. How do I make the page scroll infinitely with both the horizontally oriented and vertically oriented CollectionView on it?

(see code and illustrations below)

XAML attempt 1:

<VerticalStackLayout>
    <CollectionView>
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Horizontal"/>
        </CollectionView.ItemsLayout>
    </CollectionView>
    <CollectionView>
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical"/>
        </CollectionView.ItemsLayout>
    </CollectionView>
</VerticalStackLayout>

XAML attempt 2:

<ScrollView>
    <VerticalStackLayout>
        <CollectionView>
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Horizontal"/>
            </CollectionView.ItemsLayout>
        </CollectionView>
        <CollectionView>
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"/>
            </CollectionView.ItemsLayout>
        </CollectionView>
    </VerticalStackLayout>
</ScrollView>

This is how my views are scrolling: Notice how the vertically oriented CollectionView (V) does not fill the page.

wrong scrolling

This is how I want my views to scroll: Notice how you can continue to scroll down the entire page infinitely.

right scrolling

Answers

To achieve infinite scrolling behavior with both horizontally and vertically oriented CollectionViews on the same page, you can use a combination of layouts and scrollviews. Here's how you can structure your XAML:

<ScrollView Orientation="Vertical">
    <StackLayout Orientation="Vertical">
        <!-- Horizontally oriented CollectionView -->
        <CollectionView ItemsSource="{Binding HorizontalItems}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Horizontal"/>
            </CollectionView.ItemsLayout>
            <!-- Add your item template and other properties -->
        </CollectionView>
        
        <!-- Vertically oriented CollectionView -->
        <CollectionView ItemsSource="{Binding VerticalItems}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"/>
            </CollectionView.ItemsLayout>
            <!-- Add your item template and other properties -->
        </CollectionView>
    </StackLayout>
</ScrollView>

In this setup:

  • The parent ScrollView allows the entire page to be scrolled vertically.
  • Inside the ScrollView, you have a StackLayout to hold the two CollectionViews vertically.
  • The first CollectionView is oriented horizontally, and the second one is oriented vertically.

Make sure to bind the ItemsSource properties of the CollectionViews to your data sources (HorizontalItems and VerticalItems), and customize the item templates and other properties as needed.

With this setup, you should be able to achieve the desired infinite scrolling behavior where the entire page can be scrolled vertically, and both CollectionViews can display their items without any fixed height restrictions.

#xaml