将集合绑定到列表控件

Question

您好，我正在学习 MVVM 和 Win8 应用程序开发，但我无法通过 XAML 将 ObservableCollection（位于 NoteViewModel.cs）绑定到我的 MainPage 列表框（或列表视图）。

public ObservableCollection<Note> NotesList;

Model 是一个简单的 Note.cs 类，其中包含 NoteText、Priority 和 RemindDate。

我现在做的是在 MainPage.xaml.cs 的代码隐藏文件中设置 DataContext 到 ObservableCollection。

public MainPage()
{
    this.InitializeComponent();
    NoteViewModel nvm = new NoteViewModel();
    noteListView.DataContext = nvm.NotesList;
}

在 NoteViewModel 构造函数中，我只需创建 2 个新的便笺，然后将它们添加到集合中。

我想做的是将 XAML 中的 DataContext 设置为 NoteViewModel，将 ItemsSource 设置为 NotesList。我想稍后为单个便笺实现 DetailsView。

有很多关于将集合绑定到列表框的教程， 但我还没有找到一个显示 MVVM 正确方法的方法。

有什么帮助吗？

Answer 1

您需要将您的视图（MainPage）绑定到您的 ViewModel，而不是将列表的 DataContext 设置为集合

然后在视图的 xaml 中，将列表的 ItemSource 绑定到 ViewModels NotesList 属性

例如

视图模型：

public NoteViewModel : INotifyPropertyChanged
{
  //Collection must be a property
  public ObservableCollection<Note> NotesList {get; private set;}

  public NoteViewModel()
  {
     //Initialize your collection in the constructor
     NotesList = new ObservableCollection<Note>()
  }

  //.
  //.
  //.

}

如果你愿意，你仍然可以在后面的代码中设置 DataContext

public MainPage()
{
  this.InitializeComponent();
  NoteViewModel nvm = new NoteViewModel();
  this.DataContext = nvm;
}

或者，您可以通过 View 的 xaml 设置 DataContext。假设您的 ViewModel 在命名空间 MyProject 中：

添加对命名空间的引用

<UserControl x:class=MyProject.MainPage
  xmlns:local="clr-namespace:MyProject"
  .
  .
>

将 ViewModel 添加为资源

<UserControl.Resources>
  <local:NoteViewModel x:Key="NoteViewModel"/>
</UserControl.Resources>

将主容器的 DataContext 绑定到此资源

<Grid x:Name="LayoutRoot" DataContext="{StaticResource NoteViewModel}">

设置好DataContext后，需要通过绑定为notesListView控件设置ItemSource

ItemSource={Binding NotesList}

Answer 2

对于一个简单的测试用例场景，试试这个：

创建您的 ViewModel：

 // Create a property as an ObservableCollection<YourType> LstItemName in your ViewModel
 // On your ViewModel constructor, create a new LstItemName instance.
 // Create a property as "YourType" ItemName to bind to the selected Item of your List

创建您的视图：

 // Create a property of your ViewModel (codeBehind)
 // On your Views Constructor, create a new ViewModel instance. (codeBehind)
 // On loaded event of your View set the DataContext = ViewModel (codeBehind)

在您列表中的 XAML 上：

<List     
ItemSource={Binding LstItemName}
SelectedItem={Binding ItemName}
/>

记得使用 ViewModel 添加列表项。

Answer 3

对于漂亮的轻松 mvvm 尝试学习一些强制执行它的库，我使用 caliburn micro。它易于设置并提供许多非常有用的组件。