DataGrid - 使用 MVVM 绑定到列表列表

Question

我有一个可以包含项目列表的“Person”类。

Person.cs

public class Person : ObservableObject
{
  private string _id;
  public string Id
  {
    get { return _id; }
    set
    {
      _id = value;
      RaisePropertyChangedEvent("Id");
    }
  }

  ...

  Private IList<Item> _items;
  public IList<Item> Items
  {
    get { return _items; }
    set
    {
      _items = value;
      RaisePropertyChangedEvent("Items");
    }
  }
}

Item.cs

public class Item : ObservableObject
{
  private string _id;
  public string Id
  {
    get { return _id; }
    set
    {
      _id = value;
      RaisePropertyChangedEvent("Id");
    }
  } 

  ...
}

我正在尝试在选项卡式数据网格中显示它。第一个选项卡是“Person”，第二个选项卡是“Items”。

.XAML

    <Window.DataContext>
      <viewModels:PersonViewModel />
    </Window.DataContext>

    <TabControl>
        <TabItem Header="Person">
            <DataGrid ItemsSource="{Binding Person}" Width="1700" Height="800" AutoGenerateColumns="False" CanUserAddRows="false"
                      VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" RowHeight="20">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Id" Binding="{Binding Id}" IsReadOnly="True"/>
                    ...
                </DataGrid.Columns>
            </DataGrid>
         </TabItem>

        <TabItem Header="Items">
            <DataGrid ItemsSource="{Binding Person.Items}" Width="1700" Height="800" AutoGenerateColumns="False" CanUserAddRows="false"
                      VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" RowHeight="20">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Person Id" Binding="{Binding Person.Id}" IsReadOnly="True"/>
                    <DataGridTextColumn Header="Id" Binding="{Binding Id}" IsReadOnly="True"/>
                    ...
                </DataGrid.Columns>
            </DataGrid>
        </TabItem>
    </TabControl>

查看 Model.cs

    private ObservableCollection<Person> _persons = new ObservableCollection<Person>();

public ObservableCollection<Person> Person
{
  get { return _persons; }
  set
  {
    _persons = value;
    RaisePropertyChangedEvent("Person");
  }
}

这是我所知道的。我假设我需要以某种方式遍历 Person 对象，然后执行 Person.Items 但不确定。

我能够完美地显示我的“Person”对象，这只是我遇到问题的“Items”选项卡。我收到错误“无法解析 ObservableCollection 类型的数据上下文中的属性“项目””

感谢您的帮助

Answer 1

创建一个视图模型类来跟踪当前选定的Person 以及所有要显示在第一个DataGrid 中的人：

public class ViewModel : ObservableObject
{
    public ViewModel()
    {
        Persons = new ObservableCollection<Person>();
        //populate your collection here...
        Persons.Add(new Person() { });
        //...
    }

    private Person _selectedPerson;
    public Person SelectedPerson
    {
        get { return _selectedPerson; }
        set
        {
            _selectedPerson = value;
            RaisePropertyChangedEvent("SelectedPerson");
        }
    }

    public ObservableCollection<Person> Persons { get; private set; }
}

将TabControl 或其父窗口的DataContext 设置为此视图模型类的实例：

tc.DataContext = new ViewModel();

并绑定到视图模型属性：

<TabControl x:Name="tc">
    <TabItem Header="Person">
        <DataGrid ItemsSource="{Binding Persons}"
                          SelectedItem="{Binding SelectedPerson}"
                          Width="1700" Height="800" AutoGenerateColumns="False" CanUserAddRows="false"
                      VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" RowHeight="20">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Id" Binding="{Binding Id}" IsReadOnly="True"/>
            </DataGrid.Columns>
        </DataGrid>
    </TabItem>

    <TabItem Header="Items">
        <DataGrid ItemsSource="{Binding SelectedPerson.Items}" Width="1700" Height="800" AutoGenerateColumns="False" CanUserAddRows="false"
                      VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" RowHeight="20">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Person Id" Binding="{Binding Person.Id}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Id" Binding="{Binding Id}" IsReadOnly="True"/>
            </DataGrid.Columns>
        </DataGrid>
    </TabItem>
</TabControl>