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

P……有很多缺陷。

1。。为什么将网格作为唯一的子元素放置在stacklayout中？只需将网格直接放入scrollview。 MoreTileViewHolder.Children.Add(myGrid);因此是无用的。只需将<StackLayout x:Name="MoreTileViewHolder" />替换为`。

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

添加时必须指定行和网格，否则它们将位于同一位置。 myGrid.Children.Add(tile, iColumn, iRow)似乎就是您想要的。

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

3。。不要重新发明轮子。 xamarin的最新版本包括“ FlexLayout”，我相信您打算在这里创建它。 Xamarin FlexLayout

Answer 2

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

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

并且绑定也应该是正确的，因为我在标题中正确获得了标题。

Xamarin表格网格不呈现行/列

2 个答案: