WPF MVVM中切换ContentControl内UserControl时如何缓存控件？

你当前的实现中，ContentControl通过DataTemplate匹配ViewModel时，每次切换都会重新创建UserControl实例，这对集成的WinForms遗留控件很不友好。以下是几种比"预先加载切换可见性"更优雅的缓存方案：

方案1：ViewModel与视图实例绑定缓存 #

在MainViewModel中维护ViewModel到对应UserControl实例的映射，直接绑定视图实例而非ViewModel，彻底避免重复创建：

修改MainViewModel #

public class MainViewModel : INotifyPropertyChanged
{
    private UIElement _selectedView;
    private readonly Dictionary<object, UIElement> _viewCache = new();

    public UC1ViewModel UC1VM { get; } = new();
    public UC2ViewModel UC2VM { get; } = new();
    public ICommand UpdateContentCommand { get; }

    public UIElement SelectedView
    {
        get => _selectedView;
        set { _selectedView = value; OnPropertyChanged(); }
    }

    public MainViewModel()
    {
        // 初始化时创建视图实例并绑定ViewModel
        _viewCache[UC1VM] = new UC1UserControl { DataContext = UC1VM };
        _viewCache[UC2VM] = new UC2UserControl { DataContext = UC2VM };

        UpdateContentCommand = new UpdateContentCommand(this);
        // 默认显示第一个视图
        SelectedView = _viewCache[UC1VM];
    }

    public void SwitchView(object viewModel)
    {
        if (_viewCache.TryGetValue(viewModel, out var view))
        {
            SelectedView = view;
        }
    }

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

修改UpdateContentCommand #

internal class UpdateContentCommand : ICommand
{
    public event EventHandler? CanExecuteChanged;
    private readonly MainViewModel _vm;

    public bool CanExecute(object? parameter) => true;

    public void Execute(object? parameter)
    {
        if (parameter is string p)
        {
            _vm.SwitchView(p.ToLower() == "uc1" ? _vm.UC1VM : _vm.UC2VM);
        }
    }

    public UpdateContentCommand(MainViewModel vm) => _vm = vm;
}

修改MainWindow.xaml #

把ContentControl的Content绑定改为SelectedView：

<ContentControl Grid.Column="1" Content="{Binding SelectedView}"/>

方案2：利用TabControl的原生缓存（最简方案） #

TabControl默认会缓存所有TabItem的内容，切换时不会重新实例化。只需隐藏标签栏即可实现无缝切换：

修改MainWindow.xaml #

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="0">
        <Button Command="{Binding UpdateContentCommand}" CommandParameter="0">UC 1</Button>
        <Button Command="{Binding UpdateContentCommand}" CommandParameter="1">UC 2</Button>
    </StackPanel>
    <TabControl Grid.Column="1" SelectedIndex="{Binding SelectedTabIndex}" BorderThickness="0">
        <TabItem Header="" Focusable="False">
            <local:UC1UserControl DataContext="{Binding UC1VM}"/>
        </TabItem>
        <TabItem Header="" Focusable="False">
            <local:UC2UserControl DataContext="{Binding UC2VM}"/>
        </TabItem>
        <!-- 隐藏标签栏 -->
        <TabControl.Resources>
            <Style TargetType="{x:Type TabPanel}">
                <Setter Property="Visibility" Value="Collapsed"/>
            </Style>
        </TabControl.Resources>
    </TabControl>
</Grid>

修改MainViewModel #

添加SelectedTabIndex属性：

private int _selectedTabIndex;
public int SelectedTabIndex
{
    get => _selectedTabIndex;
    set { _selectedTabIndex = value; OnPropertyChanged(); }
}

更新UpdateContentCommand逻辑 #

public void Execute(object? parameter)
{
    if (int.TryParse(parameter?.ToString(), out var index))
    {
        _vm.SelectedTabIndex = index;
    }
}

方案3：自定义CachedDataTemplateSelector #

通过自定义模板选择器，缓存已创建的视图实例，保持原有ViewModel绑定逻辑不变：

自定义Selector #

public class CachedDataTemplateSelector : DataTemplateSelector
{
    private readonly Dictionary<Type, DataTemplate> _templateCache = new();
    private readonly Dictionary<object, UIElement> _viewCache = new();

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item == null) return base.SelectTemplate(item, container);

        var viewModelType = item.GetType();
        // 缓存DataTemplate
        if (!_templateCache.TryGetValue(viewModelType, out var template))
        {
            template = (DataTemplate)((FrameworkElement)container).FindResource(viewModelType);
            _templateCache[viewModelType] = template;
        }

        // 缓存视图实例
        if (!_viewCache.TryGetValue(item, out var view))
        {
            view = (UIElement)template.LoadContent();
            view.DataContext = item;
            _viewCache[item] = view;
        }

        // 返回包装缓存视图的DataTemplate
        var cachedTemplate = new DataTemplate();
        var factory = new FrameworkElementFactory(typeof(ContentControl));
        factory.SetValue(ContentControl.ContentProperty, view);
        cachedTemplate.VisualTree = factory;
        return cachedTemplate;
    }
}

修改MainWindow.xaml #

注册Selector并设置给ContentControl：

<Window.Resources>
    <local:CachedDataTemplateSelector x:Key="CachedTemplateSelector"/>
    <!-- 保留原有DataTemplate -->
    <DataTemplate DataType="{x:Type vm:UC1ViewModel}">
        <local:UC1UserControl/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:UC2ViewModel}">
        <local:UC2UserControl/>
    </DataTemplate>
</Window.Resources>

<!-- 修改ContentControl -->
<ContentControl Grid.Column="1" Content="{Binding SelectedViewModel}" 
                ContentTemplateSelector="{StaticResource CachedTemplateSelector}"/>

方案对比 #

• 方案1：最符合MVVM思想，完全控制视图生命周期，适合需要精细管理视图状态的场景。
• 方案2：实现最简单，利用WPF原生控件特性，无需大量代码修改，适合快速解决问题。
• 方案3：保持原有ViewModel绑定逻辑，对现有代码侵入最小，适合不想改变现有架构的场景。

相比"预先加载切换可见性"的方案，以上方案更贴合WPF的绑定机制，避免了布局中存在大量不可见控件的冗余问题。

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