WPF MVVM Binding dynamic control in code behind 并传入View

Question

我正在使用 MVVM 开发 WPF 应用程序。我有两页。我在第 1 页中有多个 UserControl，在从第 1 页选择 UserControl 时，我想在第 2 页中显示所选的 userControl。下面是我的代码。

ViewModel代码

public RelayCommand<string> OnClickSelectWidgetCommand => new RelayCommand<string>((setUserControlName) =>
    {
        using (new CursorWait())
        {
            var MyContentControl = setUserControlName;
            MessageBox.Show(MyContentControl);

            //How to render UserControl to View?
        }

    }, true);

在上面的代码中，我在 setUserControlName 变量中获取了 UserControl 名称。现在如何将该 UserControl 绑定到 XAML 页面？以下是我尝试过的代码。

查看代码

<StackPanel Background="Black" VerticalAlignment="Top">
<Border Name="UserControl1BorderLow" BorderBrush="White" BorderThickness="0" >
    <ItemsControl ItemsSource="{Binding LowCollection}" Margin="4,0" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel HorizontalAlignment="Left" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <controls:UserControlColumn1XL HorizontalAlignment="Left" Margin="2" />
                <!--what can I do here in above line to make it dynamically render the userControl in place of UserControlColumn1XL-->
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Border></StackPanel>

以上代码，在 DataTemplate 中需要更改什么才能动态绑定 UserControls？

Answer 1

有两种方法可以解决这个问题，一种是根据您的数据类型 (DataTemplates) 设置模板，另一种是根据数据本身 (DataTriggers) 设置模板。

在第一种情况下，您的 LowCollection 应该是一个对象数组，或者是您的视图模型全部派生自的某个基础 class（ViewModel1、ViewModel2 等）。在这种情况下，您可以完全摆脱项目模板，只需添加 DataTemplates 来指定 ItemsControl 中的每个项目应该如何表示：

<ItemsControl.Resources>

    <DataTemplate DataType="{x:Type local:ViewModel1}">
        <UserControl1 />
    </DataTemplate>

    <DataTemplate DataType="{x:Type local:ViewModel2}">
        <UserControl2 />
    </DataTemplate>

    ... etc...

在第二种情况下，您需要根据视图模型中某些属性的值设置模板。在这种情况下，您确实需要设置 ItemTemplate，并给它一个 Style，它使用数据触发器来设置适当的 DataTemplate:

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ContentPresenter Content="{Binding}">
                <ContentPresenter.Style>
                    <Style TargetType="{x:Type ContentPresenter}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding YourProperty}" Value="YourValue1">
                                <Setter Property="ContentTemplate" Value="{StaticResource YourDataTemplate1}" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding YourProperty}" Value="YourValue2">
                                <Setter Property="ContentTemplate" Value="{StaticResource YourDataTemplate2}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentPresenter.Style>
            </ContentPresenter>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

这里要注意的相关部分是视图模型中有一个名为 YourProperty 的属性，它可以有两个值，即 YourValue1 或 YourValue2；上面的样式然后选择 YourDataTemplate1 或 YourDataTemplate2，具体取决于 YourProperty.

的值

WPF MVVM Binding dynamic control in code behind 并传入View

WPF MVVM Binding dynamic control in code behind and pass in View

c#

wpf

user-controls

datatemplate

mvvm