Displaying Xamarin's CollectionView Items from different sources inside StackLayout is not displaying properly

Question

I am working with Xamarin's CollectionView and Stacklayout and I'm trying to display item lists from different sources in the form of collection views. However, the output of the code shown below is something I didn't expect it. The result of the first collection view is getting displayed in a small window and all the remaining items can be read by scrolling. However, I want to display them all without using a scroll and the same should work if more collectionviews are added in the code. Is there anything I'm missing here?

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             Title="Arhoo"
             x:Class="Arhoo.Pages.MainFeedPage">

        <StackLayout>
            <StackLayout VerticalOptions="FillAndExpand">                
                <CollectionView x:Name="ItemsListView" 
                        ItemsSource="{Binding Hotels}" 
                        VerticalOptions="FillAndExpand" Margin="10" Visual="Material">

                    <CollectionView.Header>
                        <StackLayout BackgroundColor="LightGray" HeightRequest="50" >
                            <Label Visual="Material" Text="Hotels" FontSize="Medium" FontAttributes="Bold" />
                        </StackLayout>
                    </CollectionView.Header>
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical"  Span="2"/>
                    </CollectionView.ItemsLayout>
                    <CollectionView.EmptyView>
                        <StackLayout>
                            <Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="Loading Hotels"/>
                        </StackLayout>
                    </CollectionView.EmptyView>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Visual="Material">
                                <ContentView Padding="10">
                                    <Frame HasShadow="false" OutlineColor="#2f2f2f" Padding="0" CornerRadius="2">
                                        <Grid BackgroundColor="#f2f2f2" MinimumHeightRequest="400">
                                            <Image Source="{Binding Image}" Aspect="AspectFill"/>
                                            <BoxView BackgroundColor="#000000" Opacity="0.4"/>
                                            <Label Text="{Binding Text}" Margin="15" TextColor="White" VerticalOptions="End"
                                       VerticalTextAlignment="End" LineBreakMode="NoWrap" FontSize="18" />
                                        </Grid>
                                    </Frame>
                                </ContentView>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

            </StackLayout>            
            <StackLayout VerticalOptions="FillAndExpand">

                <CollectionView x:Name="TOsListView" 
                        ItemsSource="{Binding TourOperators}" 
                        VerticalOptions="FillAndExpand" >
                    <CollectionView.Header>
                        <StackLayout BackgroundColor="LightGray" HeightRequest="20" >
                            <Label Margin="10,0,0,0" Text="Tour Operators" FontSize="Medium" FontAttributes="Bold" />
                        </StackLayout>
                    </CollectionView.Header>
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout 
                    Orientation="Vertical"
                    Span="2"/>
                    </CollectionView.ItemsLayout>
                    <CollectionView.EmptyView>
                        <StackLayout>
                            <Label 
                        HorizontalOptions="CenterAndExpand"
                        VerticalOptions="CenterAndExpand"
                        Text="Loading TOs"/>
                        </StackLayout>
                    </CollectionView.EmptyView>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <ContentView Padding="10" >
                                <Frame HasShadow="false"
                               OutlineColor="#2f2f2f"
                               Padding="0"
                               CornerRadius="2">
                                    <Grid BackgroundColor="#f2f2f2">

                                        <Image Source="{Binding Image}"
                                       Aspect="AspectFill"/>

                                        <BoxView BackgroundColor="#000000"
                                         Opacity="0.4"/>

                                        <Label Text="{Binding Text}"
                                       Margin="15"
                                       TextColor="White"
                                       VerticalOptions="End"
                                       VerticalTextAlignment="End"
                                       LineBreakMode="NoWrap" 
                                       FontSize="18" />
                                    </Grid>
                                </Frame>
                            </ContentView>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </StackLayout> 



</ContentPage>

@Semytech, According to your code, there are two collectionview in page content, you mean that you want to display all items without scrollview for two collectionview? If there are many items in collectionview, I think it is impossible. — Cherry Bu - MSFT, Sep 30 '19 at 02:50
@CherryBu-MSFT Yes, I want to display content inside the collectionview without scroll. Of course I'm going to limit the number of items, say to 6, inside each collectionview and display them fully inside the content page without scrolling. — Semytech, Sep 30 '19 at 11:42

Semytech · Accepted Answer · 2019-09-30T19:03:41.900

I have added a <ScrollView> at my code and the collectionview items displayed as I wanted it. Here is the modified code that is working for me.

  ?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 Title="Arhoo" 
                 x:Class="Arhoo.Pages.MainFeedPage">
        <ScrollView>
            <StackLayout>  
           <CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>  
           <CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>  
           <CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
</StackLayout>

    </ScrollView>

</ContentPage>

Displaying Xamarin's CollectionView Items from different sources inside StackLayout is not displaying properly

1 Answers1