(WPF MVVM) Как добавить пользовательский элемент управления в представление из коллекции в модели представления

Question

Я хочу знать, как добавить пользовательский элемент управления в окно из коллекции. В настоящее время я добавляю свой элемент управления из папки Views в ячейку сетки следующим образом.

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

В моей модели представления есть ObservableCollection, в которой хранится коллекция пользовательских элементов управления. На мой взгляд, я хочу взять один элемент управления из этой коллекции и поместить его в ячейку моей сетки. Как я могу добавить элемент управления в сетку, как я делал выше, но из моей коллекции?

например, что-то вроде элементов управления {Binding Path. [1]

Answer 1

Если что-то содержит коллекцию пользовательских элементов управления, это не модель представления.

Модель представления, поддерживающая представление, отображающее другие элементы управления, должна содержать коллекцию моделей представления для этих элементов управления. Необходимо связать ItemsSource ItemsControl со свойством коллекции, а затем использовать сопоставление шаблонов и шаблоны данных для создания элементов управления.

Итак, давайте предположим, что вы хотите отобразить коллекцию пользовательских элементов управления FooView и BarView в вашем окне. Вы создадите класс FooViewModel и класс BarViewModel, а затем создадите шаблон данных для каждого из них в словаре ресурсов, например ::

.

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

Как только это будет сделано, любой ItemsControl, чей ItemsSource связан с коллекцией этих моделей представлений, найдет шаблоны, создаст элементы управления и свяжет их с моделями представлений.

Если ItemsControl, который вы используете, это Grid, у вас, вероятно, есть дополнительный шаг. Любой ItemsControl генерирует контейнер элемента (в случае Grid, это ContentPresenter) для хранения представлений, которые он отображает; в Grid вам, вероятно, нужно присвоить Grid.Row и Grid.Column этому контейнеру. Предполагая, что ваши модели представлений имеют свойства Row и Column, способ сделать это:

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