时间戳

首页 > 解决方案 > Xamarin 形成网格不呈现行/列

c# - Xamarin 形成网格不呈现行/列

问题描述

我有一个网格，我在其中添加了 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; }
}

这是执行时的输出

然而，这就是我想要的样子

标签： c#xamarinxamarin.formsgrid

解决方案

噗……缺陷多多。

1.为什么要把grid放在stacklayout中作为唯一的孩子？只需将网格直接放入滚动视图即可。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 上的绑定来执行此操作。但我想这并没有更新视图。我的猜测是这些属性是在错误的时间点更改的，因此将其添加到 Grid 不会产生影响。尽管如此，您必须向我们展示您的“MoreModel”课程。也可能是您没有正确使用 BindableProperties，因此Grid.Column="{Binding column}"永远Frame不会真正发生。

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

推荐阅读