WPF编辑/显示模式切换的高效实现方案咨询

问题根源 #

之前用BoolToVisibilityConverter绑定Visibility的方式，会同时实例化编辑（TextBox）和显示（TextBlock）两种状态的控件，即使其中一种状态被隐藏。在大量数据场景（比如包含成百上千项的ListView）下，每个列表项都存在两个绑定的控件，会导致：

• 内存占用飙升
• UI线程频繁处理绑定更新
• 控件实例化/销毁的额外开销
  最终引发卡顿。

高效解决方案 #

以下是几种更优雅的方案，核心是按需加载对应状态的控件，避免冗余控件和绑定。

1. 使用 DataTemplateSelector 切换模板

通过自定义模板选择器，根据当前模式直接加载对应的数据模板，每个状态下仅存在一个有效控件。

步骤1：定义数据模板

在资源中分别定义显示和编辑模式的模板：

<Window.Resources>
    <!-- 显示模式模板：仅加载TextBlock，使用OneWay绑定减少开销 -->
    <DataTemplate x:Key="DisplayItemTemplate">
        <TextBlock Text="{Binding Value, Mode=OneWay}" />
    </DataTemplate>

    <!-- 编辑模式模板：加载TextBox，使用双向绑定 -->
    <DataTemplate x:Key="EditItemTemplate">
        <TextBox Text="{Binding Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    </DataTemplate>
</Window.Resources>

步骤2：实现模板选择器

创建继承自DataTemplateSelector的类，根据模式选择模板：

public class ModeTemplateSelector : DataTemplateSelector
{
    public DataTemplate DisplayTemplate { get; set; }
    public DataTemplate EditTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        // 全局控制模式：获取父ViewModel的IsEditingMode
        var parentVm = ((FrameworkElement)container).DataContext as MainViewModel;
        return parentVm.IsEditingMode ? EditTemplate : DisplayTemplate;

        // 子项独立控制模式：直接取子项ViewModel的属性
        // var itemVm = item as ItemViewModel;
        // return itemVm?.IsEditingMode ?? false ? EditTemplate : DisplayTemplate;
    }
}

步骤3：在控件中使用

在ListView或单个内容控件中应用模板选择器：

<!-- ListView场景，同时开启虚拟化优化 -->
<ListView ItemsSource="{Binding ItemList}">
    <ListView.Resources>
        <local:ModeTemplateSelector x:Key="ModeSelector"
                                    DisplayTemplate="{StaticResource DisplayItemTemplate}"
                                    EditTemplate="{StaticResource EditItemTemplate}" />
    </ListView.Resources>
    <ListView.ItemTemplateSelector>
        <StaticResource ResourceKey="ModeSelector" />
    </ListView.ItemTemplateSelector>
    <!-- 开启控件回收虚拟化，减少ListView项的创建开销 -->
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel VirtualizationMode="Recycling" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

<!-- 单个数据项场景 -->
<ContentControl Content="{Binding CurrentItem}"
                ContentTemplateSelector="{StaticResource ModeSelector}" />

2. 使用 Style 触发器切换模板

若仅需全局控制模式，可直接通过DataTrigger在Style中切换模板，无需自定义选择器，更简洁：

<ContentControl Content="{Binding CurrentItem}">
    <ContentControl.Style>
        <Style TargetType="ContentControl">
            <!-- 默认显示模式 -->
            <Setter Property="ContentTemplate" Value="{StaticResource DisplayItemTemplate}" />
            <!-- 编辑模式触发切换 -->
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsEditingMode}" Value="True">
                    <Setter Property="ContentTemplate" Value="{StaticResource EditItemTemplate}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

3. ListView 额外优化

针对大量数据的ListView，除了模板切换，还需配合以下优化：

• 开启虚拟化：如上述代码中的VirtualizingStackPanel，并设置VirtualizationMode="Recycling"，复用已创建的控件。
• 延迟加载：若数据量极大，可实现分页或滚动加载，避免一次性加载所有项。
• 绑定优化：显示模式下使用Mode=OneWay，减少双向绑定的更新开销；必要时使用IsAsync=True让绑定在后台线程执行，避免阻塞UI。

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