在 Xamarin 中创建自定义网格项

我的 Xamarin.Forms 应用程序中有一个 GridLayout，我希望此处显示网格中的每个元素：

成为这样的一个实例：

其中每个元素（品牌、图片、价格、卖家等）都是通过从数组中获取值并将该值放入单元格中来设置的。

例如，如果我现在只使用品牌和图片（以字符串的形式），并且我刚刚以两个列表的形式从 SQL 数据库中检索数据： （伪代码）

brand = ["supreme","louisvuitton","addidas","addidas","bape"]
picture = ["hoodie","tshirt","tracksuit","trainers","jacket"]

如何创建一个类/内容页面，该页面将从每个列表中获取下一个字符串，并将一个项目添加到带有这些字符串的网格中。到目前为止，我已经尝试创建一个 C# 类，如下所示：

class Item
{
    public string brand { get; set; }
    public string picture { get; set; }

    Button Background = new Button
    {
        BackgroundColor = Color.FromHex("#EEEEEE"),
    };
    Label label = new Label
    {
        Text = brand
    };
    Label label2 = new Label
    {
        Text = picture
    };

我知道我必须将按钮和标签添加到某种布局中，但我不知道如何首先将我的项目放入网格中。顺便说一句，我正在使用 xaml 作为带有网格的页面。任何帮助，将不胜感激 ：）

您可以使用创建自定义网格视图项ContentView.

使用 XAML 预览器制作 UI 可能会有点混乱，因为您将在手机屏幕的上下文中看到视图（例如不如在 iOS 中使用 xib 那样好）。

首先使用代码隐藏创建一个新的 XAML 文件。

public partial class MyCustomGridCell : ContentView
{
}

您还需要将 XAML 更改为ContentView

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NAMESPACEHERE">
    <ContentView.Content>
        <!-- Your View here, This is done the same as any other UI-->
    </ContentView.Content>
</ContentView>

现在您有了一个可以添加到网格视图中的自定义类。在您想要此自定义对象的视图中，您可以通过以下方式导入它：

XAML:

xmlns:custom="clr-namespace:YOUR_CUSTOM_VIEW_NAMESPACE_HERE"

CS:

using YOUR_CUSTOM_VIEW_NAMESPACE_HERE;

现在您可以在您的ContentPage。您可以通过以下方式将其添加到您的视图中：

XAML:

<custom: MyCustomGridCell VerticalOptions="FillAndExpand" BackgroundColor="Gray" Padding="2,0,2,2"/>

CS:

//Dont forget to add this to your view (Foo.Children.Add(customView);
MyCustomGridCell customView = new MyCustomGridCell(); 

如果您想向自定义视图添加属性，那不是问题。

如果您使用 XAML 作为 UI（我推荐），您应该添加x:name您可以控制的财产：

<Image x:Name="MainImageView"/>

现在向您的类添加一个新的公共属性，并添加一个 setter：

public ImageSource MainImage
{
    set
    {
        MainImageView.Source = value;
    }
}

现在，在创建自定义视图时，您可以调用MyCustomGridCell.MainImage = Foo;

通过以这种方式创建 UI，您可以使所有内容都变得超级可维护，您可以在应用程序中的任何位置重用此视图，并且只需对此文件进行一次更改。

我目前正在开发一个应用程序，在该应用程序中我构建了自己的日期选择器控件（即将开源）。我使用了这种确切的方法（我已经从我的代码中编写了这个答案）多次重用视图（在循环中）。以下是我使用此方法所能实现的目标的一些预览：