Xamarin формирует сетку, не отображающую строки / столбцы

Question

У меня есть сетка, в которую я добавляю moreTileView.но это просто рендеринг в первой строке и столбце (перекрывая друг друга).Я хочу, чтобы каждая новая «плитка» отображалась в новой строке и / или столбце.Может быть, это не лучший способ сделать это.Если у вас, ребята, есть идея, как добиться того, что я пытаюсь сделать, пожалуйста, дайте мне знать.

MoreTilePage.xaml

<ContentPage.Content>
    <ScrollView>
        <StackLayout  x:Name="MoreTileViewHolder" />
    <ScrollView>
</ContentPage.Content>

MoreTilePage.xaml.cs

public partial class MoreTilePage : ContentPage
{
    public MoreTilePage()
    {
        InitializeComponent();

        var items = PixelApp.Platform.AppContext.Instance.moreViewModel?.Items;

        Grid myGrid = new Grid();

        myGrid.HorizontalOptions = LayoutOptions.FillAndExpand;
        myGrid.Padding = new Thickness(10);

        myGrid.RowDefinitions = new RowDefinitionCollection
        {
            new RowDefinition { Height = new GridLength(220) },
            new RowDefinition { Height = new GridLength(220) },
            new RowDefinition { Height = new GridLength(220) },
            new RowDefinition { Height = new GridLength(220) },
            new RowDefinition { Height = new GridLength(220) }
        };

        myGrid.ColumnDefinitions = new ColumnDefinitionCollection
        {
            new ColumnDefinition { Width = GridLength.Star },
            new ColumnDefinition { Width = GridLength.Star }
        };


        int iColumn = 0;
        int iRow = 0;
        int iItem = 1;


        foreach (MoreModel model in items)
        {
            if (iItem > 2)
            {
                iItem = 1;
                iRow++;
            }

            model.row = iRow;
            model.column = iColumn;

            var tile = new MoreTileView(model);
            myGrid.Children.Add(tile);

            iItem++;

            if (iColumn == 0)
                iColumn = 1;
            else
                iColumn = 0;
        }

        MoreTileViewHolder.Children.Add(myGrid);
    }
}

MoreTileView.xaml

<ContentView.Content>
    <Frame Grid.Column="{Binding column}" Grid.Row="{Binding row}" Margin="0" HasShadow="True" BackgroundColor="LightGray" IsClippedToBounds="True" CornerRadius="10" Padding="0">
        <Grid>
            <ffimageloading:CachedImage Source="{Binding image}" Aspect="AspectFill" />
            <ffimageloading:CachedImage Source="https://www.fisher-price.com/resources/animations/Imaginext/meetcharacters/images/kids_bkg-grey-grad.png" Aspect="Fill" />

            <BoxView HeightRequest="3" BackgroundColor="HotPink" VerticalOptions="End" HorizontalOptions="Start" WidthRequest="70" Margin="10,10,10,60" />
            <Label Text="{Binding headline}" TextColor="White" VerticalOptions="End" Margin="10,10,10,10" />
        </Grid>
    </Frame>
</ContentView.Content>

MoreModel.cs

public class MoreModel
{
    public int id { get; set; }
    public int appId { get; set; }
    public int sort { get; set; }
    public string headline { get; set; }
    public string description { get; set; }
    public string image { get; set; }
    public string link { get; set; }

    public int column { get; set; }
    public int row { get; set; }
}

Это то, что выводится при исключении

Однако я хочу, чтобы это выглядело

Answer 1

Я не понимаю "2. Вы добавляете все свои объекты" плитки "в столбцы 0 и строку 0 сетки myGrid.Children.Add (tile).", Как получилось? Я перебираю все элементы и устанавливаю:

model.row = iRow;
model.column = iColumn;

и привязки также должны быть правильными, поскольку я правильно получаю заголовок на этикетке.

Answer 2

Пуххх ... есть много недостатков.

1. Зачем помещать сетку в стек в качестве единственного дочернего элемента? Просто поместите сетку прямо в вид прокрутки. MoreTileViewHolder.Children.Add(myGrid); поэтому бесполезен. Просто замените <StackLayout x:Name="MoreTileViewHolder" /> на `.

2. Вы добавляете все свои объекты «плитки» в столбец 0 и строку 0 сетки myGrid.Children.Add(tile).

Вы должны указать строку и сетку при добавлении, иначе они окажутся в одном месте. myGrid.Children.Add(tile, iColumn, iRow) кажется, что это то, что вы намерены.

Я знаю, что вы пытаетесь сделать это с помощью привязок в Grid.Column и Grid.Row-Properties. Но я думаю, что это не обновляет представление. Я предполагаю, что эти свойства изменяются в неправильный момент времени, поэтому добавление их в сетку не будет иметь эффекта. Несмотря на это, вы должны показать нам свой класс "MoreModel". Возможно также, что вы не используете BindableProperties правильно, поэтому Grid.Column="{Binding column}" на Frame просто никогда не происходит.

3. Не изобретайте велосипед. Последняя версия xamarin включает в себя «FlexLayout», который, я считаю, делает то, что вы намерены создать здесь. Xamarin FlexLayout