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: http://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 = “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}” />

        </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>

 

 

 

Comments (2)

  1. Soon, i'll also start development for Windows Phone. This would be quite useful for me then.

  2. suharsya says:

    how to use this in viewmodel class?

Skip to main content