c# – 如何在Xamarin Forms的表中显示不同类型的项目

期望的结果：

我有一个对象列表,其中包含菜单中每个部分的标题,在此列表中我有图像列表和其他信息

我一直在努力正确地展示它们

我的xaml：

<ContentPage.Content>
    <TableView Intent="Form">
        <TableRoot>
            <TableSection Title="Getting Started">
                <ViewCell>
                    <Grid VerticalOptions="FillAndExpand" Padding = "20,0" >
                        <Grid.ColumnDeFinitions>
                            <ColumnDeFinition Width="Auto" />

                        </Grid.ColumnDeFinitions>
                        <Grid.RowDeFinitions>
                            <RowDeFinition Height="Auto" ></RowDeFinition>
                            <RowDeFinition Height="Auto" ></RowDeFinition>
                        </Grid.RowDeFinitions>
                        <StackLayout Grid.Row="0" x:Name="Titre" Orientation="Horizontal">

                        </StackLayout>
                        <ScrollView Grid.Row="1">
                            <StackLayout
                                Padding="0"
                                x:Name="Image">
                            </StackLayout>
                        </ScrollView>
                    </Grid>
                </ViewCell>
            </TableSection>

        </TableRoot>
    </TableView>

</ContentPage.Content>

C#方法：

private void PopulateProductsLists(List<PlanDeFinition> listArticles)
        {


            for (var i = 0; i < listArticles.Count; i++)
                {
                    //display Title 
                 Titre.Children.Add((new Label { Text = listArticles[i].Name,Style = Device.Styles.TitleStyle,FontAttributes = FontAttributes.Bold,TextColor = Color.White }));

                //display Images from  listArticles[i].ArticlesAvailable
                for (int j= 0; j < listArticles[i].ArticlesAvailable.Count; j++)
                    {

                        listArticles[i].ArticlesAvailable[j].ImageProduit = "https://fit-plans.com/" + listArticles[i].ArticlesAvailable[j].UrlSmallImage;

                        Image image = new Image();
                        image.source = ImageSource.FromUri(new Uri(listArticles[i].ArticlesAvailable[j].ImageProduit));


                        Image.Children.Add(image);


                }

我错的是什么？

解决方法

首先,这是我的错误：

1-不使用可滚动视图

2-使用不同的堆栈布局

我的问题的补救措施：

<!----Scrollable view MUST be used otherwide data simply won't appear  --->
    <ScrollView
                Grid.Column="0"
                Grid.Row="1">
                <Grid 
                    RowSpacing="3"   
                    x:Name="MyGrid"
                    ClassId="myGrid">
                    <Grid.ColumnDeFinitions>
                        <ColumnDeFinition Width="*" />       
                    </Grid.ColumnDeFinitions>
                    <Grid.RowDeFinitions>
                        <RowDeFinition Height="*"></RowDeFinition>
                    </Grid.RowDeFinitions>
                    <StackLayout VerticalOptions="FillAndExpand"
                                 HorizontalOptions="FillAndExpand"
                        x:Name="ProduitsLayout">
                       <!----Products will be displayed here --->
                    </StackLayout>
                </Grid>
            </ScrollView>

并在代码背后：

private void PopulateProductsLists(List<PlanDeFinition> listArticles)
            {
                int labelIndex = 0;
                int count = 0;
                for (var i = 0; i < listArticles.Count; i++)
                {
                   //Calling a view to display data
                    item = new PlanorderTemplate();             

                    var lastHeight = "100";
                    var y = 0;
                    int column = 1;
                    var productTapGestureRecognizer = new TapGestureRecognizer();

                //Add label in the stack layout
                    ProduitsLayout.Children.Add((new Label
                    {
                        Text = listArticles[i].Name,TextColor = Color.Black
                    }));


                    for (int j = 0; j < listArticles[i].ArticlesAvailable.Count; j++)
                    {

                        productTapGestureRecognizer.Tapped += OnProductTapped;

                        item = new PlanorderTemplate();

                        listArticles[i].ArticlesAvailable[j].ThumbnailHeight = lastHeight;
                       //Applying binding to the view in order to display data
                            item.BindingContext = listArticles[i].ArticlesAvailable[j];
                            item.GestureRecognizers.Add(productTapGestureRecognizer);

        //This is mandatory you need to call the add the view page to the stack layout
                            ProduitsLayout.Children.Add(item);
    }
    }
}

现在我正在讨论的视图页面：ProduitsLayout.xaml

配置我想用步进器加载的图像

<StackLayout Orientation="Vertical"

        Spacing="1">

        <ffimageloading:CachedImage 
            FadeAnimationEnabled="true" 
            Source="{Binding ImageProduit}" 
            HeightRequest="{Binding ThumbnailHeight}" 
            Aspect="AspectFill"/>

        <Label x:Name="lbldisp"  Text="1" VerticalOptions="Center" HorizontalOptions="Center"></Label>
        <Stepper Minimum="0" Maximum="10" Increment="1" HorizontalOptions="FillAndExpand" VerticalOptions="CenterandExpand" ValueChanged="OnValueChanged" />



</StackLayout>