Xamarin CollectionView 与 Horizo​​ntalItemSpacing 相等的项目宽度 在 xaml 中

如何解决Xamarin CollectionView 与 Horizo​​ntalItemSpacing 相等的项目宽度 在 xaml 中

我想显示 FlexLayout 中显示的 List 中的项目。我希望这些项目具有相同的宽度和相同的水平和垂直间距。下图显示了一个例子。

我尝试使用 CollectionView，我的 XAML 如下所示：

<CollectionView ItemsSource="{Binding Cards}" Margin="10,10,10"
                >
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="3"
                         HorizontalItemSpacing="10"
                         VerticalItemSpacing="10"
                         />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="200" BackgroundColor="{Binding BackGroundColor}">
                <Label Text="{Binding Text}"/>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

这种作品，除了项目的宽度不知何故，看起来如下：

我尝试使用 ItemSizingStrategy="MeasureFirstItem" 但它没有按我想要的那样工作。

有没有更好的方法来实现它？

感谢大家的帮助。

解决方法

有很多解决方案可以实现它。例如，您可以创建自定义 StackLayout .

public class SquareView : StackLayout
{
    protected override void OnSizeAllocated(double width,double height)
    {
        base.OnSizeAllocated(width,height);
        HeightRequest = Width;
    }
}

在 xaml 中

 <CollectionView x:Name="list" Margin="10,10,10">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="3"
                     
                     />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto" />

                </Grid.RowDefinitions>


                <local:SquareView BackgroundColor="LightBlue">
                    <Label Text="11111" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
                </local:SquareView>


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