WPF MVVM模式下动态生成可变数量子视图的实现问询

一、修正视图模型（关键：用ObservableCollection实现集合变更通知） #

原代码中的List<ChildViewModel>无法自动通知UI集合变化，需替换为ObservableCollection<T>，同时添加动态增减子项的命令：

public class ParentViewModel : ObservableObject
{
    // 用ObservableCollection替代List，支持集合变更通知
    public ObservableCollection<ChildViewModel> Children { get; } = new ObservableCollection<ChildViewModel>();

    // 动态增减子项的命令（假设你使用RelayCommand，也可自行实现ICommand）
    public ICommand AddChildCommand { get; }
    public ICommand RemoveChildCommand { get; }

    public ParentViewModel()
    {
        AddChildCommand = new RelayCommand(() => Children.Add(new ChildViewModel()));
        RemoveChildCommand = new RelayCommand(() => 
        {
            if (Children.Count > 0)
                Children.RemoveAt(Children.Count - 1);
        });
    }
}

public class ChildViewModel : ObservableObject
{
    // 示例属性，用于子视图绑定展示
    private string _displayName;
    public string DisplayName
    {
        get => _displayName;
        set => SetProperty(ref _displayName, value);
    }

    public ChildViewModel()
    {
        DisplayName = $"子视图 {Guid.NewGuid().ToString().Substring(0, 4)}";
    }
}

二、主视图XAML实现（用ItemsControl动态渲染子视图） #

使用ItemsControl绑定集合，通过ItemTemplate关联你的ChildView，并可自定义布局：

<Window x:Class="YourNamespace.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:views="clr-namespace:YourNamespace.Views"
        xmlns:viewModels="clr-namespace:YourNamespace.ViewModels"
        Title="动态子视图示例" Height="450" Width="800">
    <Window.DataContext>
        <viewModels:ParentViewModel />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 子视图增减按钮 -->
        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="10" Spacing="8">
            <Button Content="添加子视图" Command="{Binding AddChildCommand}" />
            <Button Content="移除最后一个子视图" Command="{Binding RemoveChildCommand}" />
        </StackPanel>

        <!-- 动态子视图容器 -->
        <ItemsControl Grid.Row="1" ItemsSource="{Binding Children}">
            <!-- 自定义子项布局：这里用WrapPanel自动换行，可替换为StackPanel/UniformGrid等 -->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" Margin="10" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <!-- 指定每个子项对应的视图 -->
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <views:ChildView Margin="8" Width="200" Height="120" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

三、子视图示例（ChildView） #

这是你的自定义子视图，自动绑定对应的ChildViewModel作为DataContext：

<UserControl x:Class="YourNamespace.Views.ChildView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             mc:Ignorable="d" 
             d:DesignHeight="120" d:DesignWidth="200">
    <Border BorderBrush="#FF666666" BorderThickness="1" CornerRadius="6" Padding="10">
        <StackPanel>
            <TextBlock Text="子视图容器" FontWeight="Bold" FontSize="14"/>
            <TextBlock Text="{Binding DisplayName}" Margin="0,8,0,0" Foreground="#FF2D6CB0"/>
        </StackPanel>
    </Border>
</UserControl>

核心要点说明 #

1. ObservableCollection的必要性：它实现了INotifyCollectionChanged接口，集合增删项时自动通知UI更新，是动态集合绑定的基础。
2. ItemsControl的灵活性：作为WPF集合展示的基础控件，可通过ItemsPanelTemplate自由切换布局（垂直/水平排列、网格、自动换行等），ItemTemplate则负责关联数据与视图。
3. 自动DataContext绑定：ItemsControl会自动将集合中的每个ChildViewModel设置为对应ChildView的DataContext，无需手动指定索引绑定。

内容的提问来源于stack exchange，提问作者sdub0800