WPF如何创建含Label与RadComboBox的可扩展项目组列表？

一、基础数据结构与ViewModel #

先定义单个项目组的数据模型，以及管理所有组的ViewModel：

// 单个项目组模型，实现INotifyPropertyChanged支持数据绑定
public class ItemGroup : INotifyPropertyChanged
{
    private string _labelText;
    public string LabelText
    {
        get => _labelText;
        set
        {
            _labelText = value;
            OnPropertyChanged();
        }
    }

    // ComboBox选中项绑定属性
    private string _selectedComboItem;
    public string SelectedComboItem
    {
        get => _selectedComboItem;
        set
        {
            _selectedComboItem = value;
            OnPropertyChanged();
        }
    }

    // ComboBox数据源，可从父ViewModel传递或自定义
    public List<string> ComboItems { get; set; } = new List<string> { "选项1", "选项2", "选项3" };

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// 父ViewModel，管理项目组集合与添加逻辑
public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<ItemGroup> ItemGroups { get; set; } = new ObservableCollection<ItemGroup>();

    public ICommand AddGroupCommand { get; }

    public MainViewModel()
    {
        AddGroupCommand = new RelayCommand(AddNewItemGroup);
    }

    private void AddNewItemGroup()
    {
        var newGroup = new ItemGroup { LabelText = $"项目组 {ItemGroups.Count + 1}" };
        ItemGroups.Add(newGroup);
    }

    // 基础ICommand实现类
    public class RelayCommand : ICommand
    {
        private readonly Action _execute;
        private readonly Func<bool> _canExecute;

        public RelayCommand(Action execute, Func<bool> canExecute = null)
        {
            _execute = execute ?? throw new ArgumentNullException(nameof(execute));
            _canExecute = canExecute;
        }

        public bool CanExecute(object parameter) => _canExecute?.Invoke() ?? true;
        public void Execute(object parameter) => _execute();
        public event EventHandler CanExecuteChanged
        {
            add => CommandManager.RequerySuggested += value;
            remove => CommandManager.RequerySuggested -= value;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

二、XAML布局实现 #

<Window x:Class="WpfExpandableGroups.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfExpandableGroups"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="可扩展项目组" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <Grid Margin="10">
        <!-- 添加按钮 -->
        <Button Content="(+) 添加项目组" Command="{Binding AddGroupCommand}" 
                HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0 0 0 10"/>
        
        <!-- 横向堆叠项目组的容器：WrapPanel自动换行 -->
        <ItemsControl ItemsSource="{Binding ItemGroups}" Margin="0 40 0 0">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" HorizontalAlignment="Left" 
                               ItemWidth="250" Margin="0"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <!-- 单个项目组布局：横向排列Label与RadComboBox -->
                    <StackPanel Orientation="Horizontal" Margin="5" Padding="8" 
                                Background="#F0F0F0" CornerRadius="4">
                        <Label Content="{Binding LabelText}" VerticalAlignment="Center" 
                               Margin="0 0 10 0"/>
                        <telerik:RadComboBox ItemsSource="{Binding ComboItems}" 
                                            SelectedItem="{Binding SelectedComboItem}"
                                            Width="150" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

三、关键要点说明 #

• 横向堆叠容器：优先选WrapPanel，它会自动将超出当前行宽度的项目组换行，适配任意数量的组；也可根据需求换成UniformGrid（固定列数）或带滚动条的StackPanel（横向不换行）。
• 单个组内布局：用StackPanel（Orientation="Horizontal"）可快速横向排列元素，若需精确控制宽度比例，可改用Grid定义两列布局。
• 数据绑定核心：ObservableCollection<ItemGroup>会在集合变更时自动通知UI更新；每个ItemGroup实现INotifyPropertyChanged，确保组内属性变更同步到界面。
• (+)按钮逻辑：通过ICommand绑定ViewModel的AddNewItemGroup方法，点击时向集合添加新实例，UI自动渲染新的项目组。

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