ImageLoader is an innovative control that supports loading for embedded, internal and external image. The ImageLoader provides built-in features to show the image loading progress, which can be optionally disabled or further customized through property sets.
It also includes an elegant fading animation to prevent image flickering when the image is completely downloaded. Many of the progress bar and image related settings can be easily adjusted through property sets, such as ProgressBarTextVisibility, ProgressBarText, ProgressBarMargin, UseLoader, and much more.
By default, ImageLoader automatically loads the image specified in ImageSource property when the page is loaded. If you do not want to load the image directly, you can set the AutoLoad property to False. You can programmatically load the image in code by using LoadImage() API.
The following examples show how to use the ImageLoader control using XAML and code.
Configuring Default Image
When an image is being loaded, a progresss bar is displayed to show the download progress in real-time. In some scenarios, you may want to display an image along with the progress bar to enhance the user interface. This scenario can be achieved by using the default image feature, which is shown along with the image. The default image works in conjunction with the progress bar.
To enable this default image, you set the UseDefaultImage property to True, and then set the DefaultImageSource property to an image source. It is recommended to use an image within your project rather than an external image for a better user experience.
Hiding the Progress Bar
To hide the progress bar, you set the DisplayLoader property to False. This might be useful for certain scenarios where using default image alone is more appealing.
When an image is loaded, the built-in animation will fade out the progress bar along with the default image and fade in the actual image. This animation delivers a smooth user experience particularly when you load an image from external source. You can also disable this feature if necessary by setting the UseAnimation property to False.
Loading Image to Target Element
A typical scenario that makes sense to use this approach is when you want to load an external image and apply it to the Background of a UIElement, for example a Border or a Grid, and at the same time showing the download progress indicator which is more compelling to users.
Customizing ImageLoader Appearance
The ImageLoader is consisted of two fundamental elements, an Image element and a UXProgressBar element. The ImageLoader provides several common properties that bound directly to these elements such as:
These events are built using routed events architecture. To learn more how to handle routed event, see Routed Events Overview.