Downloading Images and Indeterminate ProgressBar in Windows Phone

  • Article

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: https://www.jeff.wilcox.name/2010/08/performanceprogressbar/

 

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 = "https://..."; //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}" />

        </StackPanel>

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

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

                <Image.RenderTransform>

                    <TransformGroup>

                        <ScaleTransform x:Name="scale" />

                        <TranslateTransform x:Name="translate" />

                    </TransformGroup>

                </Image.RenderTransform>

            </Image>

        </Border>