Lots of people have been asking about how to get started with Silverlight, and what they need to do to get up and running with Silverlight quickly. Inspired by blog posts such as Jesse Liberty's, I'm going to take this from first principles, with no prior knowledge assumed.
Over the series, we'll look at the following:
- Your First Silverlight Application
- Understanding XAML
- Understanding the Blend series of Products
- Building Silverlight applications using Aptana on the Mac
- Building Silverlight applications using Visual Studio Express on the PC
- And whatever else you'd like -- send feedback!
So let's get started with the first and most simple application -- a 'Hello World' in Silverlight. You need no special tools for this. Just notepad will do...
Step 1. Silverlight.js
Step 2. XAML
Silverlight UI is defined using XAML - XML Application Markup Language. Some great resources to get you started with XAML can be found in the Silverlight quickstarts here.
Our simple first application will be a XAML Canvas that contains a TextBlock control which, as its name suggests, renders text.
Here it is:
This pretty simple piece of XAML contains two components.
The first is the root Canvas which is present in every Silverlight XAML. This defines the overall drawing surface. As you can see we are using a 640x480 Canvas which is white.
The second is the Textblock that we mentioned earlier. It renders the text 'Hello World' on the Canvas.
Remember XAML is just XML, so all of the conventions of XML apply. You can see that the TextBlock is a child node of the Canvas, and that XML attributes are used to define the properties of the nodes. Note that this is can empower some pretty cool scenarios -- such as generating UI on the fly from server applications using ASP.NET, PHP or Java. We'll look more into these scenarios later in the series.
Step 3. CreateSilverlight.js
The XAML document that you created in Step 2 should be saved and named. In this example use the name Page.xaml.
Typically we call this file CreateSilverlight.js, and I'm following that defacto standard here. You can download it from here.
This function calls the 'createObjectEx' function which is implemented in Silverlight.js, which you added to your site in Step 1. You'll notice that a 'handleLoad' event has been defined. You'll see how this is implemented in Step 4.
Step 4. Your Application Logic
This simple application allows you to click on the text block, and have the text change from 'Hello World' to 'You Clicked Me'. The code for this application is shown here:
The handleLoad was defined as an event in the createSilverlight function. When Silverlight renders the control it calls this, passing it a reference to the control, the contents of the 'userContext' variable (which can be set in the createSilverlight), and a reference to the root canvas element.
This function finds the text block (called 'txt') and adds an event listener to it. The event that it is listening for is 'MouseLeftButtonDown', and when this happens the function called 'txtClicked' should be called.
When you implement an event handler, your function should accept parameters for 'sender' (the originator of the event) and 'args' (arguments associated with the event)
In this code you can see that when the user clicks the text block, the text will be changed to "You clicked me!"
Step 5. Your HTML Page
Upload all these files to your web server and you're done.
This might have seemed to be a lot just to get a 'Hello World' applicaiton, but it covers the full broad principles of developing a SIlverlight 1.0 application. You saw how to use Silverlight.js and createSilverlight.js, write XAML, load XAML into Silverlight, hook up events and create on-the-fly event handlers.
You can see the application in action here:
In the next part of this series, we'll look at Expression Blend, and how you can use it to design your XAML to make it richer!