ListView bind to List inside List

Question

I'm building a School App that can display your grades. I have the following DataStructure:

public class Rootobject
{
    public List<Subject> subjects{ get; set; }
}

public class Subject
{
    public String name { get; set; }
    public int id { get; set; }
    public String teacher { get; set; }
    public GradeSet wirtten { get; set; }
    public GradeSet spoken { get; set; }
    public float average { get; set; }
}

public class GradeSet
{
    public float counts { get; set; }
    public List<Grade> grades { get; set; }
    public float average { get; set; }
}

public class Grade
{
    public string name { get; set; }
    public string grade { get; set; }
}

I have an ObservableCollection from the type of "Subject"

subjects = new ObservableCollection<Subject>();

I have 3 ListViews. One shows all the Subjects (name & teacher). That works already. How I bound it:

<ListView Name="SubjectsListView" IsItemClickEnabled="True" ItemsSource="{x:Bind subjects}" ItemClick="FacherListView_ItemClick">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="data:Subject">
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{x:Bind name}" FontSize="20" Margin="4,0,0,0" />
                <TextBlock Text="{x:Bind teacher}" Grid.Row="1" Margin="4,4,0,0" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

In the other 2 ListViews, in the first, I want to display the written grades (name & the grade itself), in the second, I want to display the spoken grades (name & the grade itself). The written and spoken grades ListView look the same, but how do I bind the grades and names to them? This is the ListView:

<ListView Name="gradeView" Grid.Column="0" HorizontalContentAlignment="Stretch" Grid.Row="2" SelectionMode="None">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Vertical">
                    <TextBlock Name="GradeName" Text="The name of the grade"  FontSize="20" FontWeight="Bold" />
                    <TextBlock Name="GradeName" Text="the grade (B+)" FontSize="20" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 1

Since there is a written and spoken grade per subject you could bind the ItemsSource property of the "gradeView" to the SelectedItem property of the "SubjectsListView":

<ListView Name="gradeView" Grid.Column="0" HorizontalContentAlignment="Stretch" Grid.Row="2" SelectionMode="None"
                  ItemsSource="{Binding SelectedItem.wirtten.grades, ElementName=SubjectsListView}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="data:Grade">
            <Grid Margin="4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Vertical">
                    <TextBlock Name="GradeName" Text="{x:Bind name}"  FontSize="20" FontWeight="Bold" />
                    <TextBlock Name="GradeName" Text="{x:Bind grade}" FontSize="20" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

It is almost the same for the third ListView . Just change the path of the ItemsSource binding:

<ListView Name="gradeView2" Grid.Column="0" HorizontalContentAlignment="Stretch" Grid.Row="2" SelectionMode="None"
                  ItemsSource="{Binding SelectedItem.spoken.grades, ElementName=SubjectsListView}">

The second and third ListView s should then be populated as you select a corresponding subject in the first ListView .

Answer 2

This is untested, but you might try adding a nested ListView to display the grades, like this:

<ListView Name="SubjectsListView"
          IsItemClickEnabled="True"
          ItemsSource="{x:Bind subjects}"
          ItemClick="FacherListView_ItemClick">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="data:Subject">
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{x:Bind name}"
                           FontSize="20"
                           Margin="4,0,0,0" />


                <ListView IsItemClickEnabled="True"
                          ItemsSource="{x:Bind wirtten.grades}"
                          Grid.Row="1"
                          Margin="4,4,0,0">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="data:Grade">
                            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{x:Bind name}"
                                           FontSize="20"
                                           Margin="4,0,0,0" />
                                <TextBlock Text="{x:Bind grade}"
                                           Grid.Row="1"
                                           Margin="4,4,0,0" />
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>



            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>