ListView items are not displaying after trying to add Group Headers to listview

I had a listview with the itemsource binded to a ObservableCollection property in the view model.
I then wanted to group this items by their Date value but now the listview is not being visibly populated.
Below is my listview in the Xaml page.

    <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>

The UpComingGame model looks like this:

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;
        }
    }

I created a separate class called Grouping which looks like the following

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

And finally in the view model...

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);

        }

The bindings are all working fine and it seems like the UpcomingGamesGrouped collection is being assigned to correctly.
But I can't figure out the reason why the items are not being displayed in the listview.

Answers

  • alexamuealexamue Member

    Hey,

    could you solve this problem? Currently stuck with the same one. Data becomes visible in the list when is switch the view but not right after refresh.

    Any ideas?

Sign In or Register to comment.