WPF中如何将UserControl绑定到视图实现可配置问答输入

要实现你说的这种动态绑定不同UserControl的需求，WPF里最直接的方案就是用ContentControl——它的Content属性可以直接绑定ViewModel里的UserControl实例，完全匹配你想要的<someTag UserControl="{Binding Control}" />思路，只不过这个someTag就是ContentControl。

具体操作步骤如下：

1. 视图层编写XAML #

在你的页面/窗口XAML中，直接添加ContentControl并绑定ViewModel的Control属性：

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

ContentControl会自动渲染你传入的UserControl实例，无需额外处理渲染逻辑。

2. ViewModel中实现Control属性 #

首先确保ViewModel实现INotifyPropertyChanged接口（否则属性变化时视图无法自动更新），然后添加UIElement类型的Control属性：

public class QuestionViewModel : INotifyPropertyChanged
{
    private UIElement _control;
    public UIElement Control
    {
        get => _control;
        set
        {
            _control = value;
            OnPropertyChanged(nameof(Control));
        }
    }

    // INotifyPropertyChanged标准实现
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
    }

    // 根据问题类型生成对应UserControl
    public void SetupControl(QuestionModel question)
    {
        switch (question.Type)
        {
            case QuestionType.MultipleChoice:
                var choiceCtrl = new MultipleChoiceUserControl();
                // 传入选择题选项参数
                choiceCtrl.Options = question.Options;
                // 动态绑定选中值到问题模型，确保输入能回存
                BindingOperations.SetBinding(choiceCtrl, MultipleChoiceUserControl.SelectedOptionProperty,
                    new Binding(nameof(question.SelectedAnswer)) { Source = question, Mode = TwoWay });
                Control = choiceCtrl;
                break;
            case QuestionType.ValueInput:
                var inputCtrl = new ValueInputUserControl();
                // 动态绑定输入值到问题模型
                BindingOperations.SetBinding(inputCtrl, ValueInputUserControl.InputValueProperty,
                    new Binding(nameof(question.InputAnswer)) { Source = question, Mode = TwoWay });
                Control = inputCtrl;
                break;
            // 其他问题类型照此逻辑扩展
        }
    }
}

注意：必须通过BindingOperations动态绑定UserControl的属性到问题模型，否则用户输入的值无法回写到数据中。

3. 更贴合MVVM的优化写法（可选） #

如果想彻底分离UI与业务逻辑，避免在ViewModel中直接创建UI控件，可以使用DataTemplateSelector方案：

• 为每种问题类型创建对应的子ViewModel（如MultipleChoiceQuestionVM、ValueInputQuestionVM）
• 在XAML中为这些子ViewModel定义DataTemplate，自动关联对应的UserControl
• ViewModel只需返回对应的子ViewModel，ContentControl会自动匹配模板渲染

示例XAML资源定义：

<Window.Resources>
    <DataTemplate DataType="{x:Type local:MultipleChoiceQuestionVM}">
        <local:MultipleChoiceUserControl Options="{Binding Options}" SelectedOption="{Binding SelectedAnswer}" />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:ValueInputQuestionVM}">
        <local:ValueInputUserControl InputValue="{Binding InputAnswer}" />
    </DataTemplate>
</Window.Resources>

<!-- 视图中直接绑定子ViewModel -->
<ContentControl Content="{Binding CurrentQuestionSubVM}" />

这种方式让代码结构更清晰，后期维护和扩展更方便。

内容的提问来源于stack exchange，提问作者Jannik