将多个子节点分配给网格并将其可视化

Question

我正在设置一个Xamarin.Forms应用程序，我试图添加一个“模块”，将其保存在列表中，然后通过网格单元在Android上进行可视化。

问题出在可视化中。问题是我正在尝试将多个子节点添加到同一网格单元格中，但它们彼此重叠。

public void CreateModuleGrids()
    {

        foreach (Module item in _mm.ModulesList)
        {
             gOut.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(100) });
                gOut.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
                gOut.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });

                Label lblBez = new Label();
                lblBez.Text = item.Name.ToString();
                lblBez.VerticalOptions = LayoutOptions.Center;
                lblBez.HorizontalOptions = LayoutOptions.Center;

                lblBez.WidthRequest = 151;
                lblBez.HeightRequest = 25;

                Label lblStatus = new Label();
                lblStatus.WidthRequest = 151;
                lblStatus.HeightRequest = 25;
                if (item.Type == "blind")
                {
                    lblStatus.Text = "100 %";
                    lblStatus.VerticalOptions = LayoutOptions.Center;
                    lblStatus.HorizontalOptions = LayoutOptions.Center;

                }
                else
                {
                    lblStatus.Text = "Closed";
                    lblStatus.VerticalOptions = LayoutOptions.Center;
                    lblStatus.HorizontalOptions = LayoutOptions.Center;
                }

                if (item.Type == "blind")
                {
                    bmp100.WidthRequest = (119);
                    bmp100.HeightRequest = (117);
                    bmp100.Aspect = Aspect.AspectFit;
                    bmp100.VerticalOptions = LayoutOptions.Center;
                    bmp100.HorizontalOptions = LayoutOptions.Center;

                    gOut.Children.Add(bmp100, 0, 0);
                }
                else
                {
                    bmpClosed.WidthRequest = (119);
                    bmpClosed.HeightRequest = (117);
                    gOut.Children.Add(bmpClosed, 0, 0);
                }

                if (item.Type == "blind")
                {
                    ImageButton btnArrowUp = new ImageButton();

                    btnArrowUp.WidthRequest = 37;
                    btnArrowUp.HeightRequest = 50;
                    btnArrowUp.Source = "ArrowUp.png";
                    btnArrowUp.Aspect = Aspect.AspectFit;
                    btnArrowUp.VerticalOptions = LayoutOptions.Start;
                    btnArrowUp.HorizontalOptions = LayoutOptions.Start;

                    btnArrowUp.Clicked += new EventHandler(this.btnArrowUp_click);

                    ImageButton btnArrowDown = new ImageButton();
                    btnArrowDown.WidthRequest = 37;
                    btnArrowDown.HeightRequest = 50;
                    btnArrowDown.Source = "ArrowDown.png";
                    btnArrowDown.Aspect = Aspect.AspectFit;
                    btnArrowDown.VerticalOptions = LayoutOptions.End;
                    btnArrowDown.HorizontalOptions = LayoutOptions.End;
                    btnArrowDown.Clicked += new EventHandler(this.btnArrowDown_click);

                    gOut.Children.Add(lblBez, 0, 0);
                    gOut.Children.Add(lblStatus, 0, 0);
                    gOut.Children.Add(btnArrowDown, 0, 0);
                    gOut.Children.Add(btnArrowUp, 0, 0);

                }
                else
                {
                    ImageButton btnOut = new ImageButton();
                    btnOut.Measure(37, 50);
                    btnOut.Source = "ArrowLeft.png";
                    btnOut.Clicked += new EventHandler(this.btnTipOpen_click);

                    ImageButton btnIn = new ImageButton();
                    btnIn.Measure(37, 50);
                    btnIn.Source = "ArrowRight.png";
                    btnIn.Clicked += new EventHandler(this.btnTipClose_click);

                    gOut.Children.Add(lblBez, 0, 0);
                    gOut.Children.Add(lblStatus, 0, 0);
                    gOut.Children.Add(btnIn, 0, 0);
                    gOut.Children.Add(btnOut, 0, 0);



                }

            }

我的期望是有一个网格实例，其中包含一个标签，上面是模块名称，左侧是图像按钮，右侧是图像按钮，中间是图像，最后是图像下方的标签地位。提前致谢！

Answer 1

问题是我正在尝试将多个子节点添加到同一网格单元格中，但它们彼此重叠。

这些项目彼此重叠，因为您将它们添加到qazxsw poi中的相同位置。

要在网格中放置视图，您需要将它们作为子项添加到网格中，然后指定它们所属的行和列。

函数Grid中的最后两个参数指定Grid中项目的位置。例如，有一个有两行和两列的网格，然后（0,0）表示grid.Children.Add，（1,1）表示top left。

bottom right

回到你的代码，你将所有元素添加到（0,0），因此它们将出现在相同的位置。

// left, top
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 1, 0);
grid.Children.Add(bottomLeft, 0, 1);
grid.Children.Add(bottomRight, 1, 1);

你的代码中的另一个问题是你需要一个

gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnIn, 0, 0);
gOut.Children.Add(btnOut, 0, 0);

（像Layout container或其他stacklayout），因为layouts说要管理你的元素。因为你在Jason循环中创建它们，并且在每个循环中你将相同的位置添加到foreach。

我认为正确的方法是在每个循环中用你的gOut和Grid创建一个labels，然后将这个imageButtons添加到Layout容器中（这个布局容器用于布局在每个循环中创建的Grid）。最后，将此Grid设置为ContentPage的内容，layout container以显示您的元素。

看看这个Content = layout container可能会帮助你，那里还有一个document。