ListView 框架一个接一个作为网格正方形

Question

我试图将框架卡水平放置为一个接一个的 suqares，但无法管理它。我将它包装在网格中，尽管网格填充了所有窗口大小，但它会将框架置于另一个框架之下。屏幕截图上的红色是网格的背景。

How it looks and how i want it to

<ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                        <Grid 
                            HorizontalOptions="FillAndExpand" 
                            BackgroundColor="Red">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Frame 
                            HasShadow="True" 
                            Margin="5" 
                            Padding="10" 
                            CornerRadius="5"
                            Scale="1"
                            BackgroundColor="{StaticResource DarkGreyPrimary}">
                                <Frame.Content>
                                    <StackLayout Orientation="Vertical">
                                        <StackLayout>
                                            <Grid>
                                                <Label Text="{Binding Address}"
                                                FontSize="30"
                                            VerticalTextAlignment="End"/>
                                                <Button Clicked="InfoButtonClicked"    
                                            Text="&#xF05A;"
                                            FontFamily="FA"
                                            FontSize="30"
                                            WidthRequest="53"
                                            Margin="0, 0, -10, 0"
                                            HorizontalOptions="End"/>
                                            </Grid>
                                            <Image Source="{Binding ImageUrl}" 
                                           WidthRequest="300"
                                               Aspect="Fill"/>
                                        </StackLayout>

                                        <StackLayout VerticalOptions="Fill" Margin="10, 0, 0, 0">

                                            <StackLayout VerticalOptions="EndAndExpand">
                                                <Label Text="{Binding Id}"
                                               HorizontalOptions="End"
                                               TextColor="{StaticResource LightGrey}"
                                                FontSize="20"/>
                                            </StackLayout>

                                        </StackLayout>

                                    </StackLayout>
                                </Frame.Content>
                            </Frame>
                        </Grid>
                            
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>

Answer 1

为此使用CollectionView，它支持在网格中显示项目。

<CollectionView ItemsLayout="VerticalGrid, 3" ItemsSource="{Binding Items}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="5">
                <Frame
                    Padding="10"
                    BackgroundColor="{StaticResource DarkGreyPrimary}"
                    CornerRadius="5"
                    HasShadow="True"
                    Scale="1">
                    <StackLayout Orientation="Vertical">
                        <StackLayout>
                            <Grid>
                                <Label
                                    FontSize="30"
                                    Text="{Binding Address}"
                                    VerticalTextAlignment="End" />
                                <Button
                                    Margin="0,0,-10,0"
                                    Clicked="InfoButtonClicked"
                                    FontFamily="FA"
                                    FontSize="30"
                                    HorizontalOptions="End"
                                    Text="&#xF05A;"
                                    WidthRequest="53" />
                            </Grid>
                            <Image
                                Aspect="Fill"
                                Source="{Binding ImageUrl}"
                                WidthRequest="300" />
                        </StackLayout>

                        <Label
                            Margin="10,0,0,0"
                            FontSize="20"
                            HorizontalOptions="End"
                            Text="{Binding Id}"
                            TextColor="{StaticResource LightGrey}" />

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

注意ItemsLayout="VerticalGrid, 3"，数字 3 指定要显示的列数。

这是CollectionView 的文档（正如前面在 cmets 中提到的@Jason）：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid