たくさんの画像を含むリストボックスを表示するセルを持つデータグリッドがあります。カスタム リストボックス スタイルとデータグリッドを次のように定義しました。
画像のリストを持つ製品クラスを定義し、製品のリストをデータグリッドのデータソースとしてバインドしています。
<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 がスローされることさえあります。
ただし、データグリッドをリロードすると(製品リストをクリアして再度入力すると)、正常に動作し始め、スクロールがスムーズになり、問題はありません。
最初の読み込みと 2 回目の読み込みの違いが何であるかはわかりませんが、2 回目は正常になります。