Benjamin Roux

Silverlight Expert - Silverlight Fan - MVP Client App Dev

[Silverlight] An image loading control

Re,

Ok the title is not really explicit but in this post we’re going to see an image control which display the busy pointer that we saw in my previous post, until the image be loaded.

First we create the Xaml composed with two controls: an image and the Busy pointer.

<UserControl x:Class="xxx.ImageProgress"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:xxx">
    <Grid x:Name="LayoutRoot" Background="White">
        <Image x:Name="Image" Stretch="Fill" />
        <local:BusyPointer x:Name="Buffer" />
    </Grid>
</UserControl>

And some C#

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
 
namespace xxx
{
    public partial class ImageProgress : UserControl
    {
        public ImageProgress()
        {
            InitializeComponent();
        }
 
        public BitmapImage Source
        {
            get { return (BitmapImage)GetValue(SourceProperty); }
            set
            {
                SetValue(SourceProperty, value);
                value.DownloadProgress += new EventHandler<DownloadProgressEventArgs>(value_DownloadProgress);
                this.Image.Source = value;
                this.BeginAnimation();
            }
        }
 
        void value_DownloadProgress(object sender, DownloadProgressEventArgs e)
        {
            if (e.Progress == 100)
            {
                StopAnimation();
            }
        }
 
        // Using a DependencyProperty as the backing store for Source.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty SourceProperty =
            DependencyProperty.Register("Source", typeof(BitmapImage), typeof(ImageProgress), new PropertyMetadata(new PropertyChangedCallback(OnSourceChanged)));
 
        private static void OnSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            ImageProgress source = sender as ImageProgress;
            if (source != null) source.Source = (BitmapImage)e.NewValue;
        }
 
        private void BeginAnimation()
        {
            this.Buffer.IsBusy = true;
        }
 
        private void StopAnimation()
        {
            this.Buffer.IsBusy = false;
            this.Buffer.Visibility = Visibility.Collapsed;
        }
    }
}

I created a Dependency Property for the image’s source. When this DP is changed, I download the image from the source we I display the busy pointer. When the download is complete I stop the animation and hide it.

This control can be really useful if your application uses images from external source like Flickr or Bing.

We could check the ImageFailed event for notifying the user if there is an error.

Live sample: http://broux.developpez.com/public/SL/ImageProgress/index.html (the image is 4MB).

Comments

[Silverlight] An image loading control - Benjamin Roux said:

Pingback from  [Silverlight] An image loading control - Benjamin Roux

# January 11, 2010 3:55 PM

[Silverlight] An image loading control said:

Pingback from  [Silverlight] An image loading control

# January 11, 2010 8:20 PM

Imran Shaik said:

You Serious? A User Control?

# January 12, 2010 2:46 PM

Benjamin Roux said:

Euh yeah. It's quick & dirty coding. You can easily transform it into custom control but I don't really see the plus!

# January 12, 2010 3:02 PM

Twitter Trackbacks for [Silverlight] An image loading control - Benjamin Roux [asp.net] on Topsy.com said:

Pingback from  Twitter Trackbacks for                 [Silverlight] An image loading control - Benjamin Roux         [asp.net]        on Topsy.com

# January 13, 2010 6:00 PM

Links (1/14/2010) « Steve Pietrek-Everything SharePoint/Silverlight said:

Pingback from  Links (1/14/2010) &laquo; Steve Pietrek-Everything SharePoint/Silverlight

# January 14, 2010 6:53 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)