第一次加载时滚动速度非常慢，有大量图像 - 第二次加载使事情正常

Question

我有一个数据网格，它有一个单元格来显示包含大量图像的列表框。我已经定义了自定义列表框样式和数据网格，如下所示。

我定义了一个包含图像列表的产品类，并将产品列表绑定为数据网格的数据源。

<Style x:Key="ImageListBoxStyle" TargetType="ListBox">
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border BorderBrush="White" BorderThickness="1" CornerRadius="2" Margin="3" Background="Transparent">
                    <Image Source="{Binding Path=BitmapImage}" ToolTip="{Binding Path=ToolTip}" Stretch="Uniform" Width="40" Height="40"/>
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel Background="Transparent" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
</Style>
<DataGrid 
    x:Name="DataGridProduct" 
    BorderBrush="{x:Null}" 
    Background="#FF2D2D30"
    IsTabStop="True" 
    CanUserReorderColumns="False"
    AutoGenerateColumns="False"
    SelectionMode="Single"
    CanUserAddRows="False"
    CanUserDeleteRows="False"
    CanUserResizeColumns="False"
    CanUserResizeRows="False"
    CanUserSortColumns="False"
    HeadersVisibility="None"
    HorizontalGridLinesBrush="SlateGray"
    BorderThickness="3"
    HorizontalScrollBarVisibility="Disabled"
    VerticalScrollBarVisibility="Auto"
    IsReadOnly="True"
    ItemsSource="{Binding RawProducts, Mode=OneWay, IsAsync=True}"
    GridLinesVisibility="Horizontal"
    SelectionChanged="ProductDataGridSelectionChanged"
    TabIndex="7"
    EnableRowVirtualization="True"
    EnableColumnVirtualization="True"
    VirtualizingStackPanel.IsVirtualizing="True"
    VirtualizingStackPanel.VirtualizationMode="Standard">
    <DataGrid.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
    </DataGrid.Resources>
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Background" Value="{Binding Converter={StaticResource ProductRowBackgroundConverter}, Mode=OneWay}" />
        </Style>
    </DataGrid.RowStyle>
    <DataGrid.Columns>
        <DataGridTemplateColumn Width="235" MinWidth="235" MaxWidth="235">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border BorderBrush="White" BorderThickness="2" CornerRadius="2" Background="Transparent" Margin="1">
                        <ListBox Style="{StaticResource ImageListBoxStyle}" ItemsSource="{Binding Path=Images}"  Background="#FF252526" SelectionChanged="GirdListBoxOnSelectionChanged" Padding="3"/>
                    </Border>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

类定义为：

public class RawProduct
{
    public List<ProductImage> Images { get; set; }
}
public class ProductImage
{
    public ProductImage(string imageFile)
    {
        BitmapImage = new BitmapImage(new Uri(imageFile));
        BitmapImage.DecodePixelWidth = 40;
        RenderOptions.SetBitmapScalingMode(BitmapImage, BitmapScalingMode.LowQuality);
        BitmapImage.Freeze();
    }
    public BitmapImage BitmapImage {get; set;}
}

产品

列表中有数百个产品（绑定到 datagrid），每个产品项包含 10-20 张图像。

我的问题是：当我在填充产品集合后第一次加载数据网格时，数据网格中的滚动变得非常缓慢和缓慢，有时甚至会抛出 OutofMemoryException。

但是，当我重新加载数据网格（清除产品列表并再次填充它）时 - 事情开始正常工作 - 滚动变得更加流畅，我认为没有问题。

我不确定第一次加载和第二次加载之间有什么区别，第二次事情变得正常。

Answer 1

将绑定设置为图像源上的一次性属性可以解决此问题。