如何在 ListView 中显示嵌套列表？答案

【问题标题】：How to display nested list in ListView?如何在 ListView 中显示嵌套列表？
【发布时间】：2019-06-15 13:19:09
【问题描述】：

我需要开发一个代码来显示所有产品及其选项，以便最终可以使用滑块检查它们以供以后计算价格。

MainPage 的代码以及一些用于测试的虚拟数据

 public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            List<Product> products = new List<Product>();

            var stronaInternetowa = new Product("Webpage", 100f, new ProductOption("Option1", 10f));
            var sklepInternetowy = new Product("Shop", 100f, new ProductOption("Option1", 10f));

            products.Add(stronaInternetowa);
            products.Add(sklepInternetowy);

            listView.ItemsSource = products;

        }
    }

ProductOption 类，用于存储有关产品选项的数据。

 class ProductOption
    {
        public string OptionName { get; private set; }
        public float OptionPrice { get; private set; }

        public ProductOption(string name, float price)
        {
            OptionName = name;
            OptionPrice = price;

        }

    }

MainPage 的 XAML 与我想要获取的 ListView 示例

 <ListView x:Name="listView" RowHeight="100">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding Name}"></Label>
                            <!-- Here i would like to display all of the ProductOptions in the list along with Sliders -->
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

产品类。

 class Product 
    {


        public string Name { get; set; }
        public float Price { get; set; }



        public List<ProductOption> ProductOptions { get; private set; } = new List<ProductOption>();

        public Product(string name, float price,params ProductOption[] productOption)
        {
            Name = name;
            Price = price;              
            foreach(ProductOption p in productOption)
            {
                ProductOptions.Add(p);
            }
        }
    }

到目前为止我已经尝试过：

分组，并没有像我尝试的那样真正适合我。
嵌套的 ListView，但不受支持。

【问题讨论】：

标签： c# xaml listview xamarin.forms

【解决方案1】：

您可以进行一些更改以启用分组：

XAML 应该是：

<ListView 
    x:Name="listView"
    IsGroupingEnabled="True"        
    HasUnevenRows="True">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell Height="45">
                <Grid Padding="10" BackgroundColor="WhiteSmoke">
                    <Label FontSize="18">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding Name}"/>
                                <Span Text=",  "/>
                                <Span Text="{Binding Price}"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell Height="40">
                <Grid Padding="10" BackgroundColor="White">
                    <Label FontSize="15">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding OptionName}"/>
                                <Span Text=",  "/>
                                <Span Text="{Binding OptionPrice}"/>
                            </FormattedString>
                        </Label.FormattedText>
                     </Label>
                 </Grid>
            </ViewCell>
        </DataTemplate>
     </ListView.ItemTemplate>
</ListView>

产品型号应为：

记下我继承了Product 和List<ProductOptions>

public class Product : List<ProductOption>
{
    public string Name { get; set; }
    public float Price { get; set; }
    public List<ProductOption> ProductOptions => this;
    public Product(string name, float price, params ProductOption[] productOption)
    {
        Name = name;
        Price = price;
        foreach (ProductOption p in productOption)
        {
            ProductOptions.Add(p);
        }
    }
}

当我尝试使用以下数据时：

var stronaInternetowa = new Product("Webpage", 100f, new ProductOption("Option1", 10f), new ProductOption("Option2", 20f), new ProductOption("Option3", 30f));
var sklepInternetowy = new Product("Shop", 100f, new ProductOption("Option1", 10f), new ProductOption("Option2", 20f));

我得到以下结果：

【讨论】：