c# - 使用 WPF/MVVM 在运行时动态更改 UserControl 内容

Question

我尝试创建的屏幕是一个多部分结果查看器。当你的批处理作业完成后，你将能够双击它并打开这个屏幕，其中将包含关于刚刚运行的批处理作业的基本数据的顶部部分(屏幕的前 30%，全宽)，然后是下面的部分70% 将由一个左对齐的列表框(占宽度的 20%)组成，其中包含一系列子结果和一个占据剩余 80% 宽度的详细信息 Pane 。

我希望它的行为方式是当您在左侧列表框中选择子结果时，右侧 Pane 将填充子结果的详细信息。因为它会很复杂并且需要可扩展，所以我想将每个子结果详细信息显示面板实现为一个 UserControl。

父 ViewModel 包含一个 IDictionary<Enum.ResultType, IResultPanel> - 列表框将从该字典的键中填充，当您选择一个选项时，它将从字典中获取 IResultPanel 对象，这将是用户控件，下面是一个示例片段

public partial class SimpleCalcInfoResult : UserControl, IResultPanel
    {
        private SimpleCalcInfoResultViewModel _viewModel;

        public SimpleCalcInfoResult(SimpleCalcInfoResultViewModel viewModel)
        {
            InitializeComponent();
            _viewModel = viewModel;
        }
    }

IResultPanel 接口(interface)是一个空白的空接口(interface)，仅用于方便能够使用通用类型的上述字典，因为我觉得拥有一个 UserControls 字典太宽泛了。

我遇到的问题是我无法弄清楚在父控件中使用什么 XAML 来拥有可更改的 UserControl 面板。显然你可以拥有

<local:MyControl> ... </local:MyControl>

作为一个硬编码的用户控件，但我如何才能拥有一段 XAML 来让我更改显示的用户控件，具体取决于您选择的 ListBox 项目？

Answer 1

这很容易用 WPF 实现。然而，当使用 MVVM 时，我们“操纵”数据而不是 UI 控件。考虑到这一点，首先在 Application.Resources 部分为每个自定义 Panel 控件声明一个 DataTemplate:

<DataTemplate DataType="{x:Type ViewModels:SimpleCalcInfoResultViewModel}">
    <Views:SimpleCalcInfoResult />
</DataTemplate>
...
<DataTemplate DataType="{x:Type ViewModels:MainViewModel}">
    <Views:MainView />
</DataTemplate>

现在您所要做的就是使用 ContentControl 在右下角显示相关的 View 模型:

<ContentControl Content="{Binding ViewModel}" />

最后，将名为 ViewModel 的 IResultPanel 类型的属性添加到您的父 View 模型:

private IResultPanel viewModel = new FirstViewModel();

public IResultPanel ViewModel
{
    get { return viewModel; }
    set { if (viewModel != value) { viewModel = value; NotifyPropertyChanged("ViewModel"); } }
}

现在，要在您的应用程序中显示不同的 Panel，您需要做的就是将此属性设置为不同的值:

ViewModel = new SimpleCalcInfoResultViewModel();