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

时间:2017-06-01 10:06:38

标签: wpf mvvm binding datagrid

我有一个' 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");
    }
  } 

  ...
}

我试图在选项卡式数据网格中显示它。第一个标签是#34; Person&#34;第二个标签是&#34; Items&#34;。

.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但不确定。

我能够显示我的&#34; Person&#34;对象非常好,它只是&#34; Items&#34;选项卡我遇到了问题。我收到错误&#34;无法解析属性&#34; Items&#34;在类型为ObservableCollection&#34;

的datacontext中

感谢您的帮助

1 个答案:

答案 0 :(得分: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; }
}

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

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>