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

Question

当使用 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（这是一个View）后面的代码已经被删除了，我还以为它会被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？

Answer 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 什么都不能装，而且它工作正常/

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

Adding Views/ViewModels to an ObservableCollection when using ViewModel-First MVVM Stylet framework

wpf

mvvm

avalondock

caliburn.micro

stylet