WPF MVVM绑定动态控制在代码后面并传递给View [英] WPF MVVM Binding dynamic control in code behind and pass in View

问题描述

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

I am working on WPF application using MVVM. I have two page. I have multiple UserControls in a page 1, on selection of UserControls from page 1, I want to show that selected userControl in 2nd page. Below are my code.

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页面？以下是我尝试过的代码。

Here in above code I get the UserControl name in setUserControlName variable. Now how to bind that UserControl to XAML page? Below are my code that I have tried.

查看代码

<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中需要进行哪些更改以动态绑定UserControl？

Above code, In DataTemplate what need to be change to bind UserControls dynamically?

推荐答案

有两种解决方法，一种涉及根据您的数据类型（DataTemplates）设置模板，第二种涉及基于数据的设置模板

There are two ways to solve this, one involves setting the template based on your data type (DataTemplates) and the second involves setting it based on the data itself (DataTriggers).

在第一种情况下，您的LowCollection应该是对象数组，或者您的视图模型都衍生自一些基类（ViewModel1，ViewModel2等）。在这种情况下，您可以完全摆脱itemTemplate，而只需添加DataTemplates即可指定应该如何表示ItemsControl中的每个项目：

In the first case your LowCollection should be an array of objects, or some base class that your view models are all derived from (ViewModel1, ViewModel2 etc). In this case you can get rid of your itemtemplate altogether and just add DataTemplates to specify how each of the items in your ItemsControl should be represented:

<ItemsControl.Resources>

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

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

    ... etc...

在第二种情况下，您需要根据视图模型中某些属性的值设置模板。在这种情况下，您确实需要设置ItemTemplate，并为其提供一个使用数据触发器设置适当的DataTemplate的样式：

In the second case you need to set a template based on the value of some property in your view model. In this case you do need to set the ItemTemplate, and you give it a Style which uses data triggers to set an appropriate 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>

此处要注意的相关部分是，视图模型中有一个名为<$ c $的属性c> YourProperty ，可以具有两个值，即 YourValue1 或 YourValue2 ；然后，上面的样式根据 YourProperty 的值选择 YourDataTemplate1 或 YourDataTemplate2 。 code>。

The relevant parts to note here are that there is a property in your view model called YourProperty which can have two values i.e. YourValue1 or YourValue2; the style above then selects either YourDataTemplate1 or YourDataTemplate2, depending on the value of YourProperty.

这篇关于WPF MVVM绑定动态控制在代码后面并传递给View的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！