如何根据视图模型中的用户选择绑定不同的用户控件答案

【问题标题】：how can i bind different user controlls depending on a user selection in the view model如何根据视图模型中的用户选择绑定不同的用户控件
【发布时间】：2019-08-02 13:06:23
【问题描述】：

嘿，我正在使用 wpf 和 mvvm。我有一个普通的 wpf 窗口，我在其中将某个视图模型分配给 DataContext。窗口中有一个Combobox。在Combobox 的设置器中，我想更改Window 某个区域的内容。所以Combobox中有5个选项，我创建了5个不同的UserControl实例，它们对应于这些选项。如何通过绑定更改UserControl？因为直到现在我通过<local:MYUSERCONTROLL datacontext= UsercontrollVM> 包含了一个UserControl 所以在我的一般视图模型中，我可以通过为 UsercontrollVM 分配一个新值来更改 UserControl-ViewModel。但是，如果我不仅要更改视图模型，还要更改视图本身 - UserControl - 我该怎么做？就像<locl:MYUSERCONTROLL> 一样，我不知道如何在那里连接绑定，因为它已经是硬编码的......

有人可以帮助我吗？

如果没有人知道我将选择的解决方案：我将在 XAML 中放入所有 5 个不同的 UserControl 元素，然后放入 Visibility={Binding Option1}，然后仅显示在 Combobox 中选择的选项，但是那样做好像很丑！

【问题讨论】：

好吧，您可以使用触发器。但可能有比用户控件更好的东西：类型定位数据模板。针对特定 VIewModel 类的数据模板，根据您公开的类别，将选择不同的模板。
将组合框绑定到视图模型集合，并使用数据模板将组合框视图模型中的选定内容显示为视图。
当然，这也可能是注册卡的情况，而不是组合框。
你的 Shift 键坏了吗？
你应该看看模板。您通常使用DataTemplate 来描述基于数据类型的Control 的视觉外观。然后，您可以在视图模型中简单地切换数据源的数据类型，或者让用户通过选择不同的类型来完成。如果数据类型相同，您可以定义多个DataTemplate，并使用DataTemplateSelector 来切入和切出相应的DataTemplate。

标签： c# wpf mvvm binding

【解决方案1】：

我为一位同事创建了一个演示项目，该项目做了类似的事情，应该能让你走上正轨。我有两种不同的方法。

1：简单的解决方案。视图对视图进行更改。

下面我有一个Grid，里面有一个控件。

        <Grid x:Name="grid1">
            <local:UserControl1 x:Name="usercontrol1Content"/>
        </Grid>

在后面的代码中，我有一个更改用户控件的按钮单击事件。我只是将其创建为快速测试，但如果在删除之前存在现有控件，则您可能需要手动释放正在使用的资源。因为它只是一个概念证明，所以我没有真正测试过太多。

    private void changeControl_Click(object sender, RoutedEventArgs e)
    {
        // Add check to see if the existing view is already being displayed so we do not try to add load it again.
        grid1.Children.Clear();
        UIElement uIElement = new UserControl3();
        grid1.Children.Add(uIElement);
    }

2：不太简单。使用ContentPresenter 和DataTemplate。

与上面相同的网格，但添加了一些东西。

    <Grid x:Name="grid1">
        <Grid.Resources>
            <DataTemplate x:Name="usercontrol1Template" DataType="{x:Type local:UserControl1ViewModel}">
                <local:UserControl1/>
            </DataTemplate>

            <DataTemplate x:Name="usercontrol2Template" DataType="{x:Type local:UserControl2ViewModel}">
                <local:UserControl2/>
            </DataTemplate>
        </Grid.Resources>

        <ContentPresenter x:Name="ContentPresenter" Content="{Binding}"/>
    </Grid>

如果您正确绑定事物，则可以从窗口 ViewModel 后面或内部的代码中更改控件。我将在下面展示简单的代码。

    private void changeControl_Click(object sender, RoutedEventArgs e)
    {
        UserControl2 userControl2 = new UserControl2();
        grid1.DataContext = new UserControl2ViewModel();
    }

还有其他方法可以做到这一点，但这些是最简单的，应该可以帮助您入门。

【讨论】：