Как отобразить вложенный список в ListView?

Мне нужно разработать код, отображающий все продукты вместе с их параметрами, чтобы их можно было в конечном итоге проверить с помощью ползунков для последующего расчета цены.

Чего я хочу достичь

Код для 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;

        }

    }

XAML MainPage с примером 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

15.06.2019 15:19

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

203

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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));

Я получаю следующий результат: