Как исправить проблему высоты со списком в списке

Question

Я трачу на это так много времени ... Может ли кто-нибудь помочь мне решить эту проблему?
Моя цель - составить список карточек (рамок), каждая карточка будет иметь две метки и (короткий) список предметов .

Чтобы сделать вещи более читабельными, я решил создать собственный компонент с фреймом и его контентом.
Если я составлю список фреймов, каждый фрейм будет иметь только метки, все будет выглядеть хорошо ( первое изображение). Высота фреймов - это только необходимая высота, не более.
НО ... когда я добавляю в фреймы второй уровень просмотра списка, все эти списки тратят много пустой высоты после своих элементов (второе изображение)! !! И я не могу избавиться от этого потраченного впустую пространства ... Гррр ...

I publish you only the code of the custom component (with the second level of listview):

Я пытаюсь везде добавлять VerticalAlign = "Start", но это не помогает.
Использование HasUnevenRows = "True" не влияет на эту проблему.

Кто-нибудь может мне помочь?

Answer 1

Вы можете решить эту проблему, используя BindableLayouts .

Следующий код очень похож на то, что вам нужно. Я написал базовые модели c, вы всегда можете реализовать интерфейс INotifyPropertyChanged, если вам это нужно.

Модель / ViewModel:

public class CardModel
{
    public string TaskHeading { get; set; }
    public string PeopleHeading { get; set; }

    public CardItemModel[] Items { get; set; }

    public class CardItemModel
    {
        public string Mark { get; set; }
        public string Description { get; set; }
    }
}

public class CardsPageViewModel
{
    public CardModel[] Tasks { get; set; }

    public CardsPageViewModel()
    {
        Tasks = Enumerable.Range(1, 10).Select(i =>
            new CardModel
            {
                TaskHeading = $"TaskHeading {i}",
                PeopleHeading = $"People Heading {i}",
                Items = Enumerable.Range(1, 4).Select(j =>
                    new CardModel.CardItemModel
                    {
                        Mark = $"Mark {j}",
                        Description = $"Description {j}"
                    }).ToArray()
            }).ToArray();
    }
}

XAML:

...
<ScrollView>
    <StackLayout BindableLayout.ItemsSource="{Binding Tasks, Mode=OneWay}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Frame>
                    <StackLayout>
                        <Label Text="{Binding TaskHeading, Mode=OneWay}" FontAttributes="Bold"/>
                        <Label Text="{Binding PeopleHeading, Mode=OneWay}"/>
                        <StackLayout  BindableLayout.ItemsSource="{Binding Items, Mode=OneWay}" BackgroundColor="LightPink">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <StackLayout Orientation="Horizontal">
                                        <Label Text="{Binding Mark, Mode=OneWay}"/>
                                        <Label Text="{Binding Description, Mode=OneWay}"/>
                                    </StackLayout>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>
                    </StackLayout>
                </Frame>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ScrollView>
...

Вывод:

EDIT: I forgot to add the ViewBox separator and Frame CornerRadius and BorderColor.

введите описание изображения здесь