Question

当前（正在进行的工作）：

当前WIP，backgroundColor设置为黑色：

目标：

我试图复制的目标是上图。现在为了使其可重复，我的第一个倾向是使用包含标签数组的自定义StackLayout创建一个类。每个矩形有五个标签（可能更多的是用来创建矩形的外壳以确保清晰度），并且总共有四个矩形，共有20个不同的标签。

4个不同的矩形，彼此之间有微小的间距完整的矩形（注意四个矩形之间的间距，因此我们知道每个矩形是唯一的），每个矩阵有5列。理想情况下，参数将通过绑定传递给行中的每个单独的矩形。

如果通过1，则1个单元格显示为绿色，其余单元格为灰色。 2,2细胞着色为浅绿色，其余为灰色。 3,3细胞呈黄色，其余为灰色，等

通过这种方式，矩形的分析可以通过检查其颜色或颜色条数来完成。

新鲜的Xamarin.Forms新手总线。阅读他们的开发人员介绍/动手实践pdf，了解一些基础知识，但我还没有找到我正在寻找的东西。

以下是我所考虑的最佳实现示例（具有最小的Xamarin.Forms体验）

这里的希望是有人可以指向/显示能够模拟和创建图像中显示的矩形行的结构。我意识到图片无法如图所示复制 - 只是想知道在Xamarin.Forms中执行此操作的正确方法，因为我不知道这是否是最佳/最佳方式。

示例页面：

public class examplePage : ContentPage
{
    public ObservableCollection<CustomCells> cellColl { get; set; }

    public examplePage()
    {
        ListView listView = new ListView();
        listView.ItemTemplate = new DataTemplate(typeof(CustomCells));
        cellColl.Add(new CustomCells { rectOne = "1", rectTwo = "4", rectThree = "2", rectFour = "5" });
        listView.ItemsSource = Devices;
        var listViewLayout = new StackLayout();
        listViewLayout.Children.Add(listView);
        Content = listViewLayout;
    }
}

示例类：

public class CustomCells : ViewCell
{
    public CustomCells()
    {
        /* TO-DO FORM STRUCTURE HERE */

    // example for examples sake
    var newLayout = new StackLayout()
    {
        Spacing = 1,
        Children =
            {
                new Label
                {
                    Text = " \n ",
                    BackgroundColor = Color.Green,
                    HorizontalOptions = LayoutOptions.Start,
                    VerticalOptions = LayoutOptions.Start
                },

                new Label
                {
                    Text = " \n ",
                    BackgroundColor = Color.Red,
                    HorizontalOptions = LayoutOptions.Start,
                    VerticalOptions = LayoutOptions.Start
                }
            }
    };

    //
    //  Create layouts
    //
    var verticaLayout = new StackLayout();
    var horizontalLayout = new StackLayout() { BackgroundColor = Color.White };

    //
    //  Set bindings
    //
    // Sample binding...
        rowOne.SetBinding(Label.TextProperty, new Binding("ID"));

    //
    //  Set properties for desired design
    //
    horizontalLayout.Orientation = StackOrientation.Horizontal;
    horizontalLayout.HorizontalOptions = LayoutOptions.Fill;
    horizontalLayout.VerticalOptions = LayoutOptions.Center;

    //
    //  Add views to the view hierarchy
    //
    horizontalLayout.Children.Add(newLayout);

    //
    //  Add to parent view
    //
    View = horizontalLayout;
    }
}

如何在可重复的方法中复制行为？

0 个答案: