WPF MVVM 在代码中绑定动态控件并传入View [英] WPF MVVM Binding dynamic control in code behind and pass in View

问题描述

我正在使用 MVVM 开发 WPF 应用程序.我有两页.我在第 1 页中有多个用户控件，在从第 1 页选择用户控件时，我想在第 2 页中显示选定的用户控件.下面是我的代码.

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中需要改变什么来动态绑定UserControls?

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，并给它一个 Style，它使用数据触发器来设置适当的 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>

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

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屋！