Question

I have the following code in silverlight for windows phone :

 <Border CornerRadius="0" x:Name="brdTest" BorderBrush="Black" BorderThickness="4" Width="100" Height="60">
                                <Border.Background>
                                    <ImageBrush x:Name="backgroundImageBrush" Stretch="Fill">
                                        <ImageBrush.ImageSource>
                                            <BitmapImage x:Name="bmpBackground" UriSource="http://www.images.com/1.jpg">
                                            </BitmapImage>
                                        </ImageBrush.ImageSource>
                                    </ImageBrush>
                                </Border.Background>
                            </Border>

How can i add a loading activity indicator from silverlight toolkit in the image place while the image(http://www.images.com/1.jpg) loads and remove it when the image has loaded?

Do the images load in a background thread? Or do they block the main UI Thread? (i.e. i would like to use this in a template for lots of list box items)

UPDATE I tried this code and loaded a big image (70MP), and while the image was loading, the app’s main UI thread didn’t froze

Answer 1

You could use a ProgressOverlay, or a PerformanceProgressBar. Here’s an example with a ProgressOverlay:

<Grid>
    <Border CornerRadius="0" x:Name="brdTest" BorderBrush="Black" BorderThickness="4" Width="400" Height="360">
        <Border.Background>
            <ImageBrush x:Name="backgroundImageBrush" Stretch="Fill">
                <ImageBrush.ImageSource>
                    <BitmapImage x:Name="bmpBackground" 
                                 UriSource="http://www.bestmotherofthegroomspeeches.com/wp-content/themes/thesis/rotator/sample-4.jpg"
                                 ImageOpened="bmpBackground_ImageOpened">
                    </BitmapImage>
                </ImageBrush.ImageSource>
            </ImageBrush>
        </Border.Background>
    </Border>

    <Controls:ProgressOverlay 
        x:Name="overlay"
        Width="400" Height="360">
        <Controls:ProgressOverlay.Content>
            <StackPanel>
                <TextBlock HorizontalAlignment="Center">Loading Image</TextBlock>
                <toolkit:PerformanceProgressBar IsIndeterminate="True"/>
            </StackPanel>
        </Controls:ProgressOverlay.Content>
    </Controls:ProgressOverlay>
</Grid>

And in the bmpBackground_ImageOpened event handler you add overlay.Hide(); which hides the OverlayProgress.

This approach seems better than just using a PerformanceProgressBar alone, because it gives the user an indication on what’s going on.

PS: The OverlayProgress didn’t work properly for me until I added a PerformanceProgressBar in it’s “Content” as shown in the code. (try removing it and see if it works for you).

I hope this helps 🙂