在WPF中實作圖檔一邊下載下傳一邊顯示

原文 

在WPF中實作圖檔一邊下載下傳一邊顯示

當我們上網檢視一個較大的圖檔時，浏覽器能一邊下載下傳一邊顯示，這樣使用者體驗是比較好的，但在WPF程式中，當我們通過如下方式顯示一幅圖檔時：

    img.Source = new BitmapImage(new Uri("http://localhost:8000/www/test.jpg"));

隻能等到圖檔下載下傳完成時才能顯示出來，當圖檔較大時需要等待很久，即使在旁邊放個進度條給人的感覺仍然不好。

今天試了一下，這個效果還算比較容易實作的：在下載下傳過程中，每隔一秒鐘（也可以改成按下載下傳進度）将目前下載下傳的所有内容生成一個臨時圖檔，将控件顯示為臨時檔案即可。

代碼如下：

    public MainWindow()

    {

        InitializeComponent();

        DownloadImage();

    }

    async void DownloadImage()

        var request = WebRequest.Create("http://localhost:8000/www/test.jpg");

        using (var response = await request.GetResponseAsync())

        using (var destStream = new MemoryStream())

        {

            var responseStream = response.GetResponseStream();

            var downloadTask = responseStream.CopyToAsync(destStream);

            RefreshUI(downloadTask, destStream);

            await downloadTask;

        }

    async void RefreshUI(Task downloadTask, MemoryStream stream)

        await Task.WhenAny(downloadTask, Task.Delay(1000));            //每隔一秒重新整理一次

        var data = stream.ToArray();

        var tmpStream = new MemoryStream(data);        //TODO 當圖檔的頭沒有下載下傳到時，這兒可能抛異常

        var bmp = new BitmapImage();

        bmp.BeginInit();

        bmp.StreamSource = tmpStream;

        bmp.EndInit();

        img.Source = bmp;        //重新整理圖檔

        if (!downloadTask.IsCompleted)

            RefreshUI(downloadTask, stream, contentLength);