ListView 项目不适合网格单元格

Question

请帮帮我。在 Xamarin.Forms 我有一个包含卡片的主 ListView（带网格的框架）。每个网格都有标签和带有电话的 ListVew。带有电话的 ListVew 占用三行三列。我需要 Grid 内手机 ListView 的所有元素始终可见（通常它们的数量最多为三个，但可能更多），并且如果需要，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

使用带有 BindableLayout 的简单 StackLayout，因为您不想要可滚动的视图。

由于 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;
});

界面结果

请检查这是否对您有帮助...