使用 ViewModel-First MVVM Stylet 框架时将 Views/ViewModels 添加到 ObservableCollection答案

【问题标题】：Adding Views/ViewModels to an ObservableCollection when using ViewModel-First MVVM Stylet framework使用 ViewModel-First MVVM Stylet 框架时将 Views/ViewModels 添加到 ObservableCollection
【发布时间】：2021-07-20 23:19:36
【问题描述】：

当使用 ViewModel first MVVM 模式时，如何将 ViewModel 添加到 ObservableCollection 以便它们可以绑定到另一个 View 并显示为视图？

我正在使用 AvalonDock，我正在努力将 AvalonDock 中的 LayoutDocument 窗格绑定到我的视图。

我使用 Stylet 作为我的 MVVM 框架，但我也将它标记为 Caliburn-Micro，因为我认为我的问题与 MVVM 的任何 ViewModel-First 实现有关。

我的测试ObservableCollection 填充如下：

        Documents = new ObservableCollection<LayoutDocument>();

        LayoutDocument layout1 = new LayoutDocument();
        layout1.Title = "New Document";
        UserControl1 control = new UserControl1();
        layout1.Content = control;

        LayoutDocument layout2 = new LayoutDocument();
        layout2.Title = "New Document 2";
        HomeViewModel control2 = HomeViewModel;
        layout2.Content = control2;

        LayoutDocument layout3 = new LayoutDocument();
        layout3.Title = "New Document 3";
        HomeView control3 = HomeView;
        layout3.Content = control3;


        Documents.Add(layout1);
        Documents.Add(layout2);
        Documents.Add(layout3);

UserControl1 在后面的代码中通过InitializeComponent() 初始化，并且运行良好。见下图（第一个标签）。

HomeViewModel 这就是我希望将它们与 Stylet 要求内联的方式已通过构造函数引入，AvalonDock 似乎并未将其识别为 ViewModel。它只是显示 ViewModel 的 URL。

HomeView（这是一个视图）已经删除了后面的代码，我原以为它会被 Stylet 初始化。该对象已通过构造函数注入。在 AvalonDock 中，它表现为一个未初始化的视图，所以什么都不显示。

这是构造函数：

public DockingViewModel(HomeViewModel homeViewModel, HomeView homeView)
    {
        HomeViewModel = homeViewModel;
        HomeView = homeView;
        LoadInitialTabs();
    }

我认为问题不在于 AvalonDock，但这是视图的绑定方式。

<DockingManager.LayoutItemTemplate>
    <DataTemplate>
        <ContentControl Content="{Binding Content , FallbackValue=#ERROR Content.title#}"></ContentControl>
    </DataTemplate>
</DockingManager.LayoutItemTemplate>

请注意下图中LayoutDocuments 以不同方式创建时的不同结果。

我怎样才能在 ViewModel 优先的方法中使用它，即使用 Stylet？

【问题讨论】：

您应该避免在视图模型中引用视图。如果可能的话。我认为是这样。如果某些东西必须在特定视图中，那么通常会从该视图的数据上下文中的视图模型模板化。
这是我的计划，我的目标是能够将各种 ViewModel 添加到 ObservableCollection。我只添加了两个视图（一个有代码隐藏，一个没有）来解决我的问题。除非你说将 ViewModel 添加到我的 ObservableCollection 仍然是不好的做法（假设我可以让它工作）？
通常有一个可观察的视图模型集合。

标签： wpf mvvm caliburn.micro avalondock stylet

【解决方案1】：

我找到了解决方案。当我使用 Stylet 时，我需要在我的视图中进行以下更改。

首先，添加 Stylet 的引用。

xmlns:s="https://github.com/canton7/Stylet"

第二：更改 DataContent 绑定：

<ContentControl Content="{Binding Content , FallbackValue=#ERROR Content.title#}"></ContentControl>

收件人：

<ContentControl s:View.Model="{Binding Content , FallbackValue=#ERROR Content.title#}"></ContentControl>

使用 Stylet，s:View.Model 位会自动从 ViewModel 中找到 View 并对其进行初始化。现在，我的ObservableCollection 中除了ViewModels 什么都不能放，它工作正常/

【讨论】：