Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / XML
Article

Silverlight 1.1 Fun and Games

Rate me:
Please Sign up or sign in to vote.
4.91/5 (126 votes)
1 Nov 200727 min read 383.1K   816   238   98
Silverlight 1.1 Fun and Games

Contents

Introduction

OK so we've all got the hang of WPF right, so now we have another beast to slay, it's Silverlight. Silverlight is an internet browser plugin that rivals Adobe Flash for capabilities, and uses a cut down version of Windows Presentation Foundation (WPF) which used to be known as WPF/e (WPF everywhere).

Silverlight currently comes in two flavours, Silverlight 1.0 which is JavaScript based, and the slightly newer 1.1 Alpha which can use managed .NET code. I personally am not that fond of JavaScript so I have been putting the Silverlight mission off until version 1.1.

So now that the 1.1 alpha is out, I thought it high time that I got down and started writing a Silverlight article. I have to say I am fairly pleased with this article, and I think it covers most aspects of what Silverlight can currently do. Of course this may change over time, but let's just assume that things are the way they are right now.

Before we get started, there is one thing that you will really need in order to run the demo project, and that's Visual Studio 2008 Beta 2, which is available here, I went for the Professional edition, and it works a treat. Downloaded, installed and worked first time, unlike all other VS2008 versions I went for. Professional edition works, use that.

Assumptions

That the reader is .NET proficient and at least an average level web user, and is fairly familiar with ASP.NET and Visual Studio.

Getting Started With Silverlight 1.1/VS2008

One of the first things that you will notice when you start VS2008, is that there is a new project type available, yep you guessed it - a Silverlight project.

Image 1

Remember that Silverlight applications are web based, so the best place to start is probably with a ASP.NET web project. If we then proceed to add a Silverlight project to our existing Web project, we end up with two projects as shown below. In this example (the demo app) the projects are Web: ASP.NET web site, and SilverlightProject1 which is the Silverlight project. One thing to notice in the screen shot below is that the Web project can be configured to run on a certain port within Visual Studio. This setting tells Cassini (the inbuilt VS web browser) to use a static or dynamic port, there will be more mentioned about this later.

Image 2

When we add a new Silverlight project we end up with some boiler plate files, much the same way one does when creating a new project using one of the other Visual Studio templates. Consider the figure below which is a brand new Silverlight project.

Image 3

The Silverlight DLLs are installed to the Program Files\Silverlight location.

Image 4

There are three files for a new Silverlight project:

  1. Page.xaml /Page.Xaml.cs (or vb if you are using VB.NET)
  2. TestPage.html which holds the Silverlight object
  3. Silverlight.js which is the JavaScript to create the Silverlight object within the page (TestPage.html in this case)

I'm just going to show you a bit about each of these three files, so you get the demo app file structure.

1. Page.xaml

Is made up of two files, the XAML and the code behind. Let's start with the XAML.

Image 5

As can be seen from the figure above, the Page is simply a Canvas, in fact most controls/page areas in Silverlight 1.1 start out as a Canvas as there are few actual controls in Silverlight, but we'll talk about that a bit later as well.

The code behind for page is simply enough:

C#
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightProject1
{
    public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();
        }
    }
}  

One thing you won't find is the InitializeComponent() method, that's in the automatically created Page.g.cs.

2. TestPage.html

Testpage.html is the page that holds the Silverlight object.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>Silverlight Project Test Page </title>

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="TestPage.html.js"></script>
    <style type="text/css">
        .silverlightHost { width: 640px; height: 480px; }
    </style>
</head>

<body>
    <div id="SilverlightControlHost" class="silverlightHost" >
        <script type="text/javascript">
            createSilverlight();
        </script>
    </div>
</body>
</html>  

This also has a JavaScript code behind file, which is called within the createSilverlight() function call. Let's see that JavaScript, shall we (Testpage.html.js).

JavaScript
// JScript source code

//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
    Silverlight.createObjectEx({
        source: "Page.xaml",
        parentElement: document.
        getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.1",
            enableHtmlAccess: "true"
        },
        events: {}
    });

    // Give the keyboard focus to the Silverlight control by
    //default
    document.body.onload = function() {
      var silverlightControl = document.
      getElementById('SilverlightControl');
      if (silverlightControl)
      silverlightControl.focus();
    }
}  

3. Silverlight.js

Silverlight.js is a rather large helper script that is MSFT authored and is used to perform additional functions in order to setup the Silverlight object within the host browser.

A Bit of Warning about Alphas

When I first started looking at Silverlight (about one week now) I was very disappointed that there were no input controls, such as Buttons, TextBoxes, Tabs, ScrollViewers etc. I mean jeez no input controls, come on now.

You have to create these sort of things yourself, which is a bit time consuming but doable. There are some free controls available as mentioned in the resources section at the bottom of this article. One bit of good news is that the Silverlight 1.1 Alpha Refresh does include some basic controls. Have a look there before you start.

When dealing with Silverlight one must remember it is still Alpha, so things will change and get included. I have to say I started out quite negative (cos I like Flash) but by the end I loved Silverlight.

What Can One Do With Silverlight 1.1

If we look at the Silverlight 1.1 Tutorials and Code Starts one can see that the following appears to be a list of what we can reasonably expect a Silverlight 1.1 application to be able to do (at the moment):

  • Getting Started with Silverlight Development
  • Building Dynamic User Interfaces with Silverlight
    • Creating Custom Controls
  • Networking and Communication in Silverlight
    • Sending and Receiving Plain XML Messages
    • Using a Proxy to Call an ASP.NET Web Service
  • Interaction Between HTML and Managed Code
    • Accessing the DOM from Managed Code
  • Additional Programming Tasks
    • Upload/Downloading

The attached demo app will demonstrate and discuss each of these areas.

The Demo App

So what does the demo app look like, well it looks like this:

Image 6

What Does it Do / What are the Requirements

Ok so that's a screen shot of what it looks like. But what does it do, what were my requirements?

When I started (one week ago) I decided that I wanted to write a Silverlight application that would utilise most of the current Silverlight functions available. So I gave it a thought, and I came up with this: I wanted an application that would use a Web service that would query Flickr for images using a RSS feed, and would show these images in a scrollable panel from where the user may select an image to be viewed in the main page area. When an image was in the main area, I wanted it to be able to be dragged/resized and rotated (like MSFT surface) and removed from the main page area. The user may also get the next/previous page of results from Flickr, so it would have some sort of paging mechanism. I also wanted it to look cool.

This application has a lot of scope, it does indeed cover a lot of Silverlight functionality, and by the end of this article, I hope that you lot will get what you can do with Silverlight right now.

Here is another diagram for the finished demo app with some callouts showing which of the items shown are created by which classes in the attached application.

Image 7

As I stated earlier, this demo app covers a lot of ground, it covers the following areas:

  • Using Web Services
  • Using XML (XLINQ cos I simply love it, and after all, this is a VS2008 article, so hey why not)
  • Using third party domains (Flickr in my case)
  • Using custom controls
  • Events
  • Using XAML/WPFe
  • Using the DOM from Silverlight

This image may help a little to see the dependencies and how all the classes and even projects relate to each other

Image 8

It can be seen that there are two projects in the attached demo application, the Web project and the Silverlight project. The Silverlight project consists of the Silverlight page object and the hosting HTML page and setup JavaScript, along with code for all the custom controls that have been authored in order to carry out the demo application functionality.

