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; }
}

This is what the output is on excecution

However this is what I want it to look like

Answer 1

呸呸呸……瑕疵不少。

1. 为什么要把grid放在stacklayout中作为它唯一的孩子？只需将网格直接放入滚动视图即可。 MoreTileViewHolder.Children.Add(myGrid); 因此毫无用处。只需将<StackLayout x:Name="MoreTileViewHolder" /> 替换为`。

2.您将所有“平铺”对象添加到网格myGrid.Children.Add(tile) 的第 0 列和第 0 行。

添加时必须指定行和网格，否则它们最终会在同一个位置。 myGrid.Children.Add(tile, iColumn, iRow) 似乎这就是你想要的。

我知道您正在尝试使用 Grid.Column 和 Grid.Row-Properties 上的绑定来执行此操作。但我想这并没有更新视图。我的猜测是这些属性是在错误的时间点更改的，因此将其添加到 Grid 不会产生影响。 尽管如此，您必须向我们展示您的“MoreModel”课程。也可能是您没有正确使用 BindableProperties，所以 Frame 上的 Grid.Column="{Binding column}" 从未真正发生过。

3.不要重新发明轮子。最新的 xamarin 版本包括“FlexLayout”，我相信它可以满足您在此处创建的意图。 Xamarin FlexLayout

Answer 2

我不明白“2。您将所有“平铺”对象添加到网格 myGrid.Children.Add(tile) 的第 0 列和第 0 行。”，怎么会？我正在遍历所有项目和设置：

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

而且绑定也应该是正确的，因为我在标签中的标题是正确的。