Update 1/27/2009: I posted an updated version of this article targeted for Silverlight Runtime 2.0 here
If you are new to Silverlight, Silverlight 1.1 (currently in Alpha) is the version that will include the .NET CLR and allow you to write Silverlight code with .NET languages such as C#.
Most Silverlight 1.1 C# examples I found on the web use the XAML file to declare and set object properties. In my example, I am going to create and draw most objects from the code behind c# class.
Installing Visual Studio 2008
If you don’t have Visual Studio 2008 already installed. You can download it from here. Downloading and installing Visual Studio 2008 to my Virtual PC took about 3 hours (1 for the download and 2 for the install).
Note: It’s possible to
develop Silverlight 1.1 applications with Visual Studio 2005, but the process is not integrated as with Visual Studio 2008
Installing Silverlight Runtimes and Tools
Install the following runtimes and tools from here. I am linking to the main page instead of the individual downloads just in case the download links change.
- Microsoft Silverlight 1.0 Runtime.
- Microsoft Silverlight 1.1 Alpha September Refresh
- Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta 2 (July 2007)
Create a New Silverlight Project
- In Visual Studio, choose File/New/Project and select Visual C#/Silverlight/Silverlight Project. The Silverlight project type is added when you install the Microsoft Silverlight Tools above.
- Give your project a name.
Silverlight Project Files
After the project has been created, you are presented with the default Page.xaml file:
Your Solution should now have the following files:
For our example, we will be adding code to Page.xaml.cs. This is what Page.xaml.cs looks like initially:
Add Some Code
Ready to write some code (complete source code at the end of the article)? First, we are going to add a Storyboard element to our Page.xaml. This Storyboard element serves as a timer for the animation we are going to display.
Then, we add some code to the Page.xaml.cs file (click here
for simple “Hello World” version… if you just want a simple Hello World app):
public partial class Page : Canvas
/// <summary>Represents a cell on the grid</summary>
private class Cell
public double X; //
x-coordinate of cell
public double Y; //
public bool On; //
True if cell is "on"
public double Order; //
private List<Cell> cells = new List<Cell>();
class="rem">// list of all cells
private int xSize = 26;
class="rem">// width of the grid, in number of cells
private int ySize = 7;
class="rem">// height of the grid
private int numCells; //
total number of cells
private int cellIdx = 0;
public void Page_Loaded(
class="kwrd">object o, EventArgs e)
// Required to initialize variables
// Assign a random value to each cell
Random rnd = new Random(Environment.TickCount);
numCells = (int)(xSize * ySize);
for (int y = 0; y < ySize; y++)
for (int x = 0; x < xSize; x++)
Cell cell = new Cell();
cell.X = x * (this.Width / xSize);
cell.Y = y * (this.Height / ySize);
cell.Order = rnd.NextDouble();
string template = " "
+ " x x xxxx x x xx "
+ " x x x x x x x "
+ " xxxx xxxx x x x x "
+ " x x x x x x x "
+ " x x xxxx xxxx xxxx xx "
+ " ";
for (int i = 0; i < template.Length; i++)
if (template[i] == 'x')
cells[i].On = true;
cells[i].On = false;
// Sort the cells by the random values
delegate(Cell c0, Cell c1)
mainTimer.Completed += new EventHandler(mainTimer_Completed);
void mainTimer_Completed(object sender, EventArgs e)
// Get the next cell
Cell cell = cells[cellIdx];
// Draw the cell
Rectangle r = new Rectangle();
r.Stroke = new SolidColorBrush(Colors.DarkGray);
r.Fill = new SolidColorBrush(Colors.Red);
r.Fill = new SolidColorBrush(Colors.LightGray);
r.Width = this.Width / xSize;
r.Height = this.Height / ySize;
if (cellIdx <= numCells)
// restart the timer
Here’s the simple version of the code:
TextBlock t = new TextBlock();
t.Text = "Hello world!";
Firefox Bug and Workaround
There is a known problem that causes the Silverlight object to not show up in Firefox. To fix the problem, remove the DOCTYPE declaration from the HTML file. See this MSDN forum thread.
Deploying Silverlight Applications to Your Web Server
To deploy my application, I simply copied the files including the ClientBin directory to my web server. Any web server will do (the server that hosts my Hello World application is an apache server).
And Now, Ladies and Gentlements, My Hello World Silverlight App
Download complete source code for this article.