listview - UWP、MVVM 和级联 ListView

Question

我对 UWP 和两个 ListView 感到疯狂。场景很简单:我在一个页面中有两个 ListView (listview 和 listViewField)。

我有一个 ViewModel，例如:

public class FormViewModel : BaseViewModel {
    public ObservableCollection<TableInfo> Tables;
}

TableInfo 的定义如下:

public class TableInfo {
    /// <summary>
    /// Gets or sets the name.
    /// </summary>
    /// <value>The name.</value>
    public string Name { get; set; }

    /// <summary>
    /// Gets or sets the fields.
    /// </summary>
    /// <value>The fields.</value>
    public List<FieldInfo> Fields { get; set; }
}

最后，我想要类似的东西:



listview 显示表中的所有名称(第 1 点)。当用户单击 ListView 中的项目时，listviewField 会显示该项目的字段列表(第 2 点)。如果我想更改或添加新字段，用户可以使用表单(第 3 点)。

<ListView x:Name="listView" ItemsSource="{x:Bind vm.Tables, Mode=OneWay}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="mdl:TableInfo">
            <TextBlock Text="{x:Bind Name}" FontSize="25" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
<ListView x:Name="listViewTable" 
          ItemsSource="{Binding ElementName=listView, Path=SelectedItem.Fields}"
          SelectedIndex="{x:Bind vm.SelectedTableInfoIndex, Mode=TwoWay}">
   <ListView.ItemTemplate>
      <DataTemplate x:DataType="mdl:FieldInfo">
          <TextBlock Text="{x:Bind Name}" FontSize="25" />
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

如果我在表的开头插入一些项目，我可以在第一个 ListView 中看到列表，并且(神奇地)如果我单击一个项目，我可以在第二个 ListView 中看到所有字段。但我尝试从表单中添加一个字段，没有任何工作正常。

您对此有什么建议或一个很好的例子吗？先感谢您。

更新

在@ibebbs 的帮助下，我更改了 ListView ，您可以在下面找到我的BaseViewModel .我尝试以不同的方式添加一些 TableInfo和 FieldInfo跨 View 模型，但第一个 ListView 不显示任何内容。
如果我添加了一些 TableInfo当应用程序在 View 模型初始化后立即启动时， ListView 按我的预期工作。

我添加了一个函数来添加一个新的TableInfo

public void AddTableInfo(TableInfo tbl) {
    Tables.Add(tbl);
    RaisePropertyChanged("Tables");
}

第二次更新

正如@MZetko 建议的那样，我在绑定(bind)中添加了 x:Bind vm.Tables, Mode=OneWay当我添加新项目时， ListView 会更新。

最后一个问题是如何将所选项目与表单连接起来(第 3 点)。

public int SelectedTableInfoIndex
{
    get { return _selectedTableInfoIndex; }
    set {
        _selectedTableInfoIndex = value;
        if (_selectedTableInfoIndex >= 0) {
            _selectedTableInfo = Tables[_selectedTableInfoIndex];
        }
    }
}
private int _selectedTableInfoIndex = -1;

public TableInfo SelectedTableInfo
{
    get {
        return (_selectedTableInfoIndex >= 0) ? Tables[_selectedTableInfoIndex] : null;
    }
    set {
        _selectedTableInfo = value;
        RaisePropertyChanged("SelectedTableInfo");
    }
}
private TableInfo _selectedTableInfo;

然后我应该有来自我的模型 ListView 的表单数据。

<StackPanel x:Name="stackTable" Orientation="Vertical" Padding="10">
    <TextBlock>Table name</TextBlock>
    <TextBox x:Name="textboxTableName" 
             Text="{Binding ElementName=listView, Path=SelectedItem.Name}" />
    <TextBlock>Project namespace</TextBlock>
    <TextBox x:Name="textboxNameSpace" 
             Text="{Binding ElementName=listView, Path=SelectedItem.ProjectNameSpace}" />
</StackPanel>

这段代码显示了表单中的项目，一个用于表格，另一个用于字段。现在我的问题是:如果我想添加一条新记录或删除一条记录，我该怎么做？

我环顾四周，发现了那些链接

https://github.com/johnshew/Minimal-UWP-MVVM-CRUD/tree/master/Simple%20MVVM%20UWP%20with%20CRUD

https://blogs.msdn.microsoft.com/johnshews_blog/2015/09/09/a-minimal-mvvm-uwp-app/

但我不清楚如何在我的情况下使用它。

预先感谢您的帮助!

Answer 1

您的第二个 ListView 绑定(bind)到类型为 List<FieldInfo> 的 TableInfo 的 Fields 属性。 . List 不支持数据绑定(bind)依赖于更新 UI 的更改通知。

更改List<FieldInfo>至ObservableCollection<FieldInfo>你应该会看到更好的结果。

顺便说一句，我建议只在第二个 ListView 中绑定(bind) ItemsSource，而不是绑定(bind) DataContext 和 ItemsSource(这需要两次刷新 UI)。它应该很简单:

<ListView x:Name="listView" ItemsSource="{x:Bind vm.Tables}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="mdl:TableInfo">
            <TextBlock Text="{x:Bind Name}" FontSize="25" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
<ListView x:Name="listViewTable" 
          ItemsSource="{Binding ElementName=listView, Path=SelectedItem.Fields}">
   <ListView.ItemTemplate>
      <DataTemplate x:DataType="mdl:FieldInfo">
          <TextBlock Text="{x:Bind Name}" FontSize="25" />
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

希望能帮助到你。