在 Xamarin Forms 中并排查看 Cardview答案

【问题标题】：Cardview side by side in Xamarin Forms在 Xamarin Forms 中并排查看 Cardview
【发布时间】：2018-01-08 04:04:14
【问题描述】：

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

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

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

谢谢

【问题讨论】：

你希望它作为列表视图还是固定布局？
如果可能的话，我希望列数是动态的，取决于屏幕的宽度。
我会在下面发布一个答案，希望对你有所帮助。

标签： xaml xamarin.forms cardview

【解决方案1】：

因此，正如我从您的 cmets 中了解到的，您需要做的是 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 中执行此操作的库。这样，您将减少硬编码的设计代码，并更好、更轻松地访问您的布局。

【讨论】：

嗨@Andreas，感谢您的帮助。静态布局不是我想要的。项目的数量将基于视图模型中的可绑定 Ienumerable 属性。我的解释有误。对不起
没问题！我以前做过这样的事情。如果您仍然没有找到答案，请告诉我，以便我可以在我的存档中搜索它。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以使用以下库，它是一个 ListView 派生类，支持流动的、类似网格的列。

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

【讨论】：