The Web project has the compiled Silverlight project's DLL, and a copy of the Silverlight page object and the hosting HTML page and setup JavaScript. But the web project also has other classes, which are used by the Silverlight project. The rule of thumb with Silverlight 1.1 is that it can ONLY use localhost (127.0.0.1) resources, so that's why there are some extra items in the web project, basically they are used by the Silverlight project in one way or another. Don't worry, these will be described in detail in the following sections.

Image 9

I'll briefly describe some of the extra files:

  • PhotoInfo.cs: A small class that represents a Photo
  • RSSFeed.cs: A RSS Feed parser for a Flickr RSS feed
  • WebService.asmx / WebService.cs: A web service that is used by the Silverlight Page.xaml.cs object
  • DisplayImage.ashx: A simple ASP.NET handler that allows remote (cross domain, Flickr) images to be fetched by Silverlight

Getting Started with Silverlight Development

This was already discussed above.

Networking and Communication in Silverlight

There are several different options for getting data into Silverlight, you can use either of the following approaches:

  • XML Files
  • Web Services

I'll talk about each of these a bit and then I'll show you what the demo application actually does to get its data.

XML Files

As I don't do this in my demo application (attached), I'm going to simply use the quickstart code from here to illustrate how to read XML data in your Silverlight applications.

The relevant MSFT quick start is located here. What they do is use a local XML file called rssfeed.xml, which they then parse and use within a Silverlight application. The format of the rssfeed.xml file is as shown below:

XML
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type='text/xsl' href='RssPretty.xslt' version='1.0'?>
<rss version="2.0">
<link rel="alternate" type="application/rss+xml" title="RSS FEED TITLE"
    href="RSS FEED URL" />
    <channel>
        <title>Microsoft Windows Vista</title>
        <link>http://www.microsoft.com/windowsvista/</link>
        <description>Get new content and articles about Windows
        Vista directly from Microsoft.</description>
        <copyright>?2006 Microsoft Corporation. All rights reserved.
        </copyright>
        <language>en-us</language>
        <ttl>1440</ttl>
    <item>
            <title>Make Beautiful Music with Windows Vista—at Home
            or On the Go</title>
            <pubDate>Wed, 24 Jan 2007 11:00:00 GMT</pubDate>
            <description>Columnist S.E. Slack explains how to use
                Windows Media Center in Windows Vista to experience
                digital music on your PC and portable device.
          </description>
          <link>http://www.microsoft.com/windowsvista/community/
            beautifulmusic.mspx</link>
        </item>

    ....
    ....

    </channel>
</rss>

And then they parse this XML file within their Silverlight application as follows:

C#
using System;
using System.Linq;
using System.Xml;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Net;
using System.Text;
using System.Windows.Browser;
using System.Windows.Browser.Net;


namespace BasicRss
{
    public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();

            string url = GetXmlRssUrl();

            try
            {
                HttpWebRequest request = new
                BrowserHttpWebRequest(new Uri(url));
                // Get the response.
                HttpWebResponse response = request.GetResponse();
                // Get the stream containing content returned by the
                //server.
                Stream content = response.GetResponseStream();
                // Create a XMLWriter that outputs to a
                //StringBuilder and Create XMLReader
                StringBuilder xamlString = new StringBuilder();
                using (XmlWriter writer = XmlWriter.Create(xamlString))
                using (XmlReader reader = XmlReader.Create(new
                StreamReader(content)))
                {
                    // Create a Canvas element, that will be converted
                    //to Canvas control and will be added to the
                    //parent Canvas control.
                    writer.WriteStartElement("Canvas");
                    int canvasTop = 40;
                    //Start reading the content.
                    while (reader.Read())
                    {
                        if ((reader.IsStartElement()) &&
                        ("item" == reader.LocalName))
                        {
                            using (XmlReader itemReader =
                                reader.ReadSubtree())
                            {
                                while (itemReader.Read())
                                {
                                    if (itemReader.IsStartElement())
                                    {
                                        if ("title" ==
                                            itemReader.LocalName)
                                        {
                                            //Write the title.
                                            writer.WriteStartElement
                                           ("TextBlock");
                                            writer.WriteAttributeString
                                           ("Canvas.Top",
                                                canvasTop.ToString());
                                            writer.WriteAttributeString
                                         ("Foreground", "Blue");
                                            // Move canvas top
                                            canvasTop = canvasTop + 20;
                                            writer.WriteAttributeString
                                           ("Text",
                                                "Title: " +
                                            itemReader.
                                            ReadElementContentAsString());
                                            writer.WriteEndElement();
                                        }
                                        else if ("link" ==
                                            itemReader.LocalName)
                                        {
                                            //Write the link.
                                            writer.WriteStartElement
                                            ("TextBlock");
                                            writer.WriteAttributeString
                                           ("Canvas.Top",
                                                canvasTop.ToString());
                                            writer.WriteAttributeString
                                            ("Foreground", "Blue");
                                            // Move canvas top
                                            canvasTop = canvasTop + 40;
                                            writer.WriteAttributeString
                                           ("Text",
                                                "Link: " +
                                            itemReader.
                                        ReadElementContentAsString());
                                            writer.WriteEndElement();
                                        }
                                    }
                                }
                            }
                        }
                    }
                    // Close the "Canvas" element.
                    writer.WriteEndElement();
                    // Flush the buffer.
                    writer.Flush();
                }
                // Clean up.
                response.Close();

                // Display XAML on the page
                // by adding it to the Canvas's children collection.
                System.Windows.DependencyObject controls =
                    XamlReader.Load(xamlString.ToString());
                this.Children.Add(controls as Visual);
            }
            catch (Exception ex)
            {
                TextBlock error = (TextBlock)this.FindName("error");
                error.Text = " Error: " + ex.Message;
            }

        }
        /// <summary>
        /// Gets the local url of the RSS feed
        /// </summary>
        /// <returns></returns>
        private string GetXmlRssUrl()
        {
            string path = HtmlPage.DocumentUri.AbsolutePath;
            int lastSlash = path.LastIndexOf("/");

            path = path.Substring(0, lastSlash + 1);

            return "http://" + HtmlPage.DocumentUri.Host + path +
            "rssfeed.xml";
        }
    }
}

Whilst this certainly does the job just fine, a better approach may be to use a Web service to return a nice collection of some .NET objects that the Silverlight app could use, without having to do all this parsing. Enter Web Services / Silverlight communications.

Web Services and Silverlight

Silverlight can actually call an ASP.NET web service no problem. It's simply a question of creating a web reference in the Silverlight project. One thing that is important to note, is that cross domain calls (not localhost) aren't currently allowed using certain Silverlight objects, as I'll discuss later on when we get to the Downloader object explanation. And if like me, you don't have IIS installed and rely on Cassini (the Visual Studio web browser) you may find that it allocates a dynamic port each time it runs. You may think this is fine, as it's all on the same domain, but it's not. A quick check on Google assured me that the port is actually included as part of the checks that is made when checking for cross domain access. So that's a bit annoying. Luckily there's an easy fix, either host your Silverlight on IIS proper using fixed port (usually 80 I believe), or use Cassini and configure it to use a static port. The latter is what I have done for the demo application.

I'm going to go through the steps to get an ASP.NET web service up and running with Silverlight in VS2008.

If you want a good link to get you started with Silverlight and ASP.NET web services in VS2008, check out this excellent entry, by MSFTs Mike Taulty. This is what got me up and running. I've copied his post here for folk that just want to read everything in one article.

Steps as below:

  1. File->New->Web Site. I've been working with Cassini so I just put the website into the file system
  2. Delete default.aspx as we're building a service here
  3. Add a new web service (WebService.asmx)
  4. Implement your service (e.g.)
