MVVM模式下WPF控件点击显示及嵌套集合新增项问题

一、隐藏控件的内存占用问题 #

如果把ComboBox作为隐藏控件放在STemplate里，每个SItem实例都会生成对应的ComboBox对象——哪怕它是Collapsed状态。虽然Collapsed控件不参与布局，但可视化树里的实例依然存在，绑定、样式等资源也会被加载。当SItem数量很多时，这些闲置的ComboBox确实会累积占用不少内存，这种方案不推荐。

二、资源共享导致的显示问题 #

你之前用资源没加x:Shared="false"，WPF默认资源是单例模式（Shared=true），所以所有SItem都会复用同一个ComboBox实例，最后只会绑定到最后一个触发的SItem上。给资源加上x:Shared="false"能让每个SItem获取独立的实例，但本质还是每个SItem都创建了控件，依然有内存浪费的问题，不是最优解。

三、推荐方案：动态创建弹窗/浮层 #

既然添加操作很少见，完全没必要给每个SItem都绑定控件，而是在用户点击SItem时动态创建并显示弹窗/浮层，操作完成后销毁或隐藏，只有在需要时才占用资源。

具体实现步骤： #

1. 给STemplate里的Border添加点击事件（或用命令绑定），触发时获取当前SItem对应的ViewModel。
2. 创建包含两个ComboBox的弹窗（可用Window、Popup或自定义Flyout），把弹窗的DataContext绑定到当前SItem的ViewModel，让ComboBox的选择结果能直接关联到该SItem的Pairs集合。
3. 弹窗里加确认按钮，点击时根据ComboBox选中值创建新的PItem，添加到Pairs集合后关闭弹窗。

示例代码参考： #

XAML弹窗模板（可放在Window资源中）：

<DataTemplate x:Key="AddPairPopupTemplate">
    <Grid Padding="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="LId:" VerticalAlignment="Center"/>
        <ComboBox Grid.Column="1" ItemsSource="{Binding AvailableLIds}" SelectedItem="{Binding NewLId}" Margin="5,0"/>
        <TextBlock Grid.Column="2" Text="SId:" VerticalAlignment="Center" Margin="5,0"/>
        <ComboBox Grid.Column="3" ItemsSource="{Binding AvailableSIds}" SelectedItem="{Binding NewSId}" Margin="5,0"/>
        <Button Grid.Column="4" Content="添加" Command="{Binding AddPairCommand}" Margin="5,0"/>
    </Grid>
</DataTemplate>

后台点击事件处理：

private void OnSItemClicked(object sender, RoutedEventArgs e)
{
    var border = sender as Border;
    var sItemVm = border.DataContext as SItemViewModel;
    if (sItemVm == null) return;

    var popup = new Popup
    {
        PlacementTarget = border,
        Placement = PlacementMode.Bottom,
        IsOpen = true,
        Child = (FrameworkElement)FindResource("AddPairPopupTemplate")
    };
    popup.Child.DataContext = sItemVm;
}

SItemViewModel核心逻辑：

public class SItemViewModel : INotifyPropertyChanged
{
    public ObservableCollection<PItem> Pairs { get; set; }
    public List<string> AvailableLIds { get; set; }
    public List<string> AvailableSIds { get; set; }

    private string _newLId;
    public string NewLId
    {
        get => _newLId;
        set { _newLId = value; OnPropertyChanged(); }
    }

    private string _newSId;
    public string NewSId
    {
        get => _newSId;
        set { _newSId = value; OnPropertyChanged(); }
    }

    public ICommand AddPairCommand { get; }

    public SItemViewModel()
    {
        Pairs = new ObservableCollection<PItem>();
        AvailableLIds = new List<string> { "L1", "L2", "L3" };
        AvailableSIds = new List<string> { "S1", "S2", "S3" };
        AddPairCommand = new RelayCommand(AddPair);
    }

    private void AddPair()
    {
        if (!string.IsNullOrEmpty(NewLId) && !string.IsNullOrEmpty(NewSId))
        {
            Pairs.Add(new PItem { LId = NewLId, SId = NewSId });
            // 清空选中值
            NewLId = null;
            NewSId = null;
        }
    }

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

额外优化：复用弹窗 #

如果担心频繁创建销毁弹窗影响性能，可以提前创建一个全局弹窗，每次使用时只更新DataContext和显示位置，用完后隐藏即可，全程只有一个弹窗实例，内存占用极低。

内容的提问来源于stack exchange，提问作者Hürol Aslan