具有分组标题的ListView不显示ListView项-Xamarin

Question

我有一个listview，其中itemsource绑定到视图模型中的ObservableCollection属性。 然后，我想通过“日期”值对这些项目进行分组，但是现在没有明显填充列表视图。 以下是Xaml页面中的列表视图。

    <ListView 
                              ItemsSource="{Binding UpcomingGamesGrouped}"
                              IsGroupingEnabled="True"
                              GroupDisplayBinding="{Binding Key}"
                              GroupShortNameBinding="{Binding Key}"
                              ItemSelected="ListView_ItemSelected" 
                              SelectedItem="{Binding SelectedFixture, Mode=TwoWay}"  
                              HasUnevenRows="True" IsVisible="True" Grid.Column="1">
                        <ListView.GroupHeaderTemplate>
                            <DataTemplate>
                                <ViewCell Height="25">
                                    <StackLayout VerticalOptions="FillAndExpand"
                                                   Padding="5"
                                                   BackgroundColor="#3498DB">   
                                        <Label Text="{Binding Key}" TextColor="White" VerticalOptions="Center"/>
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <ViewCell.View>
                                        <Grid >
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition/>
                                                <ColumnDefinition Width="50"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <Label Text="{Binding HomeTeam}" TextColor="{DynamicResource mainTextColor}" 
                                                    Grid.Column="0" Grid.Row="0" HorizontalOptions="CenterAndExpand"
                                                    FontSize="{DynamicResource teamFontSize}"/>
                                            <Label Text="{Binding Time}" FontSize="{DynamicResource regularFontSize}" HorizontalTextAlignment="Center" WidthRequest="40"
                                                   BackgroundColor="{DynamicResource subTextColor}" 
                                                        HorizontalOptions="Center" Grid.Column="1" Grid.Row="0"/>
                                            <Label Text="{Binding AwayTeam}" TextColor="{DynamicResource mainTextColor}" 
                                                    Grid.Column="2" Grid.Row="0" HorizontalOptions="CenterAndExpand" 
                                                    FontSize="{DynamicResource teamFontSize}"/>
                                            <Label Text="{Binding Location}" FontSize="{DynamicResource subtitleFontSize}" 
                                                    HorizontalOptions="CenterAndExpand" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3"/>
                                        </Grid>
                                    </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>

UpComingGame模型如下所示：

public class UpComingGame
    {
        public string Location { get; private set; }
        public string Time { get; private set; }
        public string HomeTeam { get; private set; }
        public string AwayTeam { get; private set; }
        public string Date { get; private set; }

        public string DateSort
        {
            get
            {
                if (string.IsNullOrWhiteSpace(Date) || Date.Length == 0)
                    return "?";

                return Date;
            }
        }

        public UpComingGame(string awayTeam, string homeTeam, string time, string location, string date)
        {
            HomeTeam = homeTeam;
            AwayTeam = awayTeam;
            Time = time;
            Location = location;
            Date = date;
        }
    }

我创建了一个名为Grouping的单独类，如下所示

public class Grouping<K, T> : ObservableCollection<T>
    {
        public K Key { get; private set; }

        public Grouping(K key, IEnumerable<T> items)
        {
            Key = key;
            foreach (var item in items)
                this.Items.Add(item);
        }
    }

最后在视图模型中

private void LoadData()
        {
            if (_isDataLoaded)
                return;

            _isDataLoaded = true;

            var upcomingGames = _htmlParser.GetUpcomingGames(url);

            var sorted = from fixture in upcomingGames
                         orderby fixture.Date
                         group fixture by fixture.DateSort into fixtureGroup
                         select new Grouping<string, UpComingGame>(fixtureGroup.Key, fixtureGroup);

            UpcomingGamesGrouped = new ObservableCollection<Grouping<string, UpComingGame>>(sorted);

        }

当我只有listview（没有标题）时，绑定应该很好用，因为自从我使用Debug.WriteLine测试以来，似乎UpcomingGamesGrouped集合已正确分配。

但是我无法弄清在部署到模拟器时项目未在ListView中显示的原因。

Answer 1

代码看起来不错。 但是您必须确保两件事：

1. 将页面的BindingContext正确设置为例如您的ViewModel（请参见示例）
2. UpcomingGamesGrouped属性会通知更改（因为您更改了属性本身，而不是集合中包含的项目）

视图模型

public class MyGameOverviewViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Grouping<string, UpComingGame>> _upcomingGamesGrouped;
    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Grouping<string, UpComingGame>> UpcomingGamesGrouped
    {
        get { return _upcomingGamesGrouped; }
        set
        {
            _upcomingGamesGrouped = value;
            OnPropertyChanged(); // comment this line to see what you have done wrong
        }
    }

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public void LoadData()
    {
        var upcomingGames = new[]
        {
            new UpComingGame("Berlin", "Munich", "1000435", "Munich", "today"),
            new UpComingGame("Frankfurt", "Munich", "1000435", "Munich", "today"),
            new UpComingGame("Hamburg", "Munich", "1000435", "Munich", "today"),
            new UpComingGame("Gera", "Munich", "1000435", "Munich", "tomorrow"),
            new UpComingGame("Stauutgart", "Munich", "1000435", "Munich", "tomorrow"),
        };

        var sorted = from fixture in upcomingGames
                     orderby fixture.Date
                     group fixture by fixture.DateSort into fixtureGroup
                     select new Grouping<string, UpComingGame>(fixtureGroup.Key, fixtureGroup);

        UpcomingGamesGrouped = new ObservableCollection<Grouping<string, UpComingGame>>(sorted);
    }
}

页

public partial class MainPage : ContentPage
{
    private MyGameOverviewViewModel _viewModel = new MyGameOverviewViewModel();

    public MainPage()
    {

        BindingContext = _viewModel;
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        _viewModel.LoadData();
    }
}