Назначение нескольких детей в Grid и их визуализация

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 указывают положение элемента в сетке.Например, существует таблица с двумя строками и двумя столбцами, тогда (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 или другой *).1023 * макеты ) как сказано Jason для управления вашими элементами.Потому что вы создаете их в цикле foreach, и в каждом цикле вы добавляете одну и ту же вещь с одинаковым положением в gOut.

Я думаю, что ПРАВИЛЬНЫЙ способ - создать Grid с вашими labels и imageButtons с правильной позицией в каждом цикле. Затем добавьте это Grid в контейнер макетов (этот контейнер макетов используется длямакет сетки, созданной в каждом цикле).Наконец, установите это layout container в качестве содержимого ContentPage, Content = layout container, чтобы отобразить ваши элементы.

Посмотрите на этот документ , который может вам помочь, и есть также образец там.