I'm playing around with Silverlight Images and a listbox. Here's the scenario.

Using WCF I grab some images out of my database and, using a custom class, add items to a listbox. It's working great right now. The images load and appear in the listbox, just like I want them to. I want to refine and improve my control just a little more so here's what I've done.

<ListBox x:Name="lbMedia" Background="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <c:WrapPanel></c:WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <im:MediaManagerItem></im:MediaManagerItem>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListBox>

Just a simple listbox. The datatemplate is a custom control and literally it contains a contentpresenter, nothing more.

Now the class that I use as the ItemSource has a Source property. Here's what it looks like.

private UIElement _LoadingSource;
    private UIElement _Source;
    public UIElement Source
    {
        get
        {
            if( _Source == null )
            {
                LoadMedia();
                return new LoadingElement();
            }

            return _Source;
        }

        set
        {
            if( !( value is Image ) && !( value is MediaElement ) )
                throw new Exception( "Media Source must be an Image or MediaElement" );

            _Source = value;
            NotifyPropertyChanged( "Source" );

        }
    }

Essentially, on the get I check if the image/video has been loaded from the server. If it hasn't I return a loading control, then I proceed to load my image. Here's the code for my LoadMedia method.

private void LoadMedia()
    {
        if( _Media != null && _Media.MediaId > 0 )
        {
            //load the media
            BackgroundWorker mediaLoader = new BackgroundWorker();
            mediaLoader.DoWork += mediaLoader_DoWork;
            mediaLoader.RunWorkerCompleted += mediaLoader_RunWorkerCompleted;
            mediaLoader.RunWorkerAsync();
        }
    }

    void mediaLoader_RunWorkerCompleted( object sender, RunWorkerCompletedEventArgs e )
    {
        if(_LoadingSource != null)
            Source = _LoadingSource;
    }

    void mediaLoader_DoWork( object sender, DoWorkEventArgs e )
    {
        string url = App.siteUrl + "download.ashx?MediaId=" + _Media.MediaId;

        SmartDispatcher.BeginInvoke( () =>
                                        {
                                            Image img = new Image();
                                            img.Source = new BitmapImage( new Uri( url, UriKind.Absolute ) );
                                            _LoadingSource = img;

                                        } );

    }

So as the code goes, I create a new image element, and set the Uri. The images that I'm downloading take about 2-5 seconds to download.

Now for the problem / fine tuning.

Right now my code will check if the source is null and if it is, return a loading element, and run the background worker to get the image. Once the background worker finishes, set the source to the new downloaded image.

I want to be able to set the Source property AFTER the image has fully downloaded. Right now my loading element appears for a brief second, then there's nothing for 2-5 seconds until the image finishes downloading. I want the loading elements to stick around until the image is completely ready but I'm having troubles doing this.

I've tried adding a a listener to the ImageOpened event and update the Source property then, but it doesn't work.

Thanks in advance.