Intersoft ClientUI Documentation
ImageLoader
Intersoft ClientUI 8 > ClientUI Controls > Control Library > UI Controls Overview > ImageLoader

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.

Using ImageLoader

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.

XAML
Copy Code 
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <Intersoft:ImageLoader x:Name="Logo" Width="260" Height="61" ImageSource="http://www.intersoftpt.com/WebResources/Images/IntersoftSolutions_logo.png" AutoLoad="False"></Intersoft:ImageLoader>
    <Button Click="Button_Click" Content="Load Image" HorizontalAlignment="Center"></Button>
</StackPanel>
C#
Copy Code 
private void Button_Click(object sender, RoutedEventArgs e)
{
    this.Logo.LoadImage();
}

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.

XAML
Copy Code 
<Intersoft:ImageLoader Height="100" Width="100" ImageSource="www.mywebsite.com/photo1.jpg" UseDefaultImage="True" DefaultImageSource="LoaderImage.png"/>

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.

XAML
Copy Code 
<Intersoft:ImageLoader Height="100" Width="100" ImageSource="www.mywebsite.com/photo1.jpg" UseDefaultImage="True" DefaultImageSource="LoaderImage.png" DisplayLoader="False"/>

Loaded Animation

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.

XAML
Copy Code 
<Intersoft:ImageLoader Height="100" Width="100" ImageSource="www.mywebsite.com/photo1.jpg" UseAnimation="False"/>

Loading Image to Target Element

This is an advanced feature of ImageLoader where you can redirect the image loaded by ImageLoader to another Image element or an ImageBrush.

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.

XAML
Copy Code 
<Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush Stretch="Fill"/>
        </Grid.Background>
        <Intersoft:ImageLoader HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="100" TargetDisplay="{Binding Background, ElementName=LayoutRoot}" ImageSource="/Chrysanthemum.jpg"/>        
</Grid>

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 properties allow you to easily customize some layouting aspects related to the Image and UXProgressBar element that used internally by ImageLoader control.

You can also use the LoaderStyle to customize the UXProgressBar style individually.

Handling Events

ImageLoader provides three events related to download progress. The following list describes the events that are available in ImageLoader.

These events are built using routed events architecture. To learn more how to handle routed event, see Routed Events Overview.

See Also
ImageLoader Class