Collection View Height Issue using collection view inside collection view

Question

Hi

i am using collectionview inside collection view but i am facing height issue inside collection view i want display whole records and list without scroll bar vertical and horizontal

below is my code.

<RefreshView Command="{Binding RefreshItemsCommand}" IsRefreshing="{Binding IsRefreshing}" Grid.Row="1">

                <CollectionView VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" x:Name="cvTrades" InputTransparent="{OnPlatform Android='True', iOS='False'}" Margin="0,15,0,0"  BackgroundColor="White" SelectionMode="Multiple"
                                            ItemsSource="{Binding ProductMasterList ,Mode=TwoWay}" RemainingItemsThresholdReachedCommand="{Binding ItemTresholdReachedCommand}" RemainingItemsThreshold="{Binding ItemTreshold}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid RowDefinitions="Auto,Auto" Style="{StaticResource GridBackGroundColor}">

                                <Label Grid.Row="0" Text="{Binding MetaDictionaryValue}" FontFamily="{OnPlatform iOS={StaticResource ContentFontBold},Android={StaticResource BasicFontMedium}}" TextColor="{StaticResource FontColor}" FontSize="18" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"/>

                                <CollectionView x:Name="cvTradesList" InputTransparent="{OnPlatform Android='True', iOS='False'}"  SelectionChanged="cvTradesList_SelectionChanged" HorizontalScrollBarVisibility="Never" VerticalScrollBarVisibility="Never"
                                                            ItemsSource="{Binding ProductList}" Margin="0,10,0,0" Grid.Row="1" BackgroundColor="White" SelectionMode="Single">
                                    <CollectionView.ItemsLayout>
                                        <GridItemsLayout Orientation="Vertical" Span="2" VerticalItemSpacing="10" HorizontalItemSpacing="10"/>
                                    </CollectionView.ItemsLayout>
                                    <CollectionView.ItemTemplate>
                                        <DataTemplate>
                                            <Grid x:Name="mainProductListGrid" RowDefinitions="Auto">
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup Name="CommonStates">
                                                        <VisualState Name="Normal" />
                                                        <VisualState Name="Selected">
                                                            <VisualState.Setters>
                                                                <Setter TargetName="frameItemName" Property="Frame.BackgroundColor" Value="#009d57" />
                                                                <Setter TargetName="lblItemName" Property="Label.TextColor" Value="#ffffff" />
                                                                <Setter TargetName="mainProductListGrid" Property="Grid.BackgroundColor" Value="#ffffff" />
                                                            </VisualState.Setters>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>

                                                <Frame x:Name="frameItemName" BorderColor="#d6d6d6" Margin="0,0,2,0" CornerRadius="10" BackgroundColor="#fff" HasShadow="False" Padding="0,28">
                                                    <Label x:Name="lblItemName" Text="{Binding ItemName}" TextTransform="None" HorizontalTextAlignment="Center" FontFamily="{OnPlatform iOS={StaticResource ContentFontBold},Android={StaticResource BasicFontMedium}}" FontSize="13" TextColor="{StaticResource LabelColor}"/>
                                                </Frame>
                                            </Grid>
                                        </DataTemplate>
                                    </CollectionView.ItemTemplate>
                                </CollectionView>

                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

            </RefreshView>

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

This is an known issue for collectionview in xamarin forms.

https://github.com/xamarin/Xamarin.Forms/issues/6554

If we do not set the fixed height now, it will have Extra Space at bottom like following screenshot. I change the nested collectionview's background to red for testing.

And I set the fixed height for nested collectionview.

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.