Элементы ListView не помещаются в ячейки сетки

Question

Помогите мне, пожалуйста. В Xamarin.Forms у меня есть основной ListView, содержащий карты (Frame with Grid). Каждая сетка имеет метки и ListVew с телефонами. ListVew с телефонами занимает три строки и три столбца. Мне нужно, чтобы все элементы телефона ListView внутри Grid были всегда видны (обычно их число до трех, но, может быть, больше) и чтобы высота ячеек Grid увеличивалась при необходимости, чтобы вместить все элементы телефона ViewList , Возможно ли это сделать? Теперь ячейки сетки увеличиваются по высоте текста в метках, но не по высоте PhoneListView.

[MyListView MainView = new MyListView
            {
                SeparatorVisibility = SeparatorVisibility.None,
                HasUnevenRows = true,

                ItemTemplate = new DataTemplate(() =>
                {
                    Grid MyGrid = new Grid
                    {
                        RowDefinitions =
                {
                new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) },
                new RowDefinition { Height = new GridLength(0.02, GridUnitType.Absolute) },
                new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
                new RowDefinition { Height = new GridLength(0.02, GridUnitType.Absolute) },
                new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
                new RowDefinition { Height = new GridLength(0.02, GridUnitType.Absolute) },
                new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) }
                },
                        ColumnDefinitions =
                {
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
                }
                    };

...

ListView phonesList = new ListView
                    {
                        VerticalScrollBarVisibility = ScrollBarVisibility.Never,
                        BackgroundColor = Color.Transparent,
                        SeparatorVisibility = SeparatorVisibility.None,
                        HasUnevenRows = true,
                        VerticalOptions = LayoutOptions.FillAndExpand,
                        ItemTemplate = new DataTemplate(() =>
                        {
                            Image phoneButton = new Image { Source = "phone_green.png", HeightRequest = 40, VerticalOptions = LayoutOptions.Center };
                            Label phoneTextLabel = new Label { HeightRequest = 40, VerticalOptions = LayoutOptions.Center, VerticalTextAlignment = TextAlignment.Center };
                            phoneTextLabel.SetBinding(Label.TextProperty, "phone");
                            return new ViewCell { View = new StackLayout {
                                Orientation = StackOrientation.Horizontal,
                                Children = { phoneButton, phoneTextLabel } } };
                        })
                    };
phonesList.SetBinding(ListView.ItemsSourceProperty, "phones", BindingMode.Default, new PhoneSepConverter());
...
                    DetailGrid.Children.Add(phonesList, 4, 2); 
...
                    Grid.SetColumnSpan(phonesList, 3);
                    Grid.SetRowSpan(phonesList, 3);
...
Frame ListItem = new Frame { Content = MyGrid };
                    return new ViewCell
                    {
                        View = ListItem
                    };
})
            };][1]

Answer 1

Используйте простой StackLayout с BindableLayout, так как вам не нужен прокручиваемый вид.

Поскольку ItemSizingStrategy недоступно в ListView, все элементы отображаются одинаковым размером первого элемента. Что не подошло бы вашему делу.

Используйте CollectionView вместо ListView для mainListView и установите ItemSizingStrategy на MeasureAllItems.

CollectionView mainListView = new CollectionView();
mainListView.ItemsSource = new List<Item>()
{
    new Item(){Name = "First", Phones = new List<string>(){ "Pnone 1",} },
    new Item(){Name = "Second", Phones = new List<string>(){ "Pnone 1", "Phone 2", "Phone 4"} },
    new Item(){Name = "Third", Phones = new List<string>(){ "Pnone 1", "Phone 4"} },
    new Item(){Name = "Fourth", Phones = new List<string>(){ "Pnone 1", "Phone 2", "Phone 3", "Phone 4"} },
    new Item(){Name = "Fifth", Phones = new List<string>(){ "Pnone 1", "Phone 2"} },
    new Item(){Name = "Sixth", Phones = new List<string>(){ "Pnone 1", "Phone 2", "Phone 3"} },
    new Item(){Name = "Seventh", Phones = new List<string>(){ "Phone 4"} },
    new Item(){Name = "Eight", Phones = new List<string>(){ "Pnone 1", "Phone 2", "Phone 3", "Phone 4"} },
    new Item(){Name = "Ninth", Phones = new List<string>(){ "Pnone 1", "Phone 2", "Phone 4"} },
    new Item(){Name = "Tenth", Phones = new List<string>(){ "Pnone 1", "Phone 4"} },
    new Item(){Name = "Eleventh", Phones = new List<string>(){ "Pnone 1", "Phone 2", "Phone 3", "Phone 4"} },
    new Item(){Name = "Tweleth", Phones = new List<string>(){ "Pnone 1", "Phone 2", "Phone 3"} },
    new Item(){Name = "Thirteenth", Phones = new List<string>(){ "Pnone 1", "Phone 2", "Phone 3", "Phone 4"} },
    new Item(){Name = "Fourteenth", Phones = new List<string>(){ "Pnone 1", "Phone 2"} },
};

mainListView.ItemSizingStrategy = ItemSizingStrategy.MeasureAllItems;

mainListView.ItemTemplate = new DataTemplate(() =>
{
    Frame frame = new Frame()
    {
        CornerRadius = 0,
        BackgroundColor = Color.Gray
    };

    Grid mainItemGrid = new Grid()
    {
        ColumnDefinitions =
        {
            new ColumnDefinition(){Width = new GridLength(1, GridUnitType.Star)}
        }
    };

    StackLayout stackLayout = new StackLayout()
    {
        Orientation = StackOrientation.Vertical
    };
    stackLayout.SetBinding(BindableLayout.ItemsSourceProperty, "Phones");
    BindableLayout.SetItemTemplate(stackLayout, new DataTemplate(() => {
        Label label = new Label();
        label.SetBinding(Label.TextProperty, ".");
        return label;
    }));

    mainItemGrid.Children.Add(
        new Label() { Text = "Some text" }
        , 0, 0);

    mainItemGrid.Children.Add(
        stackLayout, 1, 0);

    frame.Padding = 1;
    frame.Content = mainItemGrid;

    mainItemGrid.BackgroundColor = Color.White;
    return frame;
});

Результат пользовательского интерфейса

Пожалуйста, проверьте, поможет ли это вам ...