Cannot bind list of items in GridView column

Question

I'm building an application that show to user the live result of a matches series. I setup the structure of data as follows: Countries->Leagues->Matches In particular in the ViewModel I've created an observable collection of countries as follows:

private ObservableCollection _countries = new ObservableCollection();

public ObservableCollection Country
{
    get { return _countries; }
}

and the model:

public class Country
{
    public string Name { get; set; }
    public List League { get; set; }
}

public class League
{
    public string Name { get; set; }
    public List Event { get; set; }
}

the class Event contains the properties of each event, in particular the name of the event, the date and so on..

I valorize this data as follows:

Country country = new Country();
country.Name = "Italy";

League league = new League();
league.Name = "Serie A";
League league2 = new League();
league2.Name = "Serie B";

Event @event = new Event();
@event.MatchHome = "Inter";

Event event2 = new Event();
@event.MatchHome = "Milan";

league.Event = new List(); 
league2.Event = new List();

league.Event.Add(@event);
league2.Event.Add(event2);

country.League = new List();

country.League.Add(league);
country.League.Add(league2);

lsVm.Country.Add(country); //lsVm contains the ViewModel

How you can see I create an object called country (Italy) that will contains in this case two leagues (Serie A) and (Serie B). Each league contains one match actually in playing Serie A -> Inter and Serie B -> Milan

I add the league two the country, and finally the country to the observable collection in the viewmodel. Until here no problem. The problem's come in the xaml.

So I've organized all of this stuff inside of GroupViews, for doing this I'm using a CollectionViewSource, in particular:

the code above is located in my Window.Resources, and tell to CollectionViewSource to organize for country name and leagues name the respective leagues associated. I've two ListView as this:

The GroupStyle contains the leagues that will contains each match, now the problem is that I can't see any league and any match 'cause this item are inside of a list. So for display them I should write in the xaml this code:

this fix the bug of the league name displayed into GroupStyle and in the GridView:

but this of course will display only the specific item.. not the list of items. I need help to fix this situation, I cannot figure out. Thanks.

Eli Arbel · Accepted Answer

If you want to use the ListView's grouping abilities, you have to provide it a flat list of the items you want to group (in your case, the leagues), not the header items. The CollectionView does the grouping for you by specifying GroupDescriptions.

For example, assuming the League class has a Country property:

class ViewModel
{
    public ObservableCollection Country { get; }

    public IEnumerable AllLeagues => Country.SelectMany(c => c.Leagues);
}

public class League
{
    public string Name { get; set; }
    public List Event { get; set; }
    // add Country here
    public Country Country { get; set; }
}

class

Then when you bind the columns, you bind directly to League properties, e.g.:

And in the group style you can bind to Country properties, as you've done.

Alternative solution

If you want to display any hierarchical data in WPF you can either use a control that was built for it (such as the Xceed data grid) or hack it together with the built-in WPF data grid's row details.

Here's a sample XAML for this (note it uses your original data structures without the modifications I suggested above). These are essentially 3 data grids nested within each other. Each grid has its own set of columns, so you can define anything you want for each level (Country, League, Event).

You'll also need the code for the converter I used:

public class VisibilityToBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        => value as Visibility? == Visibility.Visible;

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        => value as bool? == true ? Visibility.Visible : Visibility.Collapsed;
}

Cannot bind list of items in GridView column

Answers (1)

Alternative solution

Related Questions