Динамическое добавление и удаление структур xaml в WPF

Question

У меня в WPF три почти одинаковых элемента MainView:

<UniformGrid Grid.Column="1">
    <Grid Height="180" Width="180" Margin="10">
        <Grid.Background>
            <Grid.Background>
            <ImageBrush Stretch="Uniform" ImageSource="{Binding Image1}" ViewboxUnits="RelativeToBoundingBox" 
                local:ViewBoxTracking.Source="{Binding ElementName=MainImage}" />
        </Grid.Background>
        </Grid.Background>
    </Grid>
</UniformGrid>

<UniformGrid Grid.Column="2">
    <Grid Height="180" Width="180" Margin="10">
        <Grid.Background>
            as above with Image2
        </Grid.Background>
    </Grid>
</UniformGrid>

<UniformGrid Grid.Column="3">
    <Grid Height="180" Width="180" Margin="10">
        <Grid.Background>
            as above with Image3
        </Grid.Background>
    </Grid>
</UniformGrid>

Я хочу добавлять и удалять эти структуры (которые начинаются с UniformGrid) динамически из кода C # в моем MainViewModel.cs

Как "упаковать" эти элементы из xaml в один список и как добавить возможности в классе c # для добавления / удаления структур, как указано выше?

В MainViewModel.cs привязка класса I Image к этим свойствам:

public ImageSource Image1 { get; set; }
public ImageSource Image2 { get; set; }
public ImageSource Image3 { get; set; }

Нужно ли, например, сделать новый UserControl для каждого UniformGrid и затем добавить его к MainViewModel, то есть Window? Каков наилучший способ добиться этого?

РЕДАКТИРОВАТЬ:

Мое решение, о котором я думаю:

• Сделать UserControl вmy MainViewModel
• Один элемент управления с Image = один UserControl
• Динамически добавить new ImageUserControl к UserControl в MainViewModel

Нокак добиться этого элегантным способом? Может быть, у вас есть лучшее решение для этого?

EDIT2:

Чтобы быть более ясным, мой MainViewModel выглядит так с жестко закодированными тремя Image:

И я хочу добавить / удалить эту структуру из чего-то вроде List из моего кода

Answer 1

Чтобы динамически добавлять и / или удалять визуальные элементы из кода c #, используйте ItemsControl, привязанный к коллекции в модели представления:

public ObservableCollection<ImageSource> Images { get; set; }

, затем xaml создает шаблон для каждого изображения:

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
          <Grid Height="180" Width="180" Margin="10">
             <Grid.Background>
                <ImageBrush Stretch="Uniform" ImageSource="{Binding}" 
                            ViewboxUnits="RelativeToBoundingBox" 
                            local:ViewBoxTracking.Source="{Binding ElementName=MainImage}" />
             </Grid.Background>
          </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>