Xamarin CollectionView 等于项目宽度与 HorizontalItemSpacing

Question

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

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

<CollectionView ItemsSource="{Binding Cards}" Margin="10,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"，但它并没有像我想要的那样工作。

有没有更好的实现方式？

谢谢大家的帮助。

Answer 1

有很多解决方案可以实现它。例如，您可以创建自定义 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,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>

Xamarin CollectionView 等于项目宽度与 HorizontalItemSpacing

Xamarin CollectionView equal item width with HorizontalItemSpacing

c#

xaml

collectionview

xamarin

xamarin.forms

在xaml

Xamarin CollectionView 等于项目宽度与 Horizo​​ntalItemSpacing

Xamarin CollectionView equal item width with HorizontalItemSpacing

c#

xaml

collectionview

xamarin

xamarin.forms

在xaml

Xamarin CollectionView 等于项目宽度与 HorizontalItemSpacing