WPF/MVVM：如何从 ItemsControl 将模型绑定到视图/视图模型

Question

我有一个 ItemsControl 绑定到 Tasks 列表。我想将该模型Task 赋予它的视图TaskView 和视图模型TaskViewModel。

我曾尝试像这样在视图属性上绑定值：

<views:TaskView Model="{Binding}" />

然后绑定视图和视图模型之间的值：

public partial class TaskView
{
    public TaskView()
    {
        InitializeComponent();

        // Attempt to bind view.IdProperty with viewmodel.Id
        var binding = new Binding("Id");
        SetBinding(IdProperty, binding);
    }

    public Task Model
    {
        get { return GetValue(ModelProperty) as Task; }
        set { SetValue(ModelProperty, value); }
    }
    public static readonly DependencyProperty ModelProperty =
      DependencyProperty.Register("Model", typeof(Task), typeof(TaskView));
}

但是它不起作用。由于我是 C#/.NET 的新手，我不知道我的方向是否正确，因为 IMO 的常见问题似乎很复杂。

请注意，它会正确呈现任务列表，因此 ItemsControl 可以按预期工作。

问题：

1. 如何从数据源构建视图并将模型传递给该视图？ （上面解释的问题）
2. 如何从该模型读取值到视图？ （参见 TaskView.xaml）
3. 有没有更惯用的方法？

---

以下是关键部分：

型号

namespace Models
{
  public class Task
  {
    public string Id { get; set; }

    public Status Status { get; set; }

    // And other properties ...
  }    
}

列表（父级）

视图模型

public class ListViewModel : ActionViewModelBase
{
    public ObservableCollection<Task> Tasks { get; set; }
}

查看

<ItemsControl x:Name="Tasks"
                Grid.Row="1"
                Grid.ColumnSpan="2"
                ItemsSource="{Binding Path=Tasks, Mode=OneWay}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="models:Task">
            <!-- TODO : Bind model to task view/viewmodel -->
            <views:TaskView Model="{}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

任务（子）

TaskView.xaml.cs

public partial class TaskView
{
    public TaskView()
    {
        InitializeComponent();
    }

    public Task Model
    {
        get { return GetValue(ModelProperty) as Task; }
        set { SetValue(ModelProperty, value); }
    }
    public static readonly DependencyProperty ModelProperty =
      DependencyProperty.Register("Model", typeof(Task), typeof(TaskView));
}  

TaskView.xaml

<UserControl>
  <UserControl.DataContext>
    <viewModels.TaskViewModel />
  </UserControl.DataContext>

  <Border>
      <!-- TODO : Read model attributes -->
      <Grid Background="{Binding Path=Model.Status, Converter={StaticResource StatusBackgroundColourConverter}}">
          <!-- ... -->
      </Grid>
  </Border>
</UserControl>

任务视图模型

class TaskViewModel : ActionViewModelBase
{
    public Task Model { get; set; }
    // ...
}    

Answer 1

您的模型和视图模型部分已正确定义，但是您可能想查看INotifyPropertyChanged 接口（以启用与模型的双向数据绑定）。

视图模型通过DataContext 属性自动传递给您的用户控件（请参阅：Property Value Inheritance）。

<DataTemplate DataType="models:Task">
    <!-- DataContext of TaskView is a single Task -->
    <views:TaskView />
</DataTemplate>

您不能在UserControl 中明确指定DataContext，因为这会覆盖继承的DataContext（并将其设置为TaskViewModel 的新实例）。

<UserControl x:Class="TaskView">  
  <!-- DataContext of UserControl is a single Task (inherited) -->
  <Border>
      <Grid Background="{Binding Status, Converter={StaticResource StatusBackgroundColourConverter}}">
          <!-- ... -->
      </Grid>
  </Border>
</UserControl>