CODEWITHSUNDEEP
xamarin.forms
RedZ
RedZ

Reputation: 1013

Xamarin.Forms - Display all items without scrolling

Im using a scrollview to display my homepage, it contains many controls, including 2 CollectionViews, my problem is that when the user is scrolling down the home page, and once the CollectionView is reached, he will get stuck in the CollectionView's scroller, i want all the items (about 40 items) shown in the CollectionView without the scroller so that the user can keep scrolling the homepage and through the CollectionView's items towards the controls bellow. I have tried to set a fixed height for the CollectionView but that didnt work. Also, i found an article talking about using a BindableLayout, but i read somewhere that it can be much slower than CollectionView and it doesnt support the item layout (im using span="2" to show 2 items next to each other on each row)

Upvotes: 1

Views: 1778

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

You could use BindableLayout of FlexLayout . Check the following code

<ScrollView Orientation="Vertical" BackgroundColor="LightBlue">

        //.. other elements
 
        <FlexLayout  BindableLayout.ItemsSource="{Binding XXX}" Direction="Row"
                AlignItems="Start" Wrap="Wrap" JustifyContent="SpaceAround" AlignContent="SpaceAround" >
            <BindableLayout.ItemTemplate>
                <DataTemplate>

                   //replace it with your data template
                    <StackLayout HeightRequest="100" WidthRequest="180" BackgroundColor="Red" Margin="10"  >

                        <Label Text="{Binding .}" TextColor="Black" BackgroundColor="Green" /> 

                    </StackLayout>

                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>

    </ScrollView>

Note:

In this way you need to set the width of each item less than half of the width of screen . Otherwise the item will warp to the next row .

enter image description here

Upvotes: 4

Related Questions