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

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

因为您将它们添加到Grid中的相同位置，所以它们相互重叠。

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

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

// 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);

返回代码，将所有元素添加到（0,0），这样它们将出现在相同位置。

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（例如Jason或其他layouts）来管理元素。因为您是在foreach循环中创建它们的，所以在每个循环中，您都会向gOut添加具有相同位置的相同内容。

我认为正确的方法是在每个循环中使用正确的Grid和labels创建一个imageButtons，然后将此Grid添加到布局容器中（ layout容器用于对在每个循环中创建的Grid进行布局。最后，将此layout container设置为ContentPage的内容，Content = layout container来显示您的元素。

看看这个document可能对您有帮助，那里还有一个sample。

向网格分配多个子代并将其可视化

1 个答案: