I have a screen in my WPF app that contains a ListView. The ListViews ItemPanel is a VirtualizingStackPanel. There are about 500 items in the ItemsSource. Each item contains an Image which is bound to a property called Image (a string path to the image). Using the bound image, the list renders very slowly (like 3-5 seconds). Once it's loaded it scrolls just fine.
If I remove the image, or make it a StaticResource the list (and therefore the screen) load very quickly. How can I speed up the rendering of my list while still being bound to my images?
ListView:
<ListView x:Name="PART_ProductList" ItemsSource="{Binding}"
Canvas.Top="368" Canvas.Left="75" ScrollViewer.CanContentScroll="False"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ItemContainerStyle="{StaticResource ProductFinderItem}" Height="550" Width="638" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.Template>
<ControlTemplate>
<Border SnapsToDevicePixels="true" >
<ScrollViewer VerticalAlignment="Top" CanContentScroll="True" Style="{StaticResource FavsScrollViewer}" Focusable="false" >
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</ListView.Template>
</ListView>
Items template:
<Style x:Name="PART_ItemStyle" x:Key="ProductFinderItem" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Button x:Name="PART_Item" Style="{StaticResource Button_ProductFinder_Item}" DataContext="{Binding}"
HorizontalAlignment="Center" VerticalAlignment="Top"
/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Button Style:
<Style x:Key="Button_ProductFinder_Item" TargetType="Button">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="489" Height="132" Margin="0,0,0,5">
<Image Name="Up" Source="{StaticResource Img_ProductFinder_FriendUp}" Stretch="UniformToFill"/>
<Image Name="Down" Source="{StaticResource Img_ProductFinder_FriendDn}" Visibility="Hidden" Stretch="UniformToFill"/>
<Image Name="DynamicFriend" Margin="-257.832,-318.168,94.832,-342.832"
Clip="M23.427778,82.011111 C23.427778,51.328625 48.300847,26.455556 78.983333,26.455556 L1049.3556,26.455556 C1080.038,26.455556 1104.9111,51.328625 1104.9111,82.011111 L1104.9111,566.73333 C1104.9111,597.41582 1080.038,622.28889 1049.3556,622.28889 L78.983333,622.28889 C48.300847,622.28889 23.427778,597.41582 23.427778,566.73333 z"
RenderTransformOrigin="0.5,0.5" Source="{Binding Image, Mode=OneTime}"> <!-- Change to {Binding Image} Source="{StaticResource Img_ProductFinder_TestBear}"when all images are there -->
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.18" ScaleY="0.18"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<TextBlock Name="DynamicName" Margin="167.831,56,0,0" FontFamily="Futura" FontSize="20" Foreground="#FF005CAB"
TextWrapping="Wrap" HorizontalAlignment="Left" Width="334.777" VerticalAlignment="Stretch" Height="Auto"
Text="{Binding ProductName}" Panel.ZIndex="999" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Up" Property="Visibility" Value="Hidden"/>
<Setter TargetName="Down" Property="Visibility" Value="Visible"/>
<Setter TargetName="DynamicFriend" Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="0.18" ScaleY="0.18"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform Y="4"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter TargetName="DynamicName" Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform Y="4"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter TargetName="DynamicName" Property="Foreground" Value="#FFFFFF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>