提高将图像加载到 ComboBox 的性能

Question

我正在使用 WPF ComboBox 来填充国家列表，如下所示：

在 ComboBox 中，我有一个包含图像和 TextBlock 的 VirtualizingStackPanel：

<ComboBox.ItemTemplate>
                <DataTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal">
                        <Image Width="30" Height="30" Margin="0" Source="{Binding code, Converter={StaticResource ImageComboBoxConverter}}" VerticalAlignment="Center"/>
                        <TextBlock Margin="5" Text="{Binding country_Text}"/>
                    </VirtualizingStackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>

我正在使用一个简单的 DataBinding 转换器来检索我的标志文件。

问题是，填充该列表大约需要 3-4 秒。我可以应用某种缓冲或缓存技术来加快图像加载速度吗？

Answer 1

您需要虚拟化 ComboBox.ItemsPanel，而不是 .ItemTemplate。 ItemsPanel是用来显示所有控件的面板，而ItemTemplate是用来显示每个控件的。

Virtualized StackPanel 所做的只是不渲染不可见的项目。相反，它只呈现可见的项目（加上一些额外的滚动缓冲区），并会在您滚动时替换每个项目后面的数据。所以用它来显示每个单独的项目是没有用的，你需要改为使用它作为显示所有项目的面板。

您的代码可能看起来像这样：

<ComboBox ItemsSource="{Binding Countries}">
    <ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ComboBox.ItemsPanel>

    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Width="30" Height="30" Margin="0" Source="{Binding code, Converter={StaticResource ImageComboBoxConverter}}" VerticalAlignment="Center"/>
                <TextBlock Margin="5" Text="{Binding country_Text}"/>
            </StackPanel >
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

您可能还需要将这些属性中的一个或全部添加到 <ComboBox> 标签。

<ComboBox VirtualizingStackPanel.IsVirtualizing="True"           
          VirtualizingStackPanel.VirtualizationMode="Recycling"
          ScrollViewer.CanContentScroll="True" ...>

提高将图像加载到 ComboBox 的性能

Improve performance of loading images into ComboBox

wpf

image

data-binding

combobox

virtualization