Xamarin.Forms - Display all items without scrolling

RedZ Published at Dev

RedZ

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)

Lucas Zhang - MSFT

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 .

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-18

Comments

0 comments

TOP Ranking

Article