ListView 绑定到 List 内的 List答案

【问题标题】：ListView bind to List inside ListListView 绑定到 List 内的 List
【发布时间】：2017-02-12 19:01:08
【问题描述】：

我正在构建一个可以显示您成绩的学校应用。我有以下数据结构：

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

我有一个来自“主题”类型的 ObservableCollection

subjects = new ObservableCollection<Subject>();

我有 3 个列表视图。一个显示所有科目（姓名和教师）。这已经奏效了。我如何绑定它：

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

在其他 2 个 ListViews 中，第一个，我想显示书面成绩（姓名和成绩本身），第二个，我想显示口语成绩（姓名和成绩本身）。 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>

【问题讨论】：

标签： c# windows xaml data-binding uwp

【解决方案1】：

由于每个科目都有书面和口语成绩，您可以将“gradeView”的ItemsSource 属性绑定到“SubjectsListView”的SelectedItem 属性：

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

第三个ListView 几乎相同。只需更改ItemsSource 绑定的路径即可：

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

当您在第一个 ListView 中选择相应的主题时，应填充第二个和第三个 ListViews。

【讨论】：

【解决方案2】：

这是未经测试的，但您可以尝试添加一个嵌套的 ListView 来显示成绩，如下所示：

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

【讨论】：