0

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

我已经定义了一个具有图像列表的产品类,并且我将产品列表绑定为数据网格的数据源。

<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;}
}

产品列表中有数百个产品(绑定到数据网格),每个产品项目包含 10-20 个图像。

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

但是,当我重新加载数据网格(清除产品列表并再次填充它)时 - 事情开始正常工作 - 滚动变得更顺畅,我看不出问题。

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

4

1 回答 1

1

在 Image Source 属性上将 Binding 设置为 OneTime 可以解决该问题。

于 2013-01-31T00:12:19.867 回答