如何在Windows Phone 8中显示来自网络的图像的进度条？

Question

我在Flickr上有图像的URI列表。 我使用Windows Phone工具包中的手势来显示图像并处理轻拂事件。 由于图像在网络上，因此可以很好地设置源，但是进度条已经快速设置好，所以它会立即崩溃（隐藏），因为它已经设置了图像源，并且手机仍然必须下载并显示它。

我希望显示进度条，直到图像完全可见。 （使用WebClient有用吗？）

这是一个简单的视频，准确显示正在发生的事情。 不要介意图片，我只是拿起第一件事。

影片连结

代码如下：

  private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
                {
                    if (((e.Angle <= 180 && e.Angle >= 135) || (e.Angle < 225 && e.Angle > 180)) && e.Direction.ToString().Equals("Horizontal"))
                    {
                        progess_bar.Visibility=Visibility.Visible;
                        if(index<photoslist.Count-1)
                        index++;
                        image.Source = new BitmapImage(new Uri( photoslist[index].LargeUrl , UriKind.Absolute));
                        progess_bar.Visibility = Visibility.Collapsed;
                    }
                    else if (((e.Angle <= 45 && e.Angle >= 0) || (e.Angle < 360 && e.Angle >= 315)) && e.Direction.ToString().Equals("Horizontal"))
                    {
                        progess_bar.Visibility = Visibility.Visible;
                        if (index > 0)
                            index--;
                        else
                            index = 0;
                        image.Source = new BitmapImage(new Uri( photoslist[index].LargeUrl, UriKind.Absolute));
                        progess_bar.Visibility = Visibility.Collapsed;
                    }
                }

Answer 1

在下载完成之前，在Image上设置Source属性不会阻塞正在运行的线程，因此代码将继续执行，并且进度条将立即不可见。

如果要提供真正的进度条功能，则必须手动下载图像并根据进度更新进度条。 但是，图像通常不是大文件。 在显示图片下载完成之前，最好显示一些加载动画。

Answer 2

对于那些感兴趣的人，我有下面的可行的粗略代码解决方案。 （请注意，它尚未优化，您可以对其进行处理）

private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
        {
            if (((e.Angle <= 180 && e.Angle >= 135) || (e.Angle < 225 && e.Angle > 180)) && e.Direction.ToString().Equals("Horizontal"))
            {
                if (index < photoslist.Count - 1)
                {
                    index++;
                    downloadImage();
                }
                //image_big.Source = new BitmapImage(new Uri( photoslist[index].LargeUrl , UriKind.Absolute));
            }
            else if (((e.Angle <= 45 && e.Angle >= 0) || (e.Angle < 360 && e.Angle >= 315)) && e.Direction.ToString().Equals("Horizontal"))
            {
                if (index > 0)
                {
                    index--;
                    downloadImage();
                }
                //image_big.Source = new BitmapImage(new Uri( photoslist[index].LargeUrl, UriKind.Absolute));

            }
        }

        private void downloadImage()
        {
            progess_bar.Visibility = Visibility.Visible;
            WebClient wc = new WebClient();
            wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
            wc.OpenReadAsync(new Uri(photoslist[index].LargeUrl, UriKind.Absolute), wc);
        }

        private void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
            if (e.Error == null && !e.Cancelled)
            {
                try
                {
                    BitmapImage image = new BitmapImage();
                    image.SetSource(e.Result);
                    image_big.Source = image;
                    progess_bar.Visibility = Visibility.Collapsed;
                }
                catch (Exception ex)
                {
                    MessageBox.Show("Cannot get the feed right now.Please try later.");
                }
            }
        }
    }