css - Xamarin 使用垂直 Collection View 形成 x 轴溢出

Question

我的应用程序上有一个屏幕，它使用 CollectionView 和网格向用户显示信息。它看起来一切都很好，但是尽管网格上有填充，但网格右侧的元素似乎没有跟随填充。

如您所见，“员工”项的右侧没有任何填充。

我认为问题与行定义有关:

                    <Grid.RowDefinitions>
                        <RowDefinition Height="200"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200"></ColumnDefinition>
                    </Grid.ColumnDefinitions>

因为我指定了 200 的高度和 200 的宽度以使元素成为正方形。有没有一种方法可以动态调整元素的大小以适应屏幕，而不会在 x 轴上溢出，同时保持形状为正方形？

如果我用 * 替换值，屏幕上不会显示任何内容。

我想过的一种实现方法是将列的宽度 == 设置为行的高度，但我真的不明白我如何在这里做到这一点。

Answer 1

您可以尝试使用 StackLayout 包裹 CollectionView，并为其设置填充。对于 GridItemsLayout，您可以使用以下属性。例如:

  VerticalItemSpacing="10"
  HorizontalItemSpacing="10"

我创建了一个演示，xaml 是:

  <StackLayout Padding="6" BackgroundColor="LightGray">
        <CollectionView  x:Name="collectView" >
            <CollectionView.ItemsLayout >
                <GridItemsLayout Orientation="Vertical"
                    Span="2"
                    VerticalItemSpacing="10"
                    HorizontalItemSpacing="10"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate >
                <DataTemplate  >
                    <Grid  BackgroundColor="Green" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="200"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Label 
                            TextColor="White"
                            Grid.Row="0"
                            Grid.Column="0" 
                            Text="{Binding Name}"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

注意:我们需要将 XF nuget 更新到最新版本。因为旧版本可能不包含属性 VerticalItemSpacing 和 Horizo​​ntalItemSpacing。

结果是: