WPF/MVVM 在选项卡控件中多次加载相同的 UserControl

Question

我对 WPF/MVVM 还是很陌生，还有很多东西要学，但我现在遇到了一个问题，我似乎无法找到好的答案。很可能是因为我问错了问题。

我有什么： 我有一个带有一些加载用户控件的按钮的主窗体。其中一个用户控件包含一个 TabControl。

这个 TabControl 有一个手动填充的第一个选项卡，我已经从下面的 sn-p 中排除了它，但所有其他选项卡都应该填充另一个用户控件，它将根据其视图模型构造函数加载数据库数据。

XAML：

             <TabItem Header="Two" 
                     Name="Two" 
                     HorizontalAlignment="Stretch" 
                     VerticalAlignment="Stretch"
                <ContentControl cal:View.Model="{Binding LoadedControl}"></ContentControl>
            </TabItem>

            <TabItem Header="Three" 
                     HorizontalAlignment="Stretch" 
                     VerticalAlignment="Stretch"
               <ContentControl cal:View.Model="{Binding LoadedControl}"></ContentControl>
            </TabItem>
            <TabItem Header="Four" 
                     HorizontalAlignment="Stretch" 
                     VerticalAlignment="Stretch"
               <ContentControl cal:View.Model="{Binding LoadedControl}"></ContentControl>
            </TabItem>

C#

        private DocumentTemplateControlViewModel _loadedControl;

        public DocumentTemplateControlViewModel LoadedControl
        {
            get { return _loadedControl; }
            set
            {
                if (value == _loadedControl)
                    return;

                _loadedControl = value;
                NotifyOfPropertyChange(() => LoadedControl);
            }
        }


        public int SelectedTabIndex
        {
            get
            {
                return _selectedTabIndex;
            }
            set
            {

                Task.Run(() => LoadData());
                _selectedTabIndex = value;
                LoadedControl = new DocumentTemplateControlViewModel(Templates, _selectedTabIndex);
             }

现在，这可以正常工作，因为我希望它适用于选项卡二，但如果我添加同一行

<ContentControl cal:View.Model="{Binding LoadedControl}">

到选项卡三、四等。（正如我在上面的 XAML sn-p 中所做的那样）它只会在我添加绑定的最后一个选项卡上工作，而选项卡二、三将是空白。

我也尝试使用 Caliburn Micro ActivateItem 实现相同的目的，但这意味着我也只能在 TabControl XAML 中声明一个 ActiveItem。

TLDR：在 tabitem 中动态显示新用户控件视图模型的最佳方式是什么？

非常感谢

Answer 1

从Conductor<IScreen>.Collection.OneActive 派生您的视图模型，并将要绑定到选项卡的DocumentTemplateControlViewModel 对象添加到Items 属性：

public class ShellViewModel : Conductor<IScreen>.Collection.OneActive
{
    public ShellViewModel()
    {
        Items.Add(new DocumentTemplateControlViewModel { DisplayName = "1" });
        Items.Add(new DocumentTemplateControlViewModel { DisplayName = "2" });
        Items.Add(new DocumentTemplateControlViewModel { DisplayName = "3" });
    }
}

DocumentTemplateControlViewModel 必须实现 IScreen，最简单的方法是从 Screen 派生：

public class DocumentTemplateControlViewModel : Screen
{
}

然后，您可以在 XAML 中简单地添加 TabControl 和 ContentTemplate，例如：

<TabControl Name="Items">
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

您可以将 TextBlock 替换为 UserControl 或任何其他 UI 元素。