如何实现虚拟化ListBox中右对齐控件不被裁剪的列表项模板？

问题现象 #

向下滚动ListBox一页后缩小其宽度，右侧停靠的按钮会被裁剪，文本块不会自动缩小宽度或触发重新布局。替换数据模板中的DockPanel为Grid、在SizeChanged事件调用InvalidateMeasure/InvalidateArrange均无效；但向上滚动再向下滚动后，布局恢复正常。

原因定位 #

这是WPFUI虚拟化的已知行为问题：开启虚拟化后，VirtualizingStackPanel会缓存ListBoxItem的测量尺寸，当ListBox宽度变化时，已被虚拟化回收并复用的Item没有重新执行正确的测量逻辑，导致布局异常。你的XAML代码本身没有错误，属于WPF框架缓存机制的bug。

可行解决方法 #

方法1：禁用UI虚拟化（简单但不推荐大数据场景） #

直接关闭ListBox的虚拟化功能，修改ListBox属性：

<ListBox ... VirtualizingPanel.IsVirtualizing="False" ...>

缺点：数据量较大时，会显著降低滚动性能。

方法2：尺寸变化时强制重置虚拟化面板缓存 #

给ListBox添加SizeChanged事件，手动触发虚拟化面板的测量刷新：

1. 修改XAML中的ListBox：

<ListBox ... SizeChanged="ListBox_SizeChanged" ...>

2. 在后台代码添加事件处理逻辑：

using System.Windows.Media;

private void ListBox_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (sender is not ListBox listBox) return;
    
    // 遍历VisualTree找到VirtualizingStackPanel
    var decorator = VisualTreeHelper.GetChild(listBox, 0) as Decorator;
    if (decorator?.Child is not ScrollViewer scrollViewer) return;
    if (scrollViewer.Content is not VirtualizingStackPanel virtualPanel) return;
    
    // 强制刷新测量与滚动信息
    virtualPanel.InvalidateMeasure();
    scrollViewer.InvalidateScrollInfo();
}

该方法保留虚拟化的性能优势，同时解决布局异常问题。

方法3：绑定ListBoxItem宽度到容器实际宽度 #

让ListBoxItem的宽度始终跟随ListBox的实际宽度，避免缓存尺寸不更新：

1. 定义宽度转换器（抵消ListBox内边距、滚动条边框等额外宽度）：

using System;
using System.Globalization;
using System.Windows.Data;

namespace WpfApp1
{
    public class ListBoxItemWidthConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value is double width ? width - 20 : value;
            // 20为估算值，可根据ListBox的Padding、边框实际调整
        }

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

2. 在Window资源中声明转换器：

<Window.Resources>
    ...
    <local:ListBoxItemWidthConverter x:Key="ListBoxItemWidthConverter"/>
</Window.Resources>

3. 修改ListBoxItem的Style，添加宽度绑定：

<Style x:Key="ItemStyle" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=ActualWidth, Converter={StaticResource ListBoxItemWidthConverter}}"/>
</Style>

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