First item is wider than the rest in collectionview xamarin forms - xaml

Question

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>

Answer 1

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>

Answer 2

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://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid