tags:

views:

10

answers:

0

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>