在 Xamarin 中创建自定义网格项答案

【问题标题】：Create a custom Grid Item in Xamarin在 Xamarin 中创建自定义网格项
【发布时间】：2018-09-01 12:18:43
【问题描述】：

我的 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 顺便说一句。任何帮助将不胜感激:)

【问题讨论】：

标签： class xamarin xamarin.forms grid

【解决方案1】：

您可以使用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，您可以让所有内容都超级可维护，您可以在应用中的任何位置重复使用此视图，并且只需对该文件进行一次更改。

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

【讨论】：