在WPF MVVM中动态添加控件

Question

我正在开发一个动态搜索视图，在其中，点击按钮应该添加一个新的行，其中包含3个组合框和2个文本框。

我该怎么做？

- spiritqueen

Answer 1

如果你真的想要使用MVVM模式，尽量忘记“如何添加控件”这个问题。你不需要去考虑它，只需要关注你的视图模型 - WPF会替你创建控件 :)

在你的情况下，假设我们有一个SearchViewModel和一个SearchEntryViewModel。

public class SearchEntryViewmodel
{
    //Properties for Binding to Combobox and Textbox goes here
}


public class SearchViewModel 
{
    public ObservableCollection<SearchEntryViewmodel> MySearchItems {get;set;}
    public ICommand AddSearchItem {get;}
}

迄今为止，您不需要考虑用户控件/视图。在您的SearchView中，您创建一个ItemsControl并将ItemsSource绑定到MySearchItems。

<ItemsControl ItemsSource="{Binding MySearchItems}"/> 

现在你可以在 ItemsControl(just the ToString() atm) 中看到所有的 SearchEntryViewmodels。

为了满足你的需求，展示每个 SearchEntryViewmodel 的 3 个 ComboBox 等内容，你只需要在资源文件中定义一个 DataTemplate。

<DataTemplate DataType="{x:Type local:SearchEntryViewmodel}">
    <StackPanel Orientation="Horizontal">
        <Combobox ItemsSource="{Binding MyPropertyInSearchEntryViewmodel}"/>
        <!-- the other controls with bindings -->
    </StackPanel>
</DataTemplate>

就是这样 :) 你不需要考虑“如何动态添加控件？” 只需向集合中添加新的 SearchEntryViewmodel。

这种方法称为Viewmodel First，我认为这是实现MVVM最简单的方法。

- blindmeis

---

谢谢。在我浏览网络时发现了这种方法。很高兴知道我走在正确的路上。 - spiritqueen

嗨，你的建议非常好。考虑到在SearchEntryViewmodel中有一个名为ControlType的属性，它确定在StackPanel中显示哪个控件。如果是ControlType.Button，则在StackPanel中显示Button而不是ComboBox。如何在MVVM中实现这一点？谢谢。 - huang

@JokeHuang 只需创建一个DataTemplateSelector。请查看例如https://www.wpftutorial.net/DataTemplates.html。 - PythonNoob

我是WPF MVVM的新手，我想知道在哪里放置<ItemsControl ItemsSource="{Binding MySearchItems}"/>以及其他我想要动态生成的UI。如果您能为像我这样完全新手的人编辑答案以获得更好的理解，那就太好了。谢谢@blidmeis。 - Renascent

Answer 2

一种选择是通过创建新实例在后端创建文本框和组合框。 但更好的选择是创建一个包含所有要添加的文本框和组合框以及所需格式的用户控件。 创建完成后，当按钮被按下时，您可以创建此用户控件的实例，并使用控件的SetValue属性将其设置在网格或任何其他控件中。

如果您是WPF和MVVM的新手，请阅读这些博客以了解更多信息。

https://radhikakhacharia.wordpress.com/2012/06/01/wpf-tutorial-3/

https://radhikakhacharia.wordpress.com/2012/02/13/model-view-viewmodel/

- R76

---

也被我们办公室屏蔽了。稍后会访问。谢谢。 - spiritqueen

Answer 3

如果你对MVVM和WPF都是新手，那么Jason Dollinger在这里on lab49提供了一个非常棒的视频教程，教你如何构建一个C# / WPF / MVVM应用程序。他在这个惊人的视频中开发的所有源代码也可以在这里right here on lab49.找到。

看完后，你肯定不会有任何问题来开发你的搜索视图。

- Mare Infinitus

---

该网站在我们办公室被封锁了。我会在家里尝试打开。感谢您提供的好文章链接。 - spiritqueen

链接现在已经失效 :( 如果有更新的话，那将非常有帮助。谢谢。 - StayOnTarget