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

Question

期望的结果:

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

我一直在苦苦思索如何正确显示它们

我的 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);


                }

我做错了什么？

Answer 1

首先是我的错误:

1- 不使用可 ScrollView

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,
                        Style = Device.Styles.TitleStyle,
                        FontAttributes = FontAttributes.Bold,
                        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);
    }
    }
}

现在我正在谈论的 View 页面: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>