(WPF MVVM) 如何将用户控件从 ViewModel 中的集合添加到 View [英] (WPF MVVM) How to add a user control to a View from a collection in a ViewModel

问题描述

我想知道如何从集合中将用户控件添加到窗口中.目前，我正在将 Views 文件夹中的控件添加到这样的网格单元中.

I want to know how to add a user control into a window from a collection. Currently I am adding my control from my Views folder to a grid cell like so.

<views:MyControl Grid.Column="0" Grid.Row="0" Margin="10"/>

我的视图模型中有一个 ObservableCollection，它存储了一组用户控件.在我看来，我想从该集合中取出一个控件并将其放入网格的单元格中.如何像上面所做的那样向网格添加控件，但来自我的集合?

I have an ObservableCollection in my view model and it stores a collection of user controls. In my view I want to take one control from that collection and place it into the cell of my grid. How can I add a control to the grid like I have done above, but from my collection?

例如类似{Binding Path control.[1]

e.g something along the lines of {Binding Path controls.[1]

推荐答案

如果某物包含一组用户控件，则它不是视图模型.

If something contains a collection of user controls, it's not a view model.

支持显示其他控件的视图的视图模型应该包含这些控件的视图模型的集合.您应该将ItemsControl 的ItemsSource 绑定到集合属性，然后使用模板匹配和数据模板来创建控件.

A view model that backs a view which displays other controls should contain a collection of the view models for those controls. You should be bind the ItemsSource of an ItemsControl to the collection property, and then use template matching and data templates to create the controls.

所以，假设您想在窗口中显示 FooView 和 BarView 用户控件的集合.您将创建一个 FooViewModel 类和一个 BarViewModel 类，然后在资源字典中为每个类创建一个数据模板，例如:

So, let's suppose that you want to display a collection of FooView and BarView user controls in your window. You will create a FooViewModel class and a BarViewModel class, and then create a data template for each in the resource dictionary, e.g.:

<Window.Resources>
   <DataTemplate x:Key="{Type local:FooViewModel}">
      <local:FooView />
   </DataTemplate>
   <DataTemplate x:Key="{Type local:BarViewModel}">
      <local:BarView />
   </DataTemplate>
</WindowResources>

一旦完成，任何 ItemsSource 绑定到这些视图模型的集合的 ItemsControl 将找到模板，创建控件，并将它们绑定到视图模型.

Once this is done, any ItemsControl whose ItemsSource is bound to a collection of these view models will find the templates, create the controls, and bind them to the view models.

如果您使用的 ItemsControl 是 Grid，您可能需要额外的步骤.任何 ItemsControl 都会生成一个项目容器(在 Grid 的情况下，它是一个 ContentPresenter)来保存它正在显示的视图；在 Grid 中，您可能需要将 Grid.Row 和 Grid.Column 分配给该容器.假设你的视图模型有 Row 和 Column 属性，这样做的方法是:

If the ItemsControl you're using is a Grid, you probably have an additional step. Any ItemsControl generates an item container (in the case of Grid, it's a ContentPresenter) to hold the views it's displaying; in a Grid, you probably need to assign the Grid.Row and Grid.Column to that container. Assuming that your view models have Row and Column properties, the way to do this is:

<Grid.ItemContainerStyle>
   <Style TargetType="ContentPresenter">
      <Setter Property="Grid.Row" Value="{Binding Row}" />
      <Setter Property="Grid.Column" Value="{Binding Column}" />
   </Style>
</Grid.ItemContainerStyle>

这篇关于(WPF MVVM) 如何将用户控件从 ViewModel 中的集合添加到 View的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！