Image viewer performance issues in WPF

Question

Hi all. I'm having issues with a image displayer in WPF. I've a ListView displaying ImageSources.

 <Setter Property="ItemsPanel">
        <Setter.Value>
          <ItemsPanelTemplate>
            <WrapPanel />
          </ItemsPanelTemplate>
        </Setter.Value>
      </Setter>

 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="{x:Type ListBox}">
    <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
     <ScrollViewer Padding="{TemplateBinding Padding}" Focusable="false">
      <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
     </ScrollViewer>
    </Border>
    <ControlTemplate.Triggers>
     <Trigger Property="IsEnabled" Value="false">
      <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
     </Trigger>
     <Trigger Property="IsGrouping" Value="true">
      <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
     </Trigger>
    </ControlTemplate.Triggers>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>
<DataTemplate x:Key="ImagesListerViewItemsTemplate" DataType="{x:Type ImageSource}" >
 <Border Height="150" Width="150" CornerRadius="0,0,0,0" BorderThickness="1,1,1,1" Margin="4,4,4,4" BorderBrush="#FF000000">
  <Border Margin="8,8,8,8" Background="#FFFFFFFF">
   <Border.BitmapEffect>
    <OuterGlowBitmapEffect GlowColor="#FFFFFFFF"/>
   </Border.BitmapEffect>
   <Image Source="{Binding}" />
  </Border>
 </Border>
</DataTemplate>

And to load the pictures :

   private static BitmapImage LoadDisplayableImage(System.IO.FileInfo file)
    {
        BitmapImage bi = new BitmapImage();
        bi.BeginInit();
        bi.DecodePixelWidth = 100;
        bi.DecodePixelHeight = 100;
        bi.UriSource = new Uri(file.FullName);
        bi.EndInit();

        return bi;
    }

But then my program is very slow when a want to scroll the ListView or when i try to resize the form with only 49 images. In comparison, Windows' Explorer can load up to 3000 images in my computer and display them all and is still very fast when i scroll it (faster than my 49 picture little sample).

So how can i achieve the same speed or approach it ?

Answer 1

I had the same problem and guess that it is because wrappanel that you use as an itemspanel is not virtualized, use virtualized panels like VirtualizedStackPanel instead or develop your VirtualizedWrapPanel and use it instead because there is no VirtualizedWrapPanel in WPF standard library yet

Answer 2

Their are a number of other sub-optimal attributes you have declared here.

For the most part, the largest impact on your performance would be the bitmap effect you have declared here, up until recently all bitmap effects were rendered via software only.

Also, you set CanContentScroll to false, that is NOT what the virtualized wrap panel has, that would be =true if you followed the example given by Arsen.

Also it looks like your doing some scaling here, another bad idea if your trying todo performance optimized application developmnet.

And that's a bad comparison, explorer displaying 3000 images is entirely different (obviously their is no bitmap effect being computed from Windows explorer).

Anyhow, their are a good number of other issues with your post but it seems you no longer have an account, these few here though would of definatly made major impact overall.