Download mit dem Silverlight-Downloader

Mit Silverlight ist es möglich dynamisch Daten nach zu laden. Das hat den Vorteil, das man nur bei wirklichen Bedarf Daten laden muss. Dadurch kann man seine Anwendung sehr gut für niedrige Bandbreiten optimieren.

Um die Bandbreite noch besser zu ausnutzen zu können unterstützt Silverlight das ZIP-Format. Das folgende Beispiel zeigt den notwendigen Code zu Download von 23 Bildern, die sich innerhalb einer ZIP-Datei befinden und anschließenden dynamisch zur Anwendung hinzugefügt werden.

In diesem Beispiel habe ich zusätzlich einen Fortschrittsbalken erstellt, der auf das Event DownloadProgressChanged reagiert und anzeigt wieviel Prozent bereits geladen wurden.

Das gesamte Beispiel kann hier herunter geladen werden.

 _0_Base.Scene.prototype =
{
    handleLoad: function(plugIn, userContext, rootElement) 
    {
        this.plugIn = plugIn;
        
        this.progressControl = plugIn.content.findName("ProgressControl");
        this.progressControl.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.progressControlMouseDown));
        
        var progressBar = plugIn.content.findName("ProgressBar");
        progressBar.width = 0; 
    },
    
    progressControlMouseDown: function (sender, object)
    {
        // alert('progressBarMouseDown');
        
        // Create a Downloader object.
        var downloader = this.plugIn.createObject("downloader");
        
        // Add DownloadProgressChanged and Completed events.
        downloader.addEventListener("downloadProgressChanged", onDownloadProgressChanged);
        downloader.addEventListener("completed", onCompleted);
        
        // Start download
        downloader.open("GET", "muc.zip");

        // Execute the Downloader request.
        downloader.send();
    }
}

function onDownloadProgressChanged(sender, eventArgs)
{
    // Calculate the downloaded percentage.
    var percentage = Math.floor(sender.downloadProgress * 100);

    var plugIn = sender.getHost();
    var progressText = plugIn.content.findName("ProgressText");
    var progressBar = plugIn.content.findName("ProgressBar");
    var progressRectangle = plugIn.content.findName("ProgressRectangle");

    // Update the Rectangle and TextBlock objects of the visual progress indicator.
   
    var offset = progressRectangle.width / 100;
    progressText.text = percentage + " %";
    progressBar.width = percentage * offset; 
}

function onCompleted(sender, eventArgs)
{
    alert("onCompleted");
    var plugIn = sender.getHost();
    var container = plugIn.content.findName("Container");
    
    for(var i=1; i<24; i++)
    {
        var xaml = '<Image Canvas.Left="' + i * 10 + '" Canvas.Top="' + i * 10 + '" Width="160" Height="120" />';
        var img = plugIn.content.createFromXAML(xaml);
        img.setSource(sender, "muc"+i+".jpg");
        container.children.add(img);
    }
}