Xamarin Forms 中并排的 Cardview

Question

尝试在所有设备（iOS、Android、UWP）上生成一个 Xamarin.Forms 页面，但需要将内容并排显示为卡片视图，如下面的示例。

实现此目标的最佳方法是什么？有没有 OSS 库，因为我似乎找不到这样的开箱即用的东西？

编辑：不幸的是我忘了提到这是可绑定到 Ienumerable 源的。项目数量不固定。每张卡片中的内容只有来自不同项目的相同模板。

谢谢

Answer 1

因此，正如我从您的评论中了解到的，您需要做的是在 ScrollView 中创建一个 Grid。这是一个例子；

 <ScrollView Orientation="Vertical">
    <Grid RowSpacing="10" ColumnSpacing="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="AUTO"/>
            <ColumnDefinition Width="AUTO"/>
        </Grid.ColumnDefinitions>
        <Frame Grid.Row="0" Grid.Column="0">
            <!--DO YOUR DESIGN FOR FRAME No. 1 HERE-->
        </Frame>
            <Frame Grid.Row="1" Grid.Column="0">
                <!--DO YOUR DESIGN FOR FRAME No. 2 HERE-->
            </Frame>
            <Frame Grid.Row="2" Grid.Column="0">
                <!--DO YOUR DESIGN FOR FRAME No. 3 HERE-->
            </Frame>
            <Frame Grid.Row="3" Grid.Column="0">
                <!--DO YOUR DESIGN FOR FRAME No. 4 HERE-->
            </Frame>
            <Frame Grid.Row="0" Grid.Column="1">
                <!--DO YOUR DESIGN FOR FRAME No. 5 HERE-->
            </Frame>
            <Frame Grid.Row="1" Grid.Column="1">
                <!--DO YOUR DESIGN FOR FRAME No. 6 HERE-->
            </Frame>
            <Frame Grid.Row="2" Grid.Column="1">
                <!--DO YOUR DESIGN FOR FRAME No. 7 HERE-->
            </Frame>
            <Frame Grid.Row="3" Grid.Column="1">
                <!--DO YOUR DESIGN FOR FRAME No. 8 HERE-->
            </Frame>
        </Grid>
    </ScrollView>

我真正的建议是搜索一个库，让您可以在 ListView 中执行此操作。通过这种方式，您将减少硬编码设计代码并更好、更轻松地访问您的布局。

Answer 2

自首次提出问题以来，事情已经发生了变化。您现在可以将 CollectionView 与跨度为 2 的 GridItemsLayout 一起使用，以实现所需的布局。: Link to Xamarin Forms CollectionView documentation

Answer 3

您可以使用以下库，它是支持流动的 ListView 派生的 grid-like 列支持。

https://github.com/daniel-luberda/DLToolkit.Forms.Controls

Xamarin Forms 中并排的 Cardview

Cardview side by side in Xamarin Forms

xaml

xamarin.forms

cardview