WPF中VirtualizingStackPanel横向调整大小时无法重绘问题

问题描述 #

当使用包含垂直VirtualizingStackPanel的ItemsControl，且项内包含启用TextWrapping="Wrap"的TextBlock时，横向调整父容器（窗口）尺寸到某个阈值以下时，TextBlock无法自动重绘换行，只有上下滚动后才会更新布局；但尺寸大于该阈值时重绘正常。此问题仅在开启虚拟化时出现。

复现代码 #

XAML代码

<Window x:Class="WpfTesting.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTesting"
        mc:Ignorable="d"
        d:DataContext="{d:DesignInstance local:MainWindow}"
        Title="MainWindow" Height="450" Width="800">
    <ItemsControl ItemsSource="{Binding LongStrings}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Margin="5" 
                        Padding="5"
                        Background="Gray"
                        BorderBrush="Black"
                        BorderThickness="2"
                        CornerRadius="8">
                    <TextBlock TextWrapping="Wrap"
                               Text="{Binding}"/>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.Template>
            <ControlTemplate TargetType="ItemsControl">
                <ScrollViewer CanContentScroll="True"
                              Focusable="False">
                    <ItemsPresenter />
                </ScrollViewer>
            </ControlTemplate>
        </ItemsControl.Template>
    </ItemsControl>
</Window>

后台代码

public partial class MainWindow : Window
{
    public List<string> LongStrings { get; }
    
    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
        LongStrings = Enumerable.Range(1, 20)
            .Select(_ => new string(Enumerable.Repeat('a', 1000).ToArray()))
            .ToList();
    }
}

问题原因 #

这是VirtualizingStackPanel的虚拟化机制导致的——为了优化性能，虚拟化面板只会维护当前可见区域内项的布局状态，对于已缓存的项（即使可见），当容器宽度变化时，不会自动触发重新测量和布局。只有当项被滚动出视图再滚回，或者面板强制刷新时，才会重新计算布局并更新TextBlock的换行。

解决方案 #

方案1：禁用虚拟化（简单但牺牲性能） #

如果数据量不大，可以直接关闭虚拟化，让StackPanel负责布局，此时宽度变化会自动触发所有项的重绘：
修改ItemsPanelTemplate为普通StackPanel：

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

或者保留VirtualizingStackPanel但禁用虚拟化：

<ItemsControl VirtualizingStackPanel.IsVirtualizing="False">
    <!-- 其他内容不变 -->
</ItemsControl>

方案2：绑定TextBlock宽度到ScrollViewer视口宽度 #

让TextBlock实时感知视口宽度变化，主动触发换行：
修改DataTemplate中的TextBlock，添加宽度绑定（需减去Border的Margin和Padding总和，避免超出边界）：

<TextBlock TextWrapping="Wrap"
           Text="{Binding}"
           Width="{Binding RelativeSource={RelativeSource AncestorType=ScrollViewer}, Path=ViewportWidth, Converter={local:SubtractValueConverter}, ConverterParameter=24}" />

对应的转换器后台代码：

public class SubtractValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double width && int.TryParse(parameter.ToString(), out int subtract))
        {
            return width - subtract;
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

并在XAML中引用转换器：

xmlns:local="clr-namespace:WpfTesting"
<!-- ... -->
<Window.Resources>
    <local:SubtractValueConverter x:Key="SubtractValueConverter" />
</Window.Resources>

方案3：强制VirtualizingStackPanel在宽度变化时刷新布局 #

通过监听窗口尺寸变化，强制VirtualizingStackPanel重新测量布局：
首先给ItemsControl命名：

<ItemsControl x:Name="itemsControl" ItemsSource="{Binding LongStrings}">
    <!-- 其他内容不变 -->
</ItemsControl>

然后修改后台代码：

public partial class MainWindow : Window
{
    public List<string> LongStrings { get; }
    private VirtualizingStackPanel? _virtualizingPanel;

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
        LongStrings = Enumerable.Range(1, 20)
            .Select(_ => new string(Enumerable.Repeat('a', 1000).ToArray()))
            .ToList();
        this.Loaded += MainWindow_Loaded;
        this.SizeChanged += MainWindow_SizeChanged;
    }

    private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        // 查找VirtualizingStackPanel
        _virtualizingPanel = FindVisualChild<VirtualizingStackPanel>(itemsControl);
    }

    private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        // 宽度变化时强制刷新布局
        if (_virtualizingPanel != null && e.WidthChanged)
        {
            _virtualizingPanel.InvalidateMeasure();
            _virtualizingPanel.InvalidateArrange();
        }
    }

    // 辅助方法：查找可视化子元素
    private T? FindVisualChild<T>(DependencyObject parent) where T : DependencyObject
    {
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
        {
            var child = VisualTreeHelper.GetChild(parent, i);
            if (child is T tChild)
                return tChild;
            var result = FindVisualChild<T>(child);
            if (result != null)
                return result;
        }
        return null;
    }
}

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