Xamarin ListView 分组导致黑屏

Question

我正在使用 Xamarin.Forms (xaml) 开发一个应用程序，但现在我对 ListView 的分组有一个奇怪的行为

我有一个带有 CustomCell 的 ListView，如果我在没有分组的情况下显示它，一切都按预期工作，但如果我将 IsGroupingEnabled 设置为 true，屏幕会变黑。

分组前：

带分组

我不知道我错过了什么或我做错了什么。

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cell="clr-namespace:BrindaApp.Cells"
             x:Class="BrindaApp.Tabs.MainTab" Title="Main">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Entry Placeholder="Search" HorizontalOptions="StartAndExpand"></Entry>
            <Image x:Name="image_Group" HorizontalOptions="End">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Group_Tapped"  />
                </Image.GestureRecognizers>
            </Image>
        </StackLayout>
        <StackLayout VerticalOptions="FillAndExpand">

            <ListView ItemsSource="{Binding ProductSource}" HasUnevenRows="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" x:Name="mainListView"
                      RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1,Constant=0}" IsPullToRefreshEnabled="True" BackgroundColor="Black"
                          GroupDisplayBinding="{Binding Category}" GroupShortNameBinding="{Binding Category}" IsGroupingEnabled="True">
                <ListView.Resources>

                </ListView.Resources>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <cell:ProductCell ImageUrl="{Binding ProductImageUrl}" Difficult="{Binding Difficult}" Titel="{Binding Titel}" IsFavorit="{Binding IsFavorit}" ProductId="{Binding ProductId}"
                                          RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.2,Constant=0}" Height="200" Tapped="ProductCell_Tapped"
                                      ></cell:ProductCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            <!--</RelativeLayout>-->
        </StackLayout>
    </StackLayout>
    <!--<Label Text="Some Text"/>-->
</ContentPage>

MainPage.xaml.cs

public partial class MainTab : ContentPage
    {
        ProductsViewModel viewModel;
        public bool IsGrouped { get; set; }
        public MainTab()
        {
            viewModel = new ProductsViewModel();
            BindingContext = viewModel;
            InitializeComponent();

            viewModel.mainListView = mainListView;
            image_Group.Source = ImageSource.FromResource("BrindaApp.Imgs.group.png");


        }

        private void ProductCell_Tapped(object sender, EventArgs e)
        {
            Navigation.PushAsync(new ProductDetails());
        }

        private void Group_Tapped(object sender, EventArgs e)
        {
            if(IsGrouped)
            {
                mainListView.IsGroupingEnabled = false;

            }
            else
            {
                mainListView.IsGroupingEnabled = true;
            }

            IsGrouped = !IsGrouped;
        }
    }

型号：

public class ProductModel
    {
        public string ProductImageUrl { get; set; }
        public string Titel { get; set; }
        public int Difficult { get; set; }
        public bool IsFavorit { get; set; }
        public string ProductId { get; set; }

        public string Category { get; set; }
    }

视图模型

public class ProductsViewModel:BaseViewModel
    {
        public ListView mainListView;
        ObservableCollection<ProductModel> productSource;
        public ObservableCollection<ProductModel> ProductSource
        {
            get
            {
                return productSource;
            }

            set
            {
                productSource = value;
                FirePropertyChanged("ProductSource");
            }


        }

        public ICommand RefreshListView { get; set; }

        public ProductsViewModel()
        {
            ProductSource = new ObservableCollection<ProductModel>();
            ProductSource.Add(new ProductModel() { ProductImageUrl = "https://media-cdn.tripadvisor.com/media/photo-s/02/d7/5a/1c/essen-trinken.jpg", IsFavorit = true, Category = "Test" });
            ProductSource.Add(new ProductModel() { ProductImageUrl = "https://www.burgerking.at/003_at/website/slider/17_028_pop_cheesemas16_at/17_028_pop_cheesemas16_at_startseitenslider_01_product_angusclaus.png", Category = "Test" });
            ProductSource.Add(new ProductModel() { ProductImageUrl = "https://media-cdn.tripadvisor.com/media/photo-s/02/d7/5a/1c/essen-trinken.jpg", IsFavorit = true });
            ProductSource.Add(new ProductModel() { ProductImageUrl = "https://www.burgerking.at/003_at/website/slider/17_028_pop_cheesemas16_at/17_028_pop_cheesemas16_at_startseitenslider_01_product_angusclaus.png", Category = "Test" });
            FirePropertyChanged("ProductSource");


            RefreshListView = new Command(() =>
            {
                //TODO refresh list


                mainListView.IsRefreshing = false;
            },
             () =>
             {
                 return true;
             });
        }
    }

我在这里挣扎了好几天，找不到答案，希望有人可以帮助我。 作为指导我使用：https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/customizing-list-appearance/#Grouping

Answer 1

在阅读link时您还提到了自己，您需要创建一个列表列表：

创建列表列表（组列表，每个组都是元素列表）。

现在，您只有一个简单的列表，这很可能是您遇到问题的原因。

同样取自同一链接的示例如下：

static PageTypeGroup()
{
    List<PageTypeGroup> Groups = new List<PageTypeGroup> {
            new PageTypeGroup ("Alfa", "A"){
                new PageModel("Amelia", "Cedar", new switchCellPage(),""),
                new PageModel("Alfie", "Spruce", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ava", "Pine", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Archie", "Maple", new switchCellPage(), "grapefruit.jpg")
            },
            new PageTypeGroup ("Bravo", "B"){
                new PageModel("Brooke", "Lumia", new switchCellPage(),""),
                new PageModel("Bobby", "Xperia", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Bella", "Desire", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ben", "Chocolate", new switchCellPage(), "grapefruit.jpg")
            }
        }
        All = Groups; //set the publicly accessible list
}