MVVM模式下基于ComboBox选中项创建ListViewItem并动态添加控件

嘿，这个需求在WPF里太常见了，我给你两种实用的实现思路，你可以根据自己的项目规模和架构来选：

这种方式上手快，不需要复杂的架构，直接通过事件绑定来搞定：

首先在XAML里先把基础的ComboBox和StackPanel搭好：

<StackPanel x:Name="MainStackPanel" Margin="20">
    <ComboBox x:Name="ShapeComboBox" 
              SelectionChanged="ShapeComboBox_SelectionChanged"
              Margin="0 0 0 10">
        <ComboBoxItem Content="Square"/>
        <ComboBoxItem Content="Rectangle"/>
        <ComboBoxItem Content="Circle"/>
    </ComboBox>
    <!-- 这里放你原来的Label、TextBox等固定控件 -->
</StackPanel>

然后在后台代码（比如MainWindow.xaml.cs）里处理选择变更事件，根据选中的形状动态生成对应的控件，记得每次添加前先清空之前的动态控件，避免重复堆积：

private void ShapeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // 先移除之前添加的动态控件（用Tag标记区分固定/动态控件）
    var dynamicControls = MainStackPanel.Children.Cast<UIElement>().Where(elem => elem.Tag?.ToString() == "Dynamic").ToList();
    foreach (var elem in dynamicControls)
    {
        MainStackPanel.Children.Remove(elem);
    }

    if (ShapeComboBox.SelectedItem is ComboBoxItem selectedItem)
    {
        string shape = selectedItem.Content.ToString();
        switch (shape)
        {
            case "Square":
                // 添加正方形对应的控件
                var sideLabel = new Label { Content = "Side:", Tag = "Dynamic", Margin = new Thickness(0, 10, 5, 0) };
                var sideTextBox = new TextBox { Width = 100, Tag = "Dynamic" };
                MainStackPanel.Children.Add(sideLabel);
                MainStackPanel.Children.Add(sideTextBox);
                break;
            case "Circle":
                // 添加圆形对应的控件
                var radiusLabel = new Label { Content = "Radius:", Tag = "Dynamic", Margin = new Thickness(0, 10, 5, 0) };
                var radiusTextBox = new TextBox { Width = 100, Tag = "Dynamic" };
                MainStackPanel.Children.Add(radiusLabel);
                MainStackPanel.Children.Add(radiusTextBox);
                break;
            case "Rectangle":
                // 添加矩形对应的控件
                var widthLabel = new Label { Content = "Width:", Tag = "Dynamic", Margin = new Thickness(0, 10, 5, 0) };
                var widthTextBox = new TextBox { Width = 100, Tag = "Dynamic" };
                var heightLabel = new Label { Content = "Height:", Tag = "Dynamic", Margin = new Thickness(0, 10, 5, 0) };
                var heightTextBox = new TextBox { Width = 100, Tag = "Dynamic" };
                MainStackPanel.Children.Add(widthLabel);
                MainStackPanel.Children.Add(widthTextBox);
                MainStackPanel.Children.Add(heightLabel);
                MainStackPanel.Children.Add(heightTextBox);
                break;
        }
    }
}

如果你的项目是用MVVM架构，那这种方式更优雅，耦合度更低，后续维护和扩展也更方便：

第一步：创建形状对应的ViewModel类 #

先定义一个基类，然后每个形状对应一个子类，包含各自的属性：

public class ShapeViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class SquareViewModel : ShapeViewModel
{
    private double _side;
    public double Side
    {
        get => _side;
        set { _side = value; OnPropertyChanged(nameof(Side)); }
    }
}

public class CircleViewModel : ShapeViewModel
{
    private double _radius;
    public double Radius
    {
        get => _radius;
        set { _radius = value; OnPropertyChanged(nameof(Radius)); }
    }
}

public class RectangleViewModel : ShapeViewModel
{
    private double _width;
    public double Width
    {
        get => _width;
        set { _width = value; OnPropertyChanged(nameof(Width)); }
    }

    private double _height;
    public double Height
    {
        get => _height;
        set { _height = value; OnPropertyChanged(nameof(Height)); }
    }
}

第二步：主ViewModel #

在主ViewModel里定义ComboBox的选项列表和选中的形状属性：

public class MainViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    // ComboBox的选项列表
    public List<string> ShapeOptions { get; } = new List<string> { "Square", "Circle", "Rectangle" };

    private string _selectedShapeName;
    public string SelectedShapeName
    {
        get => _selectedShapeName;
        set 
        { 
            _selectedShapeName = value; 
            OnPropertyChanged(nameof(SelectedShapeName));
            // 根据选中的名称创建对应的ViewModel
            UpdateSelectedShapeViewModel();
        }
    }

    private ShapeViewModel _selectedShapeViewModel;
    public ShapeViewModel SelectedShapeViewModel
    {
        get => _selectedShapeViewModel;
        set { _selectedShapeViewModel = value; OnPropertyChanged(nameof(SelectedShapeViewModel)); }
    }

    private void UpdateSelectedShapeViewModel()
    {
        switch (SelectedShapeName)
        {
            case "Square":
                SelectedShapeViewModel = new SquareViewModel();
                break;
            case "Circle":
                SelectedShapeViewModel = new CircleViewModel();
                break;
            case "Rectangle":
                SelectedShapeViewModel = new RectangleViewModel();
                break;
            default:
                SelectedShapeViewModel = null;
                break;
        }
    }
}

第三步：XAML里绑定并定义DataTemplate #

把主ViewModel设置为窗口的DataContext，然后用ContentControl来显示对应的形状控件，通过DataTemplate匹配不同的ViewModel：

<Window x:Class="ShapeDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ShapeDemo"
        Title="Shape Demo" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <StackPanel Margin="20">
        <ComboBox ItemsSource="{Binding ShapeOptions}"
                  SelectedItem="{Binding SelectedShapeName}"
                  Margin="0 0 0 10"/>
        <!-- 你的固定控件放在这里 -->
        <Label Content="固定示例控件："/>
        <TextBox Width="150" Margin="0 0 0 10"/>

        <!-- 动态显示的形状控件 -->
        <ContentControl Content="{Binding SelectedShapeViewModel}" Margin="0 10 0 0">
            <ContentControl.Resources>
                <DataTemplate DataType="{x:Type local:SquareViewModel}">
                    <StackPanel>
                        <Label Content="Side:"/>
                        <TextBox Text="{Binding Side, Mode=TwoWay}" Width="100"/>
                    </StackPanel>
                </DataTemplate>
                <DataTemplate DataType="{x:Type local:CircleViewModel}">
                    <StackPanel>
                        <Label Content="Radius:"/>
                        <TextBox Text="{Binding Radius, Mode=TwoWay}" Width="100"/>
                    </StackPanel>
                </DataTemplate>
                <DataTemplate DataType="{x:Type local:RectangleViewModel}">
                    <StackPanel>
                        <Label Content="Width:"/>
                        <TextBox Text="{Binding Width, Mode=TwoWay}" Width="100"/>
                        <Label Content="Height:" Margin="0 10 0 0"/>
                        <TextBox Text="{Binding Height, Mode=TwoWay}" Width="100"/>
                    </StackPanel>
                </DataTemplate>
            </ContentControl.Resources>
        </ContentControl>
    </StackPanel>
</Window>

这种方式的好处是把UI和逻辑完全分离，后续要加新形状的话，只需要加对应的ViewModel和DataTemplate就行，不用改后台代码，扩展性很强。

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