First item is wider than the rest in collectionview xamarin forms

user_15829572 0
Viewed 363

I'm trying to use CollectionView with a gridlayout. But the first item of the list always becomes wider than the rest. I even tried by giving specific widthrequest. Thanks in advance!!!

                    <Grid Margin="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="340"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <CollectionView Margin="0" ItemsSource="{Binding Projects}" 
                                        ItemSizingStrategy="MeasureFirstItem" 
                                        Grid.Row="0" Grid.Column="1">
                            <CollectionView.ItemsLayout>
                                <GridItemsLayout Orientation="Vertical"
                                                Span="3"                                                 
                                                VerticalItemSpacing="20" 
                                                HorizontalItemSpacing="20"/>
                            </CollectionView.ItemsLayout>
                            <CollectionView.Footer>
                                <BoxView HeightRequest="0"/>
                            </CollectionView.Footer>
                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <BoxView Margin="0" BackgroundColor="Blue" 
                                             HeightRequest="100"  WidthRequest="100"/>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
                    </Grid>

enter image description here

collectionview xamarin.forms xamarin xaml
2 Answers

The issue couldnt be resolved. So, I removed the gridlayout and replaced it with nested collectionview. Thanks for reaching out everyone. 

                    <Grid Margin="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="380"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <CollectionView Margin="10" ItemsSource="{Binding ProjectList}" Grid.Row="0" Grid.Column="1">
                            <CollectionView.ItemsLayout>
                                <LinearItemsLayout Orientation="Vertical"
                                                       ItemSpacing="30" />
                            </CollectionView.ItemsLayout>
                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <StackLayout WidthRequest="100" Margin="0" Padding="0" Spacing="0">
                                        <CollectionView
                                                ItemsSource="{Binding RowOfProjects}"
                                                Margin="0"
                                                HeightRequest="100" HorizontalScrollBarVisibility="Never"
                                                VerticalOptions="CenterAndExpand">
                                            <CollectionView.ItemsLayout>
                                                <LinearItemsLayout Orientation="Horizontal"
                                                       ItemSpacing="30" />
                                            </CollectionView.ItemsLayout>
                                            <CollectionView.ItemTemplate>
                                                <DataTemplate>
                                                    ....
                                                </DataTemplate>
                                            </CollectionView.ItemTemplate>
                                        </CollectionView>
                                    </StackLayout>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
                    </Grid>

user_158295720

I recommend you to set the HeightRequest and/or WidthRequest in the first grid inside the DataTemplate

<CollectionView>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="300">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="340"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <CollectionView Margin="0" ItemsSource="{Binding Projects}" 
                                ItemSizingStrategy="MeasureFirstItem" 
                                Grid.Row="0" Grid.Column="1">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical"
                                        Span="3"                                                 
                                        VerticalItemSpacing="20" 
                                        HorizontalItemSpacing="20"/>
                    </CollectionView.ItemsLayout>
                    <CollectionView.Footer>
                        <BoxView HeightRequest="0"/>
                    </CollectionView.Footer>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <BoxView Margin="0" BackgroundColor="Blue" 
                                        HeightRequest="100"  WidthRequest="100"/>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

This example can also help you: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid

user_74314700
Related