WPF ListBox 虚拟化搞砸了显示的项目

Question

问题

我们需要在 WPF ListBox 控件中有效地显示大量 (>1000) 对象。
我们依靠 WPF ListBox 的虚拟化(通过 VirtualizingStackPanel)来有效地显示这些项目。

错误 : WPF ListBox 控件在使用虚拟化时无法正确显示项目。

如何重现

我们已将问题提炼为如下所示的独立 xaml。

将 xaml 复制并粘贴到 XAMLPad 中。

最初，ListBox 中没有选定的项目，因此正如预期的那样，所有项目都具有相同的大小并且它们完全填满了可用空间。

现在，单击第一项。
正如预期的那样，由于我们的 DataTemplate，所选项目将展开以显示其他信息。

正如预期的那样，这会导致出现水平滚动条，因为所选项目现在比可用空间宽。

现在使用鼠标单击并向右拖动水平滚动条。

错误:未选择的可见项目不再拉伸(stretch)以填充可用空间。所有可见项目应具有相同的宽度。

这是一个已知的错误？
有没有办法通过 XAML 或以编程方式解决这个问题？

<Page 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Page.Resources>

        <DataTemplate x:Key="MyGroupItemTemplate">
            <Border Background="White"
                    TextElement.Foreground="Black"
                    BorderThickness="1"
                    BorderBrush="Black"
                    CornerRadius="10,10,10,10"
                    Cursor="Hand"
                    Padding="5,5,5,5"
                    Margin="2"
                    >
                <StackPanel>
                    <TextBlock Text="{Binding Path=Text, FallbackValue=[Content]}" />
                    <TextBlock x:Name="_details" Visibility="Collapsed" Margin="0,10,0,10" Text="[xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx]" />
                </StackPanel>
            </Border>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}"
                             Value="True">
                    <Setter Property="TextElement.FontWeight"
                            TargetName="_details"
                            Value="Bold"/>
                    <Setter Property="Visibility"
                            TargetName="_details"
                            Value="Visible"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

    </Page.Resources>

    <DockPanel x:Name="LayoutRoot">

        <Slider x:Name="_slider"
                DockPanel.Dock="Bottom" 
                Value="{Binding FontSize, ElementName=_list, Mode=TwoWay}" 
                Maximum="100"
                ToolTip="Font Size"
                AutoToolTipPlacement="BottomRight"/>

        <!--
          I want the items in this ListBox to completly fill the available space.
          Therefore, I set HorizontalContentAlignment="Stretch".

          By default, the WPF ListBox control uses a VirtualizingStackPanel.
          This makes it possible to view large numbers of items efficiently.
          You can turn on/off this feature by setting the ScrollViewer.CanContentScroll to "True"/"False".

          Bug: when virtualization is enabled (ScrollViewer.CanContentScroll="True"), the unselected
               ListBox items will no longer stretch to fill the available horizontal space.
               The only workaround is to disable virtualization (ScrollViewer.CanContentScroll="False").
        -->

        <ListBox x:Name="_list"
                 ScrollViewer.CanContentScroll="True"
                 Background="Gray" 
                 Foreground="White"
                 IsSynchronizedWithCurrentItem="True" 
                 TextElement.FontSize="28"
                 HorizontalContentAlignment="Stretch"
                 ItemTemplate="{DynamicResource MyGroupItemTemplate}">
            <TextBlock Text="[1] This is item 1." />
            <TextBlock Text="[2] This is item 2." />
            <TextBlock Text="[3] This is item 3." />
            <TextBlock Text="[4] This is item 4." />
            <TextBlock Text="[5] This is item 5." />
            <TextBlock Text="[6] This is item 6." />
            <TextBlock Text="[7] This is item 7." />
            <TextBlock Text="[8] This is item 8." />
            <TextBlock Text="[9] This is item 9." />
            <TextBlock Text="[10] This is item 10." />
        </ListBox>

    </DockPanel>
</Page>

Answer 1

我花了比我应该做的更多的时间来尝试这个，并且无法让它发挥作用。我了解这里发生了什么，但是在纯 XAML 中，我无法弄清楚如何解决这个问题。我想我知道如何解决问题，但它涉及转换器。

警告:当我解释我的结论时，事情会变得复杂。

潜在的问题来自控件的宽度拉伸(stretch)到其容器的宽度这一事实。启用虚拟化后，宽度不会改变。在底层 ScrollViewer ListBox 内部, ViewportWidth属性对应于您看到的宽度。当另一个控件进一步延伸(您选择它)时，ViewportWidth仍然是一样的，但 ExtentWidth显示全宽。将所有控件的宽度绑定(bind)到 ExtentWidth 的宽度应该管用...

但事实并非如此。我将 FontSize 设置为 100 以便在我的情况下进行更快的测试。选择项目时，ExtentWidth="4109.13 .沿着树向下到您的 ControlTemplate 的 Border , 我看到 ActualWidth="4107.13" .为什么会有 2 个像素的差异？ ListBoxItem 包含一个带有 2 像素填充的边框，导致 ContentPresenter 呈现稍小一些。

我添加了以下 Style与 help from here允许我直接访问 ExtentWidth:

<Style x:Key="{x:Type ListBox}" TargetType="ListBox">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBox">
        <Border 
          Name="Border" 
          Background="White"
          BorderBrush="Black"
          BorderThickness="1"
          CornerRadius="2">
          <ScrollViewer 
            Name="scrollViewer"
            Margin="0"
            Focusable="false">
            <StackPanel IsItemsHost="True" />
          </ScrollViewer>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Border" Property="Background"
                    Value="White" />
            <Setter TargetName="Border" Property="BorderBrush"
                    Value="Black" />
          </Trigger>
          <Trigger Property="IsGrouping" Value="true">
            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

注意我给 ScrollViewer 添加了一个名字以此目的。

然后，我尝试将边框的宽度绑定(bind)到 ExtentWidth:

Width="{Binding ElementName=scrollViewer, Path=ExtentWidth}"

然而，由于 2 像素的填充，控件将在无限循环中调整大小，填充将 2 像素添加到 ExtentWidth。 ，它会调整边框宽度的大小，从而为 ExtentWidth 增加 2 个像素。等，直到您删除代码并刷新。

如果您添加了一个从 ExtentWidth 中减去 2 的转换器，我认为这可能会起作用。但是，当滚动条不存在(您没有选择任何内容)时， ExtentWidth="0" .因此，绑定(bind)到 MinWidth而不是 Width可能会更好，因此当没有滚动条可见时，项目会正确显示:

MinWidth="{Binding ElementName=scrollViewer, Path=ExtentWidth, Converter={StaticResource PaddingSubtractor}}"

一个 更好的解决方案如果您可以直接数据绑定(bind) MinWidth的 ListBoxItem本身。您可以直接绑定(bind)到 ExtentWidth，并且不需要转换器。但是我不知道如何访问该项目。

编辑:为了组织起见，这是执行此操作所需的剪辑。使其他一切都变得不必要:

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="MinWidth" Value="{Binding Path=ExtentWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollViewer}}}" />
</Style>