Показать сетки в формах Xamarin из кода позади (c#)

Question

У меня есть некоторые данные, полученные в ответ от остальных API. Мне нужно отобразить эти данные в виде сетки. Json выглядит следующим образом:

{
 "field 1" : "name1",
 "field 2" : "name 2",
 "data" : [
     {
       "type 1" : "name 1",
       "type 2" : "name 2"
     },
     {
       "type 1" : "name 3",
       "type 2" : "name 4"
     }
 ]

Таким образом, из приведенного выше примера количество записей в поле "data" может изменяться динамически. Я создал сетку для отображения этих полей из кода следующим образом:

foreach(var obj in data)   //reads data fields
{
  //json deserialization goes here
  Grid grid = new Grid()    //want to create a separate grid for each entry in json *data*
  {
    VerticalOptions = LayoutOptions.Start,
    RowDefinitions =
           {
            new RowDefinition { Height = GridLength.Auto },
            new RowDefinition { Height = GridLength.Auto },
           },
        };
    grid.Children.Add(new Label
        {
            Text = "Field 1",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.Center
        }, 0, 0);

   ///more code on grid.

}

Из вышеприведенной реализации создается только одна сетка, в которой есть записи для последнего значения data field ( т.е. name3, name4). Как отобразить отдельные сетки для каждого json вложенных полей в data

Answer 1

Вы можете попробовать код ниже. Я использую json строку, например. Используйте окно просмотра, чтобы разделить имя столбца и данные. Вы также можете использовать boxview для разделения данных.

 public ObservableCollection<Rootobject> list { get; set; }

    public MainPage()
    {
        InitializeComponent();
        var datas = @"{
'field1':'name1',
'field2':'name2',
'data':[
{
'type1':'name1',
'type2':'name2'
},
{
'type1':'name3',
'type2':'name4'
}
]
}";
        var jsondata = JsonConvert.DeserializeObject<Rootobject>(datas);

        list = new ObservableCollection<Rootobject>();
        list.Add(jsondata);


        Grid grid = new Grid() { RowSpacing = 5, ColumnSpacing = 5, };
        grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
        grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
        grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
        grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });

        grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
        grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
        grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
        grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });

        var field1 = new Label()
        {
            Text = "field1",
            VerticalOptions = LayoutOptions.Center
        };
        var field2 = new Label()
        {
            Text = "field2",
            VerticalOptions = LayoutOptions.Center
        };
        var data = new Label()
        {
            Text = "data",
            HorizontalOptions = LayoutOptions.Center
        };
        var type1 = new Label()
        {
            Text = "type1",
        };
        var type2 = new Label()
        {
            Text = "type2",
        };
        var boxview = new BoxView()
        {
            BackgroundColor = Color.Black,
            HeightRequest = 1
        };
        grid.Children.Add(field1, 0, 0);
        Grid.SetRowSpan(field1, 2);

        grid.Children.Add(field2, 1, 0);
        Grid.SetRowSpan(field2, 2);

        grid.Children.Add(data, 2, 0);
        Grid.SetColumnSpan(data, 2);
        grid.Children.Add(type1, 2, 1);
        grid.Children.Add(type2, 3, 1);

        grid.Children.Add(boxview, 0, 2);
        Grid.SetColumnSpan (boxview,4);
        foreach (var item in list)
        {
            var field1_value = new Label()
            {
                Text = item.field1,
            };
            grid.Children.Add(field1_value, 0, 3);
            Grid.SetRowSpan(field1_value, 2);
            var field2_value = new Label()
            {
                Text = item.field2,
            };
            grid.Children.Add(field2_value, 1, 3);
            Grid.SetRowSpan(field2_value, 2);

            int row_type1 = 3;
            int row_type2 = 3;
            foreach (var type_value in item.data)
            {
                var type1_value = new Label()
                {
                    Text = type_value.type1,
                };
                grid.Children.Add(type1_value, 2, row_type1);
                var type2_value = new Label()
                {
                    Text = type_value.type2,
                };
                grid.Children.Add(type2_value, 3, row_type2);
                row_type1++;
                row_type2++;
            }

        }
        Content = grid;
        //this.BindingContext = jsondata;
    }
}

public class Rootobject
{
    public string field1 { get; set; }
    public string field2 { get; set; }
    public Datum[] data { get; set; }
}

public class Datum
{
    public string type1 { get; set; }
    public string type2 { get; set; }
}
}

Answer 2

вам нужно добавить свои сетки в контейнер макетов

StackLayout stack = new StackLayout();

foreach(var obj in data)   //reads data fields
{
  Grid grid = new Grid()
  {
    ...
  }
  stack.Children.Add(grid);
}