在Xamarin.Forms中实现水平GridView时，我应该采取什么方法

本文关键字：我应该 方法 什么 GridView Forms Xamarin 实现 水平 | 更新日期: 2023-09-27 18:27:28

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

在Xamarin.Forms中，您有一个优秀的View，即ListView。此ListView具有ItemSource和ItemTemplate属性，您可以在其中将ViewModel绑定到ItemSource，并将TextCell类绑定到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，但在我的实现中，这个视图没有扩展到它的父视图，尽管我设置了以下内容：

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

我的ItemSource与我的ViewModel绑定（我100%确信它正在提供项目。我知道这一点，因为如果我将这个GridView换成ListView，就会有项目。）：

grid.ItemSource = ViewModel.Items;

和我的项目模板：

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

现在，我知道GridView有一些问题，根据这一点，目前该实现仅适用于iOS。

选项2

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

我可以把这个项目作为基础，并根据我的需求进行扩展。但我觉得要在我的场景中发挥作用，还需要做很多工作。

有人知道比这两种资源更适合我的需求吗？如果没有任何可用的资源，我应该选择哪个选项（我知道肯定有可用的东西，因为Zite和Flipboard已经做了）？

在Xamarin.Forms中实现水平GridView时，我应该采取什么方法

我不知道翻板或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;
相关文章：