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: 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>
Comments
Anonymous
August 19, 2010
Soon, i'll also start development for Windows Phone. This would be quite useful for me then.Anonymous
January 03, 2012
how to use this in viewmodel class?