How to bind a list of item in CollectionViewSource?

Question

I\'m stuck in this problem for days. Never found a solution. So I\'ve a list of items called Country, in this list I\'ve also another list of items called Lea

Answer 1

I went by the output you want. Please check and tell if this is what you want.

public partial class WinExpander : Window
{
    public WinExpander()
    {
        InitializeComponent();

        this.DataContext = new ViewModel();
    }
} 

public class ViewModel
    {
        public List<Country> Countries { get; set; }
        public ViewModel()
        {
            Countries = new List<Country>();
        }
    }

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

        public Country()
        {
            Leagues = new List<League>();
        }
    }

    public class League
    {
        public string Name { get; set; }
        public List<Match> Matches { get; set; }

        public League()
        {
            Matches = new List<Match>();
        }
    }

    public class Match
    {
        public string Name { get; set; }
    }

XAML

<Window.Resources>
    <CollectionViewSource x:Key="GroupedItems" Source="{Binding Countries}"/>
</Window.Resources>
...
<ItemsControl ItemsSource="{Binding Source={StaticResource GroupedItems}}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Expander Header="{Binding Name}">
                        <ItemsControl ItemsSource="{Binding Leagues}" Margin="25 0 0 0">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Expander Header="{Binding Name}">
                                        <ItemsControl ItemsSource="{Binding Matches}" Margin="25 0 0 0">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding Name}"/>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </Expander>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Expander>         
                </DataTemplate>
            </ItemsControl.ItemTemplate>
 </ItemsControl>

You can replace any of the ItemsControl with ListBox too.

Another solution using GroupStyle and ListView according to user requirements.

<CollectionViewSource x:Key="GroupedItems" Source="{Binding Countries}">
     <CollectionViewSource.GroupDescriptions>
         <PropertyGroupDescription PropertyName="Name"/>
     </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
...
<ListView ItemsSource="{Binding Source={StaticResource GroupedItems}}" Name="Playing">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Country" Width="150" DisplayMemberBinding="{Binding Source={x:Static sys:String.Empty}}" />
            <GridViewColumn Header="Leagues">                        
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <ItemsControl ItemsSource="{Binding Leagues}" Margin="25 0 0 0">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid HorizontalAlignment="Stretch" Background="#FFBCDAEC">
                                        <TextBlock FontSize="18" Padding="5" Text="{Binding Name}"/>
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Expander IsExpanded="True">
                                    <Expander.Header>
                                        <TextBlock Text="{Binding Name}" Foreground="Red" FontSize="22" VerticalAlignment="Bottom" />
                                    </Expander.Header>
                                    <ItemsPresenter />
                                </Expander>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </ListView.GroupStyle>
</ListView>