c# - 在 Xamarin.Forms 中实现水平 GridView 时应该采用什么方法？

Question

我需要实现水平(杂志样式)列表。在这方面做得很好的应用程序(在我看来)是 Flipboard 和 Zite。我想知道是否可以使用现有资源将其实现到 Xamarin.Forms 应用程序中。

在 Xamarin.Forms 中，您有一个出色的 View，即 ListView。此 ListView 有一个 ItemSource 和一个 ItemTemplate 属性，您可以在其中将 ViewModel 绑定(bind)到 ItemSource，并且可以将 TextCell 类绑定(bind)到 ItemTemplate。

我正在搜索完全相同的东西，只是您可以将 ItemTemplate 修改为我自己创建的自定义类。我需要这个的原因是我需要比 TextCell 更复杂的布局，而 ListView 只能垂直滚动。

我非常喜欢 MVVM 模式，我需要一些完全适合这种模式的东西。现在，我研究了一些实现:

• https://github.com/XLabs/Xamarin-Forms-Labs
• http://forums.xamarin.com/discussion/18627/gridview-with-itemssource

选项 1

在 Xamarin.Forms.Labs 中，有一个 GridView，但在我的实现中此 View 不会扩展到其父级，尽管我设置了以下内容:

var grid = GridView {
    ItemWidth = 50,
    ItemHeight = 50,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.FillAndExpand
};

我的 ItemSource 绑定(bind)到我的 ViewModel(我 100% 确定它正在提供项目。我知道这一点是因为如果我将此 GridView 换成 ListView，有元素。):

grid.ItemSource = ViewModel.Items;

还有我的 ItemTemplate:

var cell = new DataTemplate(typeof(TextCell));
            cell.SetBinding(TextCell.TextProperty, "Title");
            cell.SetBinding(TextCell.TextProperty, "Description");
            gridView.ItemTemplate = cell;

现在，我知道 GridView 存在一些问题，并且根据 this 目前该实现仅适用于 iOS .

选项 2

在第二篇文章中，他们提到了 WrapLayout。虽然它显示了通过其 Children 属性添加的一些项目，但它没有显示任何 MVVM 实现。除此之外，实现还远未完成。

我可以以这个项目为基础，并根据我的需要扩展它。但我觉得必须做很多工作才能在我的场景中发挥作用。

有没有人知道比这两个更适合我需求的其他资源？如果没有可用的资源，我应该选择哪个选项(我知道一定有可用的资源，因为 Zite 和 Flipboard 已经完成了)？

Answer 1

我不知道 flipboard 或 zite，但你可以试试这样的东西。

var grid = new Grid()
{
    VerticalOptions = LayoutOptions.FillAndExpand,
    ColumnDefinitions = new ColumnDefinitionCollection()
    {
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) }
    },
    RowDefinitions = new RowDefinitionCollection()
    {
        new RowDefinition(){ Height = new GridLength(1,GridUnitType.Star) },
        new RowDefinition(){ Height = new GridLength(1,GridUnitType.Star) },
        new RowDefinition(){ Height = new GridLength(1,GridUnitType.Star) }
    }
};
var scrollview = new ScrollView() { Orientation = ScrollOrientation.Horizontal };
scrollview.Content = grid;