第一项比 collectionview xamarin 表单中的其他项宽

Question

我正在尝试将 CollectionView 与网格布局一起使用。但是列表的第一项总是比其余的更宽。我什至尝试给出特定的宽度请求。提前致谢！！！

                    <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

我建议您在 DataTemplate 中的第一个网格中设置 HeightRequest and/or WidthRequest

<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>

这个例子也可以帮助你：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid

Answer 2

问题无法解决。所以，我删除了 gridlayout 并将其替换为嵌套的 collectionview。感谢您与大家联系。

                    <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>