Silverlight 2学习教程（七）：在Silverlight 2.0中制作资源加载进度条

 

Silverlight 2.0去掉了原来的downloader对象，代之以WebClient对象。WebClient类为Silverlight插件提供了一整套的HTTP客户端功能。可以下载应用程序数据，比如XAML内容，附加的程序集或者诸如图片的媒体文件。WebClient类可以根据程序的需要下载内容，可以异步呈现或者利用下载的内容，而不是随HTML页面一起下载。如果你要按照一定的序列替换Silverlight内容，不需要刷新页面。比较常见的来自是从视频库中播放视频，但本节是以播放图片为例子的。

关于WebClient

WebClient请求是异步的，大部分的交互操作都是依靠事件处理器来完成的。通常，需要定义如下中的一个或者多个处理器函数。

·      ■ DownloadStringCompleted

·      ■ OpenReadCompleted

·      ■ DownloadProgressChanged

根据你请求的资源是字符串还是流，需要使用不同的API，当请求一个字符串时，可以调用下面的方法：

·      ■ DownloadStringAsync(Uri)

·      ■ DownloadStringAsync(Uri, Object)

然后再处理DownloadStringCompleted事件。

当请求的是一个流时，可以调用下面的方法：

·      ■ OpenReadAsync(Uri)

·      ■ OpenReadAsync(Uri, Object)

然后处理OpenReadCompleted事件。

OpenReadCompleted事件处理器基本的签名如下：

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e) {
...
}

这个处理器中最相关的API是OpenReadCompletedEventArgs参数的Result属性，这个属性是Stream类型的，可以直接使用这个属性，或者调用需要Stream对象的方法，也可以使用StreamReader对象或者其他访问流的API。

下面就是一个下载图片的例子，本例子通过输入文件路径，然后以进度条显示下载的状态，下载完毕后进行显示。
需要注意的是：给OpenReadAsync和DownloadStringAsync API制定的URI通常采用相对路径，WebClient不支持FILE协议下载，在进行测试的时候需要注意，必须建立站点进行测试。可以使用HTTPS协议，但包含这个插件的HTML也必须同时是HTTPS协议才可以。在URI中不能使用反斜杠（/），必须使用正斜杠（/）。

例子代码如下：

Page.xaml：

<UserControl x:Class="SilverlightApplication3.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="1024" Height="800">
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Canvas.Top="0">
            <Rectangle  Name="progressRectangle"  Canvas.Left="20" Canvas.Top="10" Height="10" Width="0"  Fill="Navy" />
            <Rectangle  Canvas.Top="9" Canvas.Left="19" Height="12" Width="202" StrokeThickness="1" Stroke="Black" />
            <TextBlock  x:Name="progressText" Canvas.Top="6" Canvas.Left="230" Text="0%" FontSize="12" />
            <TextBox x:Name="filepath" Canvas.Left="20" Width="100" Canvas.Top="26" Text="p1.jpg"></TextBox>
            <Button Canvas.Top="26" Canvas.Left="130" Content="下载文件" Click="Button_Click"></Button>
            <Image Canvas.Left="60" x:Name="img" Canvas.Top="60" Width="1024"></Image>
        </Canvas>
    </Grid>
</UserControl>

Page.xaml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Net;
using System.IO;
using System.Windows.Resources;

namespace SilverlightApplication3
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
          img.Source = null;
            WebClient wc = new WebClient();
            if (wc.IsBusy)
            {
                wc.CancelAsync();
            }
            wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
            wc.DownloadProgressChanged += new DownloadProgressChangedEventHandler(wc_DownloadProgressChanged);
            wc.OpenReadAsync(new Uri(filepath.Text, UriKind.Relative));

        }

        void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
            BitmapImage imgsrc = new BitmapImage();
            imgsrc.SetSource(e.Result as Stream);
            img.Source = imgsrc;
        }

        void wc_DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)
        {
            progressText.Text = e.ProgressPercentage.ToString() + "%";
            progressRectangle.Width = (double)e.ProgressPercentage * 2;
        }
    }
}

运行过程中的界面和最终运行结果如下：