Hi,
in this posts I am going to present a nice control I developed for asynchronously loading image using WPF.
This control is implemented into the PhotoLoader DLL and all the available functionalities are tested into a test client that is included into the solution. You can download PhotoLoder and Test client here.

Problem
If you try to load a lot of big images directly via Image’s Source property you will notice that your application will stuck. Performances became better when you load images via BitmapFrame and using the Thumbnail property, however not all images have embedded Thumbnail and, even if your images have it, your application will not responsive during loading.

Solution
I developed an additional attached property to be used with WPF Image and that allows Images to be loaded asynchronously by a background Thread. I put this property and others into the PhotoLoader DLL that can be used for free into your applications :)

The attached property performing asynchronous loading is the Loader.Source and it must be used in replace of Image.Source property.

PhotoLoader DLL provides also others Attached Properties that allows developers displaying and customizing the ‘waiting animation’ as well as managing errors.

Example of usage

                    <Image PhotoLoader:Loader.DisplayOption="FullResolution"
                           PhotoLoader:Loader.Source="{Binding Path=FirstFileInCollection}"
                           PhotoLoader:Loader.DisplayWaitingAnimationDuringLoading="{Binding Path=DisplayAnimationDuringLoading}"
                           PhotoLoader:Loader.DisplayErrorThumbnailOnError="{Binding Path=DisplayErrorImageOnError}">
                    </Image>

Screeshots
The following screenshots give you an idea about PhotoLoader Attached Properties functionalities.

Documentation – Loader Attached Properties
PhotoLoader exposes the following Attached Properties via the static Loader class:

  • Source: string representing the path of the image to display. Right now it is possible to specify only file names of images stored into a disk. Once set, the PhotoLoader automatically performs the asynchronous loading displaying a nice loading animation.
  • SourceType: it is an enum indicating the way used to specify the Source. Right now the only source type allowed is LocalDisk.
  • DisplayOption: it is an enum indicating the image resolution to be used for displaying the image. Supported resolutions: Preview and FullResolution. Notice that using FullResolution requires more memory than Preview modality. Avoid to display a large number of huge images using FullResolution for all, othxerwise an OutOfMemoryException can happen. Normally in an application only few images at time are displayed in full resolution and does not make sens displaying thumbnails using full resolution.
  • DisplayWaitingAnimationDuringLoading: boolean value used for displaying (or not) the default waiting animation during loading.
  • DisplayErrorThumbnailOnError: boolean value used for displaying (or not) a default thumbnail error in case the image cannot be loaded (wrong path, unknown image format…)
  • IsLoading: boolean value set by PhotoLoader indicating if the loading of the specified image is in progress or it is finished. It can be used for customizing loading animation.
  • ErrorDetected: boolean value set by PhotoLoader indicating if an error happened during loading. It can be used for managing the failed loading.
About these ads