Downloading Images and Indeterminate ProgressBar in Windows Phone

The ProgressBar control in Windows Phone today looks beautiful in indeterminate mode, with the animating dots.  But it comes at a cost to performance - the dots stop animating when the UI thread is busy such as when loading a large image.  I was updating the previous slideshow sample to download images from an online site, when I ran into this.  When the image was loading, it looked like the application stopped responding.

Fortunately there is a workaround.  Jeff Wilcox has written about this in his blog, so if you have an Indeterminate ProgressBar, you can add this workaround:


To update the previous slideshow sample to download images from an online site, set the URI to the http link of the image:

    string source = "http://..."; //add link to your image

    BitmapImage bitmapImage = new BitmapImage(new Uri(source, UriKind.Absolute));

    bitmapImage.DownloadProgress += new EventHandler<DownloadProgressEventArgs>(bitmapImage_DownloadProgress);

    image1.Source = bitmapImage;


To show download progress to the user, handle the DownloadProgress to update a ProgressBar with the download progress.


    void bitmapImage_DownloadProgress(object sender, DownloadProgressEventArgs e)


        progressBar1.Value = e.Progress;





 Xaml (this uses the PerformanceProgressBar workaround from Jeff's blog post, and the ManipulationDelta and ManipulationCompleted events handlers from my previous blog post to add gestures handling to the image):

        <StackPanel x:Name="stackPanel1" HorizontalAlignment="Center" VerticalAlignment="Center">

            <TextBlock Text="Downloading image. Please wait." HorizontalAlignment="Center" VerticalAlignment="Center" />

            <ProgressBar x:Name="progressBar1" Width="300" Height="30" Minimum="0" Maximum="100" />

            <ProgressBar x:Name="progressBar2" IsIndeterminate="True" Width="300" Height="30" Style="{StaticResource PerformanceProgressBar}" />


        <Border BorderThickness="3" BorderBrush="Silver">

            <Image x:Name="image1" ManipulationDelta="image1_ManipulationDelta" ManipulationCompleted="image1_ManipulationCompleted">



                        <ScaleTransform x:Name="scale" />

                        <TranslateTransform x:Name="translate" />