John Bower stays calm, and so will you, whilst guiding you to producing your first Silverlight application. It may just be 'Hello World' but soon...
My first Simple-Talk article on Silverlight is geared towards running through the basic requirements for working with Silverlight, Microsoft’s latest addition to .NET, so as to get you up and running quickly
If you have any experience with Flash and/or .NET programming languages such as Visual Basic, or C#, Silverlight should be of some interest. It’s an efficient and suitable alternative to Flash that makes use of the Windows Presentation Foundation. It will appeal to those people who want more from their interactive experiences, or who are unsettled by Adobe’s acquisition, (and subsequent “Adobifying”), of Macromedia’s most popular piece of software. It has immediate attractions for the application programmer because of the ease with which one can access data from SQL Server
Even with prior Flash or .NET experience, though, you will be forgiven for the initial reaction of total bafflement with the development process. It isn’t that intuitive.
Unlike Flash, Silverlight development requires several applications. Whereas Flash authoring can be achieved solely within the Flash Development Environment, Silverlight requires VB or C# for coding, and Microsoft’s Expression Tools for graphical assets and video compression. Silverlight is also very different to Flash in that an SWF file is self-contained, and complex Silverlight projects can require a plethora of separate code and XAML files that coalesce into the end-user’s experience.
Silverlight Years Ahead
Because Silverlight is still under development, and so the paint isn't always dry. It also means that a lot of possibly useful features haven’t been included yet: Most of the time you will need to do a certain amount of code ‘hacking’ in order to work around certain issues. Reading from external text files, for example, is currently impossible unless you give them a mock XML file extension, and you parse them using XML string commands. I’ll cover this workaround in a later article.
Also, because Silverlight is so new, it is unlikely that your target audience even has the 11Mb runtime installed. It is included in the .NET 3.5 update but, as I’ve learned from personal experience, the little yellow shield icon in the system tray, along with all the other bric-a-brac, remains a mystery to a majority of end-users!
Not only that, but the web server hosting your pages online must have .NET 3.5 extensions installed too. Later in 2008 this may be more common, but so far it’s only specialist servers, such as http://www.discountasp.net/., that can offer this. This will soon change, though
“So what’s the point in developing something if people can’t use it?”, I hear you wail.
The point is this: Silverlight is considerably more powerful than Flash. You can easily develop a browser-based application that interacts with SQL Server, and everything runs a LOT faster. Although it is currently unsupported by the majority of PCs, you will soon find it hard to avoid, as it will eventually be forcefully pushed out in future Windows updates.
So, without further ado, this is how to get Silverlight up and running on your computer.
Heading towards the Silverlight
1) Update .NET on your computer
It should go without saying really, but there is no harm in repeating the fact that you will need to make sure you have .NET 3.5 installed on your computer, otherwise Silverlight will not work.
2) Download Visual Studio 2008
If you don’t already have Visual Studio 2008, (or “Orcas”, as it’s affectionately known among the programming under-class), you simply need to follow (This link here) to the Visual Studio website, and download one of the 180-day trial versions .Unfortunately, Microsoft’s cut-down Express versions do not currently support Silverlight, but that is liable to change in the future when Microsoft makes Silverlight more accessible to developers.
Both VB and C# can be used to write Silverlight applications. I will supply VB and C# example code in future Silverlight articles but for the purposes of this tutorial we’re sticking to VB.
3) Download the latest Silverlight runtime
As of the time of writing this article, the latest Silverlight runtime is the Alpha 1.1 Refresh, which can be downloaded by clicking This link
I assume all Silverlight runtime releases will be available from the above site, but there is a link to download it from the official Silverlight website if in doubt
4) Download the Silverlight project templates for Visual Studio
Again, available from the Microsoft website, the templates allow you to start a new Silverlight project from the New Project wizard inside Visual Studio 2008. Although not vital, they’re worth downloading as they save a lot of effort in the long run. The templates are available via This link
5) Optional: Download Microsoft Expression Blend 2
You should be ready to go, but if you require graphical assets (which would be nice!), click This link to download Expression Blend 2. This will allow you to create vector-based assets and export them in XAML format to use in your Silverlight application. We won’t be using Expression Blend for this tutorial, but it is handy to have for future ones.
Phew! That’s the easy bit out of the way! Now to get coding!
Your first Silverlight project (Hello World!)
Start Visual Studio 2008 and click File > New Project
If all has gone well so far, you should be presented with a New Project dialog box that looks similar to this:
Choose a suitable location to save your project files in by clicking the “Browse” button, and pick a name for the project. Then click “OK”, and Visual Studio will create the project based on the files contained in the Silverlight template Zip file (the location of this file is usually: C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\ItemTemplates\VisualBasic\Silverlight\1033\).
Note: This is where your Anti-Virus application may throw an error. If it does, you will need to uninstall it and\or get one that allows hidden “JS” file extensions.
Visual Studio will create five files and a ClientBin folder for you, and will then list them in the Solution Explorer. If you want to dive in to the Silverlight quagmire of inter-file references, you can rename them, but for the purposes of this tutorial we’ll keep them as they are.
- contains information about the layout and design of the application in a format similar to XML. In this file you can specify such things as the background colour, embedded controls, and names that you can reference in your code. This file is referenced by TestPage.html.js, so if you rename it, you will have to edit the reference. Visual Studio has created a Canvas tag, which is basically the container for your controls, and all the controls of your application will go within the Canvas tag. It’s worth making a mental note of the “Loaded” parameter and the “x:Name” parameter for later. I won’t go into the full structure of XAML files here because it has been covered before in other articles, e.g. Getting started with XAML, and anyone who has written XML or HTML should be familiar with the tagging syntax already.
- is the code that is interpreted on the server. It contains the logic that makes the XAML file interactive. This is where we do most of the work in a Silverlight application.
You will notice that there is one function already filled in for you called “page_loaded”. This function is referenced by the Canvas’ “Loaded” parameter in the XAML file, and will run when the Canvas is… loaded!
- is a simple HTML file that contains your embedded application. This is the page that needs to be accessed by your end user’s web browser, so it is likely that you will end up renaming this to something like “index.html” in future projects.
Now you have your files, press F5 (or Start Debugging) to see what happens…
If Internet Explorer runs with a blank page, and “Silverlight Project Test Page” as the title, give yourself a pat on the back! You can change this title in the HTML file’s header section if you think your back deserves another patting.
Now, let’s make it do something interesting! We are going to create a TextBlock in the XAML file, give it a name, and then reference it in the XAML.VB file so we can change the text it displays.
- Open Page.xaml, and add <TextBlock> and </TextBlock> tags between the Canvas tags.
You may notice that Visual Studio’s context sensitive helper will save you a few valuable seconds, and possibly a calorie or two, by filling the tag out for you. Now you have your TextBlock, you need to give it some text to display.
- Between the TextBlock tags type “Hello World!”.
Now hit F5 and see what happens.
Well done! You’ve created your first Silverlight application that does something! Ok, don’t get too excited, that’s just scratching the surface. What we’ll do now is write some code that changes the text after the page loads.
This is where the Canvas’ “Loaded” parameter, and the TextBlock’s “x:Name” parameter come into use. Firstly we will need to create the “x:Name” parameter for the TextBlock.
- Add x:Name=”myText” in the TextBlock’s opening tag
<TextBlock x:Name="myText">Hello World!</TextBlock>
When you’ve done that, save the file.
Now that the TextBlock has a name, we need to reference it in the Page.xaml.vb file, and change the text parameter to something else when the page is loaded.
- Open Page.xaml.vb and add the following line to the “Page_Loaded()” function.
Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
' Required to initialize variables
myText.Text = "Hello Silverlight!"
Hit F5 and see what happens.
The TextBlock still displays “Hello World!”, but once the page has loaded it changes it to “Hello Silverlight!”. This happens before the TextBlock is even rendered, so you can replace “Hello World!” with an extraordinarily inappropriate phrase that would bring displeasure and offence to any sensitive person if you wish, as no one will know!
(Ed: The readers will remember our account of the letter that went to the best customers of a major bank entitled ‘Dear Rich Bastard’, due to a similarly misplaced confidence that nobody would ever see it)
Congratulations! You are now able to update parameters within your code. This is a fundamental part of Silverlight that will prove very useful in any future project you make. Using this technique you can update parameters for any object within your application, be it screen location, colour, font, or anything else for that matter.
This application may seem extraordinarily trivial but, if you have followed all the instructions, you will now have the means to produce real Silverlight applications.
In the next tutorial I will help you to enhance your applications by demonstrating how to set up a loop within Silverlight so you can trigger functions repeatedly for continuous animations, games, and data exchanges.
An alternative to the basic method of manually adding resources directly to a XAML file is to add them at run-time, after the Canvas has loaded. This allows us to create much more dynamic applications. In the next article John Bower will use this more advanced method to create a Storyboard that acts as a high-speed loop - calling a function every few thousandths of a second - to move an Image resource around your Canvas.