C#
[WebService(Namespace = "http://tempuri.org/")]
[ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService ()
    {
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string HelloWorld() {
        return "Hello World";
    }

Quite an important part to note is that the web methods should be marked with the [ScriptMethod(ResponseFormat = ResponseFormat.Json)] attribute. I believe this is the only format that Silverlight 1.1 works with, so that's why it is needed.

Now we have a service, let's build something from Silverlight to call it:

  1. File->Add->New Project->Silverlight Project
  2. Now, add a web reference to the web service from the Silverlight project. Note: If you're using Cassini then I'd suggest setting it up to run on a fixed port at this point by changing your web site properties otherwise your web reference will break from time to time. Property sheet below shows dynamic ports is set to false and port number is set to 65534.
    Image 10
  3. Add a web reference from the Silverlight Project to the web service (for me this is to http://localhost:65534/WebSite2/WebService.asmx?wsdl) - you'll perhaps have to spin up your web service project first in order to get Cassini sitting and listening for traffic (i.e. setting your ASMX file as the start page and pressing CTRL F5 should do that).
  4. Write some code into your Silverlight app (e.g.):
    C#
    <Canvas x:Name="parentCanvas"
          xmlns="http://schemas.microsoft.com/client/2007"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Loaded="Page_Loaded"
          x:Class="SilverlightProject1.Page;assembly=
          ClientBin/SilverlightProject1.dll"
          Width="640"
          Height="480"
          Background="White"
          >
    <TextBlock x:Name="myText" Width="192" Height="48" FontSize="24"/>
    </Canvas>
    
    public partial class Page : Canvas
    {
      public void Page_Loaded(object o, EventArgs e)
      {
        // Required to initialize variables
        InitializeComponent();
    
        WebService service = new WebService();
        myText.Text = service.HelloWorld();
      }
    }

    Now, when it comes to debugging it seems that running a Silverlight project just loads the page from the file system and I'm not sure whether that's going to work when your page is calling a service that comes from elsewhere, so what I've been doing is:
  5. Add a link from the Web Site project to the Silverlight Project using the "Add Silverlight Link" menu option off the right mouse menu when you right click on your web project. This will get your assembly, PDB and XAML files copied to the web site and kept in sync (be careful not to edit the XAML file in the wrong place after doing this - it's bitten me more than once and if you edit the one in the web folder then it'll get overwritten on each build).
    Image 11

    With that in place:

  6. Copy TestPage.html, TestPage.html.js, Silverlight.js from your Silverlight project to your web site project.
  7. Set TestPage.html (in the web site project) as your start page.
  8. Hit F5 (take care to note that your Web Site project is running and the file is coming from http://localhost and not the file system which it will do if you run the Silverlight project).

    You should be in business. If you want to make your call to the web service survive a redeployment, then do something like:

    C#
    public void Page_Loaded(object o, EventArgs e)
     {
       // Required to initialize variables
       InitializeComponent();
    
       WebService service = new WebService();
    
       service.Url = (new Uri(HtmlPage.DocumentUri,
           "WebService.asmx")).ToString();
    
       myText.Text = service.HelloWorld();
     }  

The Demo App Implementation

Ok so I've now shown you that you can use XML and Web Services from within your Silverlight app, which is cool, huh. I also stated that I was not that keen on using XML file parsing in my Silverlight application. So what do I do. Well I have a fairly simply ASP.NET web service that I reference, and call just like I described above, and I am using XML too. It's just how the XML is dealt with that's different. Let's have a look at what I do. Recall, I wanted to use Flickr. Flickr actually has a RssFeed which is available using the following URL: "http://www.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=" + _FLICKR_API_KEY;

When I bash this URL into the browser, the following XML is returned.

XML
<rsp stat="ok">
<photos page="1" pages="5" perpage="100" total="500">
<photo id="1809392098" owner="37451064@N00"
secret="9ddb3512d4" server="2012" farm="3"
title="Day 278/365......This is about as Halloween as I get"
ispublic="1" isfriend="0" isfamily="0"/>
<photo id="1807982526" owner="51107197@N00" secret="1dd4e67541"
server="2241" farm="3"
title="Polihale Sunset" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="1807122211" owner="55217458@N00" secret="4c333e73e4"
server="2112" farm="3"
title="waiting" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="1808703464" owner="76743095@N00" secret="85d3010d77"
server="2131" farm="3"
title="Cyclops" ispublic="1" isfriend="0" isfamily="0"/>
....
....
</photos>
</rsp> 

So I thought why not use XLINQ to do something cool. There may be some of you who have read some of my other WPF articles, and have seen this before. But I am a creature of habit, and really like Flickr, so sorry if this is old to you guys.

But with this XML feed available I am able to use XLINQ to select the data I'm interested in, into new .NET types, which are returned via the web service to the Silverlight application. Let's have a look shall we.

In my Page.xaml.cs Silverlight file, I called the web service like:

C#
using System;
using System.Windows;
using System.Windows.Controls;
using System.Collections.Generic;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
using SilverlightProject1.Controls;

namespace SilverlightProject1
{
    public partial class Page : Canvas
    {
        private SilverlightProject1.FlickrService.PhotoInfo[] photos;
        private FlickrService.WebService websservice;
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();
            //create the web service
            websservice = new FlickrService.WebService();
            photos = websservice.GetFlickr(pageIndex,
            Constants._NUM_OF_PHOTOS_FROM_FLICKR);
        }
    }
}

It can be seen that this call to the web service actually returns an array of SilverlightProject1.FlickrService.PhotoInfo[] which come straight from the web service call. So let's follow this chain of events. The web service looks like:

C#
using System;
using System.Linq;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    private RSSFeed _Feed;

    public WebService () {

        _Feed = new RSSFeed();
    }

    [WebMethod]
    //For Silverlight, as v1.1 only allows JSON
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<PhotoInfo> GetFlickr(int pageIndex,
        int numOfImageToFetch)
    {
        return _Feed.LoadPictures(pageIndex, numOfImageToFetch); ;
    }
}

So it can also been seen that the web service holds an instance to an RssFeed object, which it calls on the GetFlickr() method, which calls the RssFeed objects LoadPictures() method. Mmm. Let's look at that.

C#
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using System.Collections.Generic;

public class RSSFeed
{
    #region Instance fields
    private const string _FLICKR_API_KEY =
        "c705bfbf75e8d40f584c8a946cf0834c";
    private const string _MOST_RECENT =
        "http://www.flickr.com/services/rest/?method=flickr.
    photos.getRecent&api_key=" + _FLICKR_API_KEY;
    private const string _INTERESTING = "http://www.flickr.com/
        services/rest/?method=flickr.interestingness.getList&
        api_key=" + _FLICKR_API_KEY;
    private string _url = _INTERESTING;

    public RSSFeed()
    {

    }

    public List<PhotoInfo> LoadPictures(int pageIndex, int numOfImageToFetch)
    {
        try
        {
            var xraw = XElement.Load(_url);
            var xroot = XElement.Parse(xraw.ToString());
            var photos = (from photo in xroot.Element("photos").
            Elements("photo")
            select new PhotoInfo
            {
                _Id = (string)photo.Attribute("id"),
                _Owner = (string)photo.Attribute("owner"),
                _Title = (string)photo.Attribute("title"),
                _Secret = (string)photo.Attribute("secret"),
                _Server = (string)photo.Attribute("server"),
                _Farm = (string)photo.Attribute("farm")
            }).Skip(pageIndex * numOfImageToFetch).
            Take(numOfImageToFetch);

            return photos.ToList<PhotoInfo>();
        }
        catch
        {
            return null;
        }
    }
}

Notice the cool XLINQ stuff, all too easy, no nasty XML file parsing. Sold that. Just use XLINQ and create a collection of new CLR objects, (PhotoInfo) in my case. Neat. And then return that to the web service as a list of PhotoInfo where the web service simply returns these to the Silverlight application. Once in the Silverlight application, we can use these PhotoInfo objects any way we like. They are in fact used to obtain images from Flickr as we'll discuss later. Now isn't that neater than messing around with XML parsing. XLINQ rocks. In fact LINQ rocks, MSFT have got it well right if you ask me.

Building Dynamic User Interfaces with Silverlight

Silverlight development is all about custom controls, there are very few native controls the way it stands at the moment. But it's only an alpha after all. That said there aren't any input controls, which I mentioned earlier. You have to write most of the stuff yourself. The Silverlight 1.1 reference poster quite clearly shows you which controls are available to you. It's basically the following controls:

  • Canvas
  • Control
  • Image
  • MediaElement
  • OpenFileDialog
  • TextBlock and a few more

So how are people creating such RIAs using Silverlight. Well it's down to hard work, and to be honest it's not that hard, and Silverlight is actually fun you know, so you get into it. I think the best place to start is to show you how to create a custom control or two. I'm going to show you how to create a button and then an image which is rotated and has an alpha applied to it when you mouse over it. I'll also briefly show screen shots and offer simple (yes, you'll have to investigate further) explanations of all other controls in the attached demo application.

Custom Button Control

I like to start with a screen shot.

Image 12

This is what we are going to be making. A very simply button that glows when it has mouse focus, and can be disabled which will use a different disabled color brush. So that's what we are trying to achieve. So let's begin.

Most controls in Silverlight will either inherit from Control or from Canvas. In fact even Control ends up being a Canvas as you shall see. The first step is to decide if your control will have any markup (XAML) associated with it. If you want to do animations etc. you might like to use XAML (you can of course, do it in code too). If you want to use some XAML you probably want to inherit from Control, which you can do by deciding to add a new control is VS2008. If you do this, the new control will indeed inherit from Control, but it will also have an XAML file so that you can add elements to the XAML. So there will be two files, the xxxx.XAML and the xxxx.XAML.cs/vb which holds the controls logic. So you need some way of binding the two together, which is the first thing that must be done. This XAML must be loaded from a stream, into an actual element that can be used as a datum point (root element) for all other elements. The following code shows the XAML file for the button being loaded and a FrameworkElement being declared to hold the newly constructed element read from the XAML.

C#
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;

namespace SilverlightProject1.Controls
{
    public class GrayButton : Control
    {
        private FrameworkElement _root;

        public GrayButton()
        {
            System.IO.Stream s = this.GetType().Assembly.
                GetManifestResourceStream(
                "SilverlightProject1.Controls.GrayButton.xaml");
                _root = this.InitializeFromXaml(new
            System.IO.StreamReader(s).ReadToEnd());
            ...
            ...
        }
    }
}  

So once you've loaded the XAML and obtained a reference to the actual element (FrameworkElement), you can try and find objects within the XAML DOM. The complete code for the GrayButton is shown below to give you a flavour of what you need to do in order to create a custom control with events and XAML. This is a very simple button implementation, but it does the job.

C#
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;

namespace SilverlightProject1.Controls
{
    /// <summary>
    /// Provides a minimal button implementation
    /// </summary>
    public class GrayButton : Control
    {
        #region Instance fields
        private FrameworkElement _root;
        private Storyboard _animate;
        private TextBlock _text;
        private Rectangle _background, _highlight;
        private bool _mouseDown;
        private bool _IsEnabled = true;
        private Brush _EnabledBrush;
        private Brush _DisabledBrush;

        public event EventHandler MouseDown, MouseUp, Click;
        #endregion
        #region Ctor
        public GrayButton()
        {
            System.IO.Stream s = this.GetType().Assembly.
            GetManifestResourceStream(
            "SilverlightProject1.Controls.GrayButton.xaml");
            _root = this.InitializeFromXaml(new
            System.IO.StreamReader(s).ReadToEnd());
            // Fetch elements from the loaded XAML
            _animate = (Storyboard)_root.FindName("animate");
            _text = (TextBlock)_root.FindName("text");
            _background = (Rectangle)_root.FindName("background");
            _EnabledBrush = _background.Fill;
            _DisabledBrush = new SolidColorBrush(Colors.LightGray);
            _highlight = (Rectangle)_root.FindName("highlight");
            _mouseDown = false;
            //hook up events
            MouseEnter += new MouseEventHandler(OnMouseEnter);
            MouseLeave += new EventHandler(OnMouseLeave);
            MouseLeftButtonDown += new MouseEventHandler(
            OnMouseLeftButtonDown);
            MouseLeftButtonUp += new MouseEventHandler(
            OnMouseLeftButtonUp);
            CenterText();
        }
        #endregion
        #region Public methods/properties
        public String Text
        {
            get { return _text.Text; }
            set
            {
                _text.Text = value;
                CenterText();
            }
        }

        public double Left
        {
            get { return (double)GetValue(Canvas.LeftProperty); }
            set { SetValue(Canvas.LeftProperty, value); }
        }

        public double Top
        {
            get { return (double)GetValue(Canvas.TopProperty); }
            set { SetValue(Canvas.TopProperty, value); }
        }

        public new double Width
        {
            get { return _background.Width; }
            set
            {
                _background.Width = value;
                _highlight.Width = value;
                CenterText();
            }
        }

        public new double Height
        {
            get { return _background.Height; }
            set
            {
                _background.Height = value;
                _highlight.Height = value;
                CenterText();
            }
        }

        public double RadiusX
        {
            get { return _background.RadiusX; }
            set
            {
                _background.RadiusX = value;
                _highlight.RadiusX = value;
            }
        }

        public double RadiusY
        {
            get { return _background.RadiusY; }
            set
            {
                _background.RadiusY = value;
                _highlight.RadiusY = value;
            }
        }

        public bool IsEnabled
        {
            get { return _IsEnabled; }
            set
            {
                _IsEnabled = value;
                _background.Fill = _IsEnabled ? _EnabledBrush :
                _DisabledBrush;
            }
        }
        #endregion
        #region Private methods/properties
        private void CenterText()
        {
            _text.SetValue(Canvas.LeftProperty,
            _background.Width / 2 - (_text.ActualWidth / 2));
            _text.SetValue(Canvas.TopProperty,
            _background.Height / 2 - (_text.ActualHeight / 2));
        }

        private void OnMouseLeftButtonUp(object sender, MouseEventArgs e)
        {
            if (_IsEnabled)
            {
                if (_mouseDown)
                {
                    Click(this, new EventArgs());
                    _mouseDown = false;
                }
            }
        }

        private void OnMouseLeftButtonDown(object sender, MouseEventArgs e)
        {
            if (_IsEnabled)
            {
                _mouseDown = true;
                MouseDown(this, new EventArgs());
            }
        }

        private void OnMouseLeave(object sender, EventArgs e)
        {
            if (_IsEnabled)
            {
                _animate.Stop();
            }
        }

        private void OnMouseEnter(object sender, MouseEventArgs e)
        {
            if (_IsEnabled)
            {
                _animate.Begin();
            }
        }
        #endregion
    }
}

And here's the associated XAML for the GrayButton

C#
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="15" Height="50">
  <Canvas.Resources>
    <Storyboard x:Name ="animate">
      <DoubleAnimation Storyboard.TargetName="highlight"
    Storyboard.TargetProperty="Opacity"
      AutoReverse="True" RepeatBehavior="Forever"
        Duration="0:0:0.5" From="0" To="0.5"/>
    </Storyboard>
  </Canvas.Resources>
  <Rectangle x:Name="background" Width="130" Height="55"
        StrokeThickness="1" RadiusX="2" RadiusY="2"
        Stroke="#000000">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
          <GradientStop Color="#ffffff" Offset="0"/>
          <GradientStop Color="#d2dfe8" Offset="0.2"/>
          <GradientStop Color="#0475bc " Offset="0.50"/>
          <GradientStop Color="#d2dfe8" Offset="0.8"/>
          <GradientStop Color="#ffffff" Offset="1"/>
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  <TextBlock x:Name="text" FontSize="14" Foreground="#000000"
    Canvas.Top="17" Canvas.Left="33" Text=""
  FontFamily="Arial Black" FontWeight="Bold"/>
  <Rectangle x:Name="highlight" Width="15" Height="50"
    StrokeThickness="4" Stroke="#ffffff"
  Fill="#ffffff"  Opacity="0"/>
</Canvas>

You can see that the root element is actually a Canvas, in fact nearly everything is actually a Canvas in Silverlight. Well, for the mean time anyway. I guess new controls will come with subsequent releases.

So that's one way of creating a custom control. But suppose you don't want any XAML and you just need code. Can you do that? Well sure you can, you can just inherit from Canvas directly. I do exactly this for one of my own controls, the ScrollCanas, which is a scrollable control which holds a page (using the LINQ Skip() Take() operations to perform paging) worth of SmallPhoto controls and looks like this. You can scroll the images by dragging with the mouse. The buttons can be used to fetch next/previous pages worth of images from Flickr, which is really just a call to the web service as I discussed earlier.

Image 13

The code for this is shown below:

C#
public class ScrollCanvas : Canvas
{
    #region Instance fields
    private SilverlightProject1.FlickrService.PhotoInfo[] _Photos;
    private Point _PrevPoint = new Point();

    public delegate void photoClickedDelegate(
    SilverlightProject1.FlickrService.PhotoInfo file);
    public event photoClickedDelegate PhotoClickedEvent;
    public bool _IsScrolling=false;
    #endregion
    #region Ctor
    public ScrollCanvas()
    {
        this.SetValue(Canvas.BackgroundProperty, Colors.LightGray);
        this.SetValue(Canvas.WidthProperty,
        Constants.SCROLL_CANVAS_WIDTH);
        this.SetValue(Canvas.HeightProperty,
        Constants.SCROLL_CANVAS_HEIGHT);
        this.MouseMove += new MouseEventHandler(ScrollCanvas_MouseMove);
        this.MouseLeftButtonDown += new MouseEventHandler(
        ScrollCanvas_MouseLeftButtonDown);
        this.MouseLeftButtonUp += new MouseEventHandler(
        ScrollCanvas_MouseLeftButtonUp);
    }
    #endregion
    #region Public properties/methods
    public SilverlightProject1.FlickrService.PhotoInfo[] Photos
    {
        get { return _Photos; }
        set
        {
            _Photos = value;
            if (_Photos.GetUpperBound(0) > 0)
            {
                this.Children.Clear();

                int xOffset = 30;

                foreach (SilverlightProject1.FlickrService.PhotoInfo
                file in _Photos)
                {
                    SmallPhoto sp = new SmallPhoto(this, file);
                    sp.Left = xOffset;
                    sp.Top = 20;
                    sp.Width = Constants.SMALL_PHOTO_HEIGHT;
                    sp.Height = Constants.SMALL_PHOTO_HEIGHT;
                    sp.PhotoClickedEvent += new
                    SmallPhoto.photoClickedDelegate(
                    sp_PhotoClickedEvent);
                    this.Children.Add(sp);
                    xOffset += ((int)sp.Width + 30);
                }
            }
        }
    }

    public double Left
    {
        get
        {
            return (double)GetValue(Canvas.LeftProperty);
        }
        set
        {
            SetValue(Canvas.LeftProperty, value);
        }
    }

    public double Top
    {
        get
        {
            return (double)GetValue(Canvas.TopProperty);
        }
        set
        {
            SetValue(Canvas.TopProperty, value);
        }
    }

    public void OnPhotoClickedEvent(SilverlightProject1.FlickrService.
        PhotoInfo file)
    {
        //Invoking all the event handlers
        if (PhotoClickedEvent != null) PhotoClickedEvent(file);
    }
    #endregion
    #region Private properties/methods
    private void sp_PhotoClickedEvent(SmallPhoto sender)
    {
        OnPhotoClickedEvent(sender.File);
    }

    private void ScrollCanvas_MouseLeftButtonUp(object sender,
        MouseEventArgs e)
    {
        _IsScrolling = false;
    }

    private void ScrollCanvas_MouseLeftButtonDown(object sender,
        MouseEventArgs e)
    {
        _PrevPoint = new Point(0, 0);
        _IsScrolling = true;
    }

    private void ScrollCanvas_MouseMove(object sender,
        MouseEventArgs e)
    {
        if (_IsScrolling)
        {
            int deltaX;
            if (_PrevPoint.Equals(new Point(0, 0)))
            {
                deltaX = 0;
            }
            else
                deltaX = (int)(e.GetPosition(this).X -
                    _PrevPoint.X);

                double leftEdge = (double)this.GetValue(Canvas.
                    LeftProperty);
                leftEdge += deltaX;

            if (leftEdge < ((this.Width / 2) * -1))
            return;

            if (!(leftEdge > 0))
            {
                this.SetValue(Canvas.LeftProperty, leftEdge);
            }
            _PrevPoint = new Point(e.GetPosition(this).X,
            e.GetPosition(this).Y);
        }
    }
    #endregion
}

So I hope that's enough to get you started with custom controls. I did mention that I would briefly discuss all the custom controls in the demo app, so here we go.

The ScrollCanvas mentioned here hosts SmallPhoto controls.

SmallPhoto

It is a small control that holds an image and is randomly rotated and has mouse events for selecting, and has a selected event which is used by the parent (ScrollCanvas) control. It looks like this. The SmallPhoto control uses one of the PhotoInfo objects as returned by the web service, which we talked about earlier.

Image 14

The ImageCanvas control is the main control that occupies the main Silverlight area and hosts Photo controls.

Photo

It is a control that holds an image and is randomly rotated and has mouse events for dragging/selecting/scaling/rotating. It looks like this. The combination of the ImageCanvas control and the hosted Photo controls offers an experience similar to that of MSFT surface. I should point out that I wanted to do this myself, but I found such a good example of this at Delays Blog and I couldn't have done it better, so I used it...sorry this is not good I know, it was just so cool already. But I feel I have added to it by getting the images from a different domain, I also introduced a close button and a caption. I also had to understand the code in the first place to change it. The Photo control uses one of the PhotoInfo objects as returned by the web service, which we talked about earlier.

Image 15

The ImageCanvas control also hosts another control called ArtyCanvas which is just an image. However the ArtyCanvas itself also holds several flashing Ring controls. The Ring controls are just pulsing rings that I think brighten the place up. They are for aesthetic reasons. I like them, so should you.

Image 16

Interaction between HTML and Managed Code

Silverlight has the ability to interact with the page that is hosting it. As mentioned above this may be one approach, where Silverlight could talk to ASP.NET input controls (remember Silverlight 1.1 doesn't have these as standard) that are actually not part of the Silverlight object that exist within the page hosting the Silverlight object. The reason I have not done this is that even if you go down the route of using ASP.NET web controls, they can't be positioned over the Silverlight object even if they are positioned using absolute positioning. Well that didn't work for me at any rate. But if you want them to be available outside of the Silverlight control area, this is entirely feasible. But I just think a better approach is to author the custom controls you think you need in .NET code. This way the controls are re-usable and are packaged into the Silverlight projects output DLL.

More typically what you may want to do is, set or get a value from the DOM for the page that is hosting the Silverlight object, so I'm going to talk you through how to do that. It's ever so easy, let's have a look at it.

So firstly let's look at the hosting pages HTML (the DOM):

XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>Silverlight Project Test Page </title>

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="TestPage.html.js"></script>
    <style type="text/css">
        body { background-color:White;}
        .silverlightHost { width: 1000px; height: 800px; }
        .table { border-color : #d2dfe8; border-style:dashed;
        border-width:thin;}
        .bottomDiv
        {
            width:100%;
            font-family:Tahoma;
            font-size:9px;
            background: #d2dfe8;
            color:Black;
        }
    </style>
</head>

<body>
<center>
<table cellpadding="0" cellspacing="0" class="table">
<tr>
<td>
    <div id="SilverlightControlHost" class="silverlightHost" >
        <script type="text/javascript">
            createSilverlight();
        </script>
    </div>
</td>
</tr>
<tr class="">
<td>
<div id="bottomDiv" class="bottomDiv">
    <label id="bottomText" >This will get changed by silverlight</label>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>

That's the entire HTML/CSS for the hosting page for the attached demo application. The particular element to note is the label whose ID is set to bottomText, this is the one that I will be setting from Silverlight. One thing to note is that the GetElementByID() method is probably the most commonly used DOM method, so it's probably best to give the elements IDs. You could always use the GetElementsByTagName() but I just find it easier to use the GetElementByID() method.

Now let's have a look at how Silverlight gets and manipulates this element:

C#
using System;
using System.Windows;
using System.Windows.Controls;
using System.Collections.Generic;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Windows.Browser;
//This is required to allow Silverlight to talk to hosting pages DOM


namespace SilverlightProject1
{
    /// <summary>
    /// This is the main page that is loaded into the html hosting page.
    /// This object gets all other controls added to it
    /// </summary>
    public partial class Page : Canvas
    {

        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();

            try
            {
                HtmlDocument document = HtmlPage.Document;
                HtmlElement bottomText = document.GetElementByID("bottomText");

                bottomText.SetProperty("innerText", "I created this demo to
        try out Silverlight V1.1, and I hope it may be useful for other
        trying to learn. It uses Web Services | XLINQ |
                Custom Controls | Timers | Animations | Silverlight ->
        HTML DOM");
            }
            catch (Exception ex)
            {
            }
        }
    }
}

It's really very simple, ensure that you have the using System.Windows.Browser; directive, and then you can create a new Document by asking the HtmlPage for its Document and then it's all fairly standard DOM stuff. You can even add event handlers to the DOM elements that will call Silverlight code. Let's have a look at an example of that. This example is simply a trimmed version of one of the MSFT Silverlight quickstarts.

C#
using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows.Browser;

namespace Samples.Silverlight.CS
{
  public class BasicCanvas : Canvas
  {

    private HtmlDocument document;

    public BasicCanvas() { }

    private void OnEchoTextClicked(object sender, HtmlEventArgs e)
    {

      HtmlElement input = document.GetElementByID("txtInput");
      HtmlElement output = document.GetElementByID("txtOutput");

      string buttonText = e.SourceElement.GetAttribute("innerText");

      output.SetAttribute("value", "The button text is: " + buttonText + ".
    + Echoed text is: " + input.GetAttribute("value"));
    }


    private void OnGetPropertiesClicked(object sender, EventArgs e)
    {
      try
      {
        string outputText = HtmlPage.DocumentUri.AbsolutePath + " - " +
    HtmlPage.CurrentBookmark;

        document.GetElementByID("txtOutputProperties").SetAttribute("value",
    outputText);

      }
      catch (Exception ex)
      {
        string err = ex.Message;
      }
    }

    public void OnLoaded(object sender, EventArgs e)
    {
      WebApplication.Current.ApplicationUnhandledException +=
    new EventHandler<ApplicationUnhandledExceptionEventArgs>(ExceptionHandler.
    OnUnhandledException);

      try
      {
        document = HtmlPage.Document;
        HtmlElement btnProps = document.GetElementByID("btnGetProperties");
        HtmlElement btnEchoText = document.GetElementByID("btnEchoText");

        bool ec1 = btnEchoText.AttachEvent("onclick",
    new EventHandler<HtmlEventArgs>(this.OnEchoTextClicked));
        bool ec2 = btnProps.AttachEvent("onclick", new EventHandler(
    this.OnGetPropertiesClicked));
      }
      catch (Exception ex)
      {
        string err = ex.Message;
      }
    }

  }

  public class ExceptionHandler
  {
    public static void OnUnhandledException(Object sender,
    ApplicationUnhandledExceptionEventArgs e)
    {
      string err = e.ExceptionObject.Message;
      e.Handled = false;
    }
  }

You can also create new elements and append these to the DOM using the document.CreateElement() and document.DocumentElement.AppendChild(...) methods.

Additional Programming Tasks

Some other typical tasks may be to upload a file to the web server or download a file from the web server. This sounds a little tricky at first, but luckily MSFT has actually been kind to us and provided us devs with one nice class called Downloader, which as you could probably guess, is used to do a download of a file.

In the demo application, I am using the Downloader to download images from Flickr, which I'll talk about in just a minute, but let's just have a quick look at how to upload a file to the web server.

Uploading Files

Here is the relevant code to do an upload.

You would use something like this is a C#/VB code behind file within the Silverlight project.

C#
using System;
using System.Linq;
using System.Xml;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Text;
using System.IO;
using System.Windows.Browser;
using System.Windows.Browser.Net;
using System.Net;

namespace ImageUploadCS
{
    public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();

            StatusCanvas.Visibility = Visibility.Collapsed;

            UploadButton.MouseLeftButtonDown += OnUpload;
        }

        private void UploadImage(string fileName, string fileContents)
        {
            // Create an HTTP request with the path to the web service
            // to post the image file to.
            Uri uploadService = new Uri("Service.asmx/UploadImage",
            UriKind.Relative);
            BrowserHttpWebRequest _request = new BrowserHttpWebRequest(
            uploadService);
            _request.Method = "POST";
            _request.ContentType = "application/x-www-form-urlencoded";

            // Add the file contents to the body of the HTTP request.
            string formBody = "fileName=" + HttpUtility.UrlEncode(fileName) 
                + "&" + "fileContents=" + HttpUtility.UrlEncode(
                fileContents);
            UTF8Encoding encoding = new UTF8Encoding();
            byte[] formBytes = encoding.GetBytes(formBody);
            Stream body = _request.GetRequestStream();
            body.Write(formBytes, 0, formBytes.Length);

            // Send the HTTP request.
            HttpWebResponse response = (HttpWebResponse)_request.GetResponse();

            body.Close();
        }

        private void OnUpload(object sender, EventArgs e)
        {
            // Rehide the status canvas with each request.
            StatusCanvas.Visibility = Visibility.Collapsed;

            // Prompt the user to select an image file.
            OpenFileDialog ofd = new OpenFileDialog();
            ofd.EnableMultipleSelection = false;
            ofd.Filter = "Image files (*.jpg;*.png)|*.jpg;*.png";
            ofd.Title = "Select an image to upload";

            if (ofd.ShowDialog() == DialogResult.OK)
            {
                // Read the contents of the file.
                string fileName = ofd.SelectedFile.Name;
                Stream f = ofd.SelectedFile.OpenRead();
                byte[] fileBytes = new byte[f.Length];
                int byteCount = f.Read(fileBytes, 0, (int)f.Length);
                string fileContents = Convert.ToBase64String(fileBytes);

                // Post the file contents to the web service.
                UploadImage(fileName, fileContents);
            }
        }
    }
}

This code would then call a web service which could then use the file locally (i.e. it could save the file in a web server's directory).

C#
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Caching;
using System.IO;

[WebService(Namespace = "http://tempuri.org/")]
public class SampleUploadServiceCS : System.Web.Services.WebService
{
    public SampleUploadServiceCS ()
    {

    }

    [WebMethod]
    public void UploadImage(string fileName, string fileContents)
    {
            //do whatever you want here with the fileName/fileContents

    }

}

So that is how you would do an upload.

Downloading Files

As I stated earlier, MSFT has been kind to us and has actually provided a nice little object called the Downloader, which we can use to download files. It's simple enough to use this Downloader class, simply create a new Downloader and tell it what to get, and subscribe to its Completed event, by which time the downloaded file should be ok to use. This is accessible on the Downloader which was created. Let's see a very simple example.

C#
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Net;
using System.Text;
using System.IO;
using System.Xml;
using System.Windows.Browser;
using System.Windows.Browser.Net;
using System.Collections.Generic;

namespace ImageViewerCS
{
    public partial class Page : Canvas
    {
        // Downloader object to retrieve the image file contents.
        private Downloader _downloader = new Downloader();

        public void Page_Loaded(object o, EventArgs e)
        {
            InitializeComponent();

            // Add event handlers for Downloader and XAML elements.
            _downloader.Completed += DownloaderCompleted;

            GetImage(defaultImageName);
        }

        public void GetImage(string imageName)
        {
            // Request the image file contents.
            _downloader.Open("GET", new Uri(imageName, UriKind.Relative));
            _downloader.Send();
        }

        public void DownloaderCompleted(object o, EventArgs e)
        {
            // Populate the XAML Image object with the image file contents.
            ImageFrame.SetSource(_downloader, null);
        }
    }
}

It's very simple to use the Downloader really. But, and there is a but, you can't (currently) use the Downloader to download files that are not on the same domain. And guess what, the cross domain check also includes port number. But wait, the attached demo application is getting images from Flickr, so how is it doing that, Flickr is indeed cross domain. Mmmm, curious. I also stated that I am using the Downloader to download files, so how is that.

Let's consider the following image, this is what we would like to do. We'd like a Silverlight application that can talk to both localhost resources and third party resources/services etc. But like I said, this isn't possible using the Downloader.

Image 17

So what do we do about this. Well let's consider the following image, it can be seen that what actually happens is that we can still talk cross domain to Flickr, but we have to go via some proxy object. In my case as I only wanted to download images, I used an ASP.NET handler object, called DisplayImage.ashx. I found this trick on the internet, at Peter Kellners web site, so thanks for that Peter, top job.

Image 18

By using the ASP.NET handler DisplayImage.ashx, which is a local resource, we are able to delegate the fetching of cross domain images from Flickr to the handler, and as each image is treated like this they are loaded asynchronously. Neat huh. So what does the code look like to do all this.

Well, like I stated earlier, both the Photo and SmallPhoto controls use images that come from a third party domain (Flickr) so how do they do that. Let's consider the code for the SmallPhoto control, it's the same principle for the Photo control. The SmallPhoto uses the following XAML:

XML
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="40" Height="40" Background="White" Opacity="0.5">
  <Canvas.RenderTransform>
    <TransformGroup>
      <RotateTransform x:Name="rotateTransform" CenterX="20" CenterY="20"/>
      <ScaleTransform x:Name="scaleTransform" CenterX="20" CenterY="20" />
    </TransformGroup>
  </Canvas.RenderTransform>

  <Image x:Name="image" Canvas.Left="5" Opacity="0.2" Canvas.Top="5"
    Width="30" Height="30" Stretch="Fill" />
</Canvas>

You can see that there is an Image element there in the XAML. So that's where our image from Flickr (third party external domain) image will go. So how does the image end up there. Well let's look at the code behind for the SmallPhoto control.

C#
internal class SmallPhoto : Control
{
    #region Instance fields
    private FrameworkElement _root;
    private Image _image;
    private string _imageUrl;
    private Downloader _Downloader;
    private SilverlightProject1.FlickrService.PhotoInfo _file;

    public SmallPhoto(ScrollCanvas parent, 
        SilverlightProject1.FlickrService.PhotoInfo file)
    {
        // Load the control's XAML from the embedded resource
        System.IO.Stream s = this.GetType().Assembly.
        GetManifestResourceStream("SilverlightProject1.Controls.
        SmallPhoto.xaml");
        _root = this.InitializeFromXaml(new System.IO.StreamReader(s).
        ReadToEnd());
        _parent = parent;
        _root.Visibility = Visibility.Collapsed;
        _file = file;
        _Downloader = new Downloader();
        _Downloader.Completed += new EventHandler(Downloader_Completed);
        // Fetch elements from the loaded XAML
        _image = _root.FindName("image") as Image;
        this.ImageUrl = GetPhotoUrl(_file);
    }

    public SilverlightProject1.FlickrService.PhotoInfo File
    {
        get { return _file; }
    }

    public string ImageUrl
    {
        get { return _imageUrl; }
        set
        {
            _imageUrl = value;
            if (!String.IsNullOrEmpty(_imageUrl) && _imageUrl.IndexOf
            ("http") >= 0)
            {
                try
                {
                    string url = value;
                    string fullImageUrl =
                    "http://localhost:49505/WebSite1/DisplayImage.ashx?
                    URL=" + url + "&Width=250";
                    Uri uri = new Uri(fullImageUrl, UriKind.Absolute);
                    _Downloader.Open("GET", uri);
                    _Downloader.Send();
                }
                catch (Exception ee)
                {
                    string str = ee.ToString();
                }
            }
        }
    }

    private string GetPhotoUrl(SilverlightProject1.FlickrService.
        PhotoInfo file)
    {
        return "http://farm" + file._Farm + ".static.flickr.com/" +
        file._Server + "/" + file._Id + "_" +
        file._Secret + "_m.jpg";
    }

    private void Downloader_Completed(object sender, EventArgs e)
    {
        _image.SetSource(_Downloader, null);
        _root.Visibility = Visibility.Visible;
        lock(this)
        {
            Page.NumberOfRequestedImagesLoaded++;
        }
    }
    #endregion
}

You can see that there is a Downloader object, which I talked about earlier. But the Downloader object is actually calling the ASP.NET handler DisplayImage.ashx, and the job of fetching the cross domain image is actually done by the ASP.NET handler DisplayImage.ashx. Also of note, is that the SilverlightProject1.FlickrService.PhotoInfo is a new object that was created within the RSSFeed class which I talked about earlier. The SilverlightProject1.FlickrService.PhotoInfo was creating using the XLINQ selection technique that we saw earlier. So all that is left to discuss, is the ASP.NET handler itself. So let's have a look at that, shall we. It's important to remember that the ASP.NET handler DisplayImage.ashx is not part of the Silverlight project but is actually part of the associated web project, where the Silverlight object is actually hosted. But there is no issue with the Silverlight code talking to the ASP.NET handler DisplayImage.ashx. It's the same domain and port, so it's considered to be the same domain.

C#
 <%@ WebHandler Language="C#" Class="DisplayImage" %>

using System;
using System.Web;

/// <summary>
/// This handler is used to load the images used by Silverlight asynchronously
/// this handler is also on the same domain as the Downloader Silverlight
/// object which is vital, as currently the Downloader object does not allow
/// cross domain calls. So you have to make calls to the same IP address and
/// port.
/// So this is a handy way of delegating the gathering of 2rd party images
/// (Flickr) to a handler, AKA this DisplayImage.ashx
/// </summary>
public class DisplayImage : IHttpHandler
{
    public void ProcessRequest (HttpContext context) {

        try
        {
            context.Response.ContentType = "image/jpeg";
            context.Response.Cache.SetCacheability(HttpCacheability.Public);
            context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(5));
            string URLLocationEncoded = context.Request.QueryString["URL"] ==
                null ? string.Empty : context.Request.QueryString["URL"];
            int maxWidth = context.Request.QueryString["Width"] ==
                null ? 0 : Convert.ToInt32
                    (context.Request.QueryString["Width"]);
            System.Drawing.Image img = GetComputedImage(URLLocationEncoded,
        maxWidth);
            img.Save(context.Response.OutputStream,
        System.Drawing.Imaging.ImageFormat.Jpeg);
        }
        catch (Exception ex)
        {

        }
        finally
        {
        }
    }

    public System.Drawing.Image GetComputedImage(string URLLocationEncoded,
        int maxWidth)
    {
        string url = URLLocationEncoded;
        System.Net.WebClient webClient = new System.Net.WebClient();
        System.IO.Stream streamBitmap = webClient.OpenRead(url);
        System.Drawing.Image imgReturn = 
            new System.Drawing.Bitmap(streamBitmap);
        if (imgReturn.Width > maxWidth)
        {
            int heightNew = GetScaledHeightFromWidths(maxWidth,
        imgReturn.Height, imgReturn.Width);
            imgReturn = new System.Drawing.Bitmap(imgReturn, maxWidth,
        heightNew);
        }
        return imgReturn;
    }

    public bool IsReusable
    {
        get { return false; }
    }

    private int GetScaledHeightFromWidths(int maxWidth, int imgReturnHeight,
        int imgReturnWidth)
    {
        double scaleFactor = Convert.ToDouble(maxWidth) /
        Convert.ToDouble(imgReturnWidth);
        int heightNew = Convert.ToInt32(Convert.ToDouble(imgReturnHeight) *
        scaleFactor);
        return heightNew;
    }
} 

Silverlight 1.1 Resources

The following is a list of the best resources that I found whilst constructing this application:

So What Do You Think ?

I would just like to ask, if you liked the article please vote for it, and leave some comments, as it lets me know if the article was at the right level or not, and whether it contained what people need to know.

Conclusion

I have enjoyed writing this article and I hoped that I've explained some useful information regarding Silverlight development. In closing, I would say I quite like this Silverlight stuff, I was pretty convinced that I was not going to like it at the start, just because I enjoyed Flash so much. But something strange happened during this last week, I actually did a complete U-Turn and found out I love Silverlight, and think that when the pukka fully released version of Silverlight comes out, it will be excellent, and will be a true competitor to Flash. And if MSFT listens to the feedback I'm sure future versions will be even better. What would be nice to see is some of the more powerful WPF features such as Templates/Styles and Binding and some user input controls/data controls may be nice too.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)

- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence

Both of these at Sussex University UK.

Award(s)

I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2016
  • Codeproject MVP 2016
  • Microsoft C# MVP 2015
  • Codeproject MVP 2015
  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

Comments and Discussions

 
GeneralMy vote of 5 Pin
Waqas Ahmad Abbasi14-Jun-11 20:47
Waqas Ahmad Abbasi14-Jun-11 20:47 
GeneralExcellent article Pin
coyle_frank4-Sep-09 4:00
coyle_frank4-Sep-09 4:00 
GeneralRe: Excellent article Pin
Sacha Barber4-Sep-09 5:44
Sacha Barber4-Sep-09 5:44 
GeneralRe: Excellent article Pin
Daniel Vaughan22-Dec-09 11:24
Daniel Vaughan22-Dec-09 11:24 
GeneralRe: Excellent article Pin
Sacha Barber22-Dec-09 21:43
Sacha Barber22-Dec-09 21:43 
GeneralRe: Excellent article Pin
Daniel Vaughan22-Dec-09 22:40
Daniel Vaughan22-Dec-09 22:40 
GeneralRe: Excellent article Pin
Sacha Barber22-Dec-09 23:13
Sacha Barber22-Dec-09 23:13 
GeneralRe: Excellent article Pin
Daniel Vaughan22-Dec-09 23:58
Daniel Vaughan22-Dec-09 23:58 
GeneralRe: Excellent article Pin
Sacha Barber23-Dec-09 0:24
Sacha Barber23-Dec-09 0:24 
GeneralRe: Excellent article Pin
Daniel Vaughan23-Dec-09 13:15
Daniel Vaughan23-Dec-09 13:15 
GeneralRe: Excellent article Pin
Sacha Barber23-Dec-09 19:41
Sacha Barber23-Dec-09 19:41 
GeneralGood! Pin
SumanBiswas24-Aug-09 3:49
SumanBiswas24-Aug-09 3:49 
GeneralRe: Good! Pin
Sacha Barber24-Aug-09 4:38
Sacha Barber24-Aug-09 4:38 
GeneralThanks Pin
Xmen Real 2-Mar-09 14:44
professional Xmen Real 2-Mar-09 14:44 
QuestionVS 2008 and Silverlight 2.0 Pin
bnieland18-May-08 7:00
bnieland18-May-08 7:00 
AnswerRe: VS 2008 and Silverlight 2.0 Pin
Sacha Barber18-May-08 21:13
Sacha Barber18-May-08 21:13 
GeneralSilverlight 2.0 Pin
yassir hannoun28-Mar-08 11:56
yassir hannoun28-Mar-08 11:56 
GeneralRe: Silverlight 2.0 Pin
Sacha Barber28-Mar-08 20:59
Sacha Barber28-Mar-08 20:59 
GeneralRe: Silverlight 2.0 Pin
windrago2-Apr-09 14:25
windrago2-Apr-09 14:25 
GeneralRe: Silverlight 2.0 Pin
Sacha Barber2-Apr-09 21:37
Sacha Barber2-Apr-09 21:37 
GeneralThe kind of article... Pin
Azad Giordano Ratzki20-Feb-08 12:20
professionalAzad Giordano Ratzki20-Feb-08 12:20 
GeneralRe: The kind of article... Pin
Sacha Barber20-Feb-08 23:19
Sacha Barber20-Feb-08 23:19 
GeneralCorrection Pin
Valentin Ivanov12-Feb-08 7:46
professionalValentin Ivanov12-Feb-08 7:46 
GeneralRe: Correction Pin
Sacha Barber12-Feb-08 11:01
Sacha Barber12-Feb-08 11:01 
GeneralWow Pin
onemins17-Jan-08 4:33
onemins17-Jan-08 4:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.