Chinh Do

My Silverlight 1.1 Hello World Application

10th October 2007

My Silverlight 1.1 Hello World Application

Update 1/27/2009: I posted an updated version of this article targeted for Silverlight Runtime 2.0 here

Imagine being able to author rich Internet applications in your .NET language of choice, without having to mess with Javascript, cross-browser compatibility issues, or ActionScript. That’s the promise of Microsoft Silverlight 1.1. In this article, I will document my attempt at creating a Silverlight 1.1 “Hello World” application. My Hello World application is a little bit more fancy than the typical one… this one involves some animation, and drawing a few shapes from code.

Silverlight Hello

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.

Creating a new Silverlight Project

Silverlight Project Files

After the project has been created, you are presented with the default Page.xaml file:

Page.xaml

Your Solution should now have the following files:

Page.xaml

The two files that you will be working with are Page.xaml and TestPage.html. Page.xaml stores the markup for the design elements (for more info on XAML, see this MSDN article). TestPage.html is the regular HTML page that will host the main Silverlight object. Silverlight.js is the Javascript helper file for Silverlight applications.

For our example, we will be adding code to Page.xaml.cs. This is what Page.xaml.cs looks like initially:

Page.xaml

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.

<Canvas.Resources
 class="kwrd">>
    <Storyboard x:Name
        class="kwrd">="mainTimer" Duration="00:00:00"
            class="kwrd">/>
</Canvas.Resources>

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):

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.Collections.Generic;

namespace CdoHelloWorld
{
    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; //
                y-coordinate
            public bool On; //
                True if cell is "on"
            public double Order; //
                Display 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
            InitializeComponent();

            // 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();
                    cells.Add(cell);
                }
            }

            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;
                }
                else
                {
                    cells[i].On = false;
                }
            }

            // Sort the cells by the random values
            cells.Sort(
                delegate(Cell c0, Cell c1)
                {
                    return c0.Order.CompareTo(c1.Order);
                }
            );

            mainTimer.Completed += new EventHandler(mainTimer_Completed);
            mainTimer.Begin();
        }

        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);
            if (cell.On)
            {
                r.Fill = new SolidColorBrush(Colors.Red);
            }
            else
            {
                r.Fill = new SolidColorBrush(Colors.LightGray);
            }
            r.Width = this.Width / xSize;
            r.Height = this.Height / ySize;
            r.SetValue(Canvas.LeftProperty, cell.X);
            r.SetValue(Canvas.TopProperty, cell.Y);
            Children.Add(r);
            cellIdx++;

            if (cellIdx <= numCells)
            {
                // restart the timer
                mainTimer.Begin();
            }
        }

    }
}

Here’s the simple version of the code:

TextBlock t = new TextBlock();
t.Text = "Hello world!";
Children.Add(t);

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

Click here.

Source Code

Download complete source code for this article.

kick it on DotNetKicks.com

This entry was posted on Wednesday, October 10th, 2007 at 6:57 pm and is filed under Dotnet/.NET - C#, Programming, Silverlight. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

There are currently 9 responses to “My Silverlight 1.1 Hello World Application”

  1. 1 On August 7th, 2008, Ahmed said:

    Dear Sir, thabnk u for your article.
    I want to develop a rich user interface application for Windows Mobile.
    Since it is very difficul to do animation effects and trasparencies,etc using C# and .Net forms and controls, I had the idea to resort to Silverlight.
    The details of the idea are to embed a HTMLBrowser inside a Form, then navigate to a locally deployed Silverlight page, and finally after the embedded browser renders the page and its silverlight control, be able to react to silverlight events inside C# code and visversa, ie use C# to send something or act on the page control. Is that possible Sir ?
    Thank you in advance.

  2. 2 On October 23rd, 2008, s0uL said:

    I get error when click on “Click here” to view working sample :(

    Silverlight error message
    ErrorCode: 4005
    ErrorType: ParseError
    Message: 4005 An error has occured.
    XamlFile: Page.xaml
    Line: 5
    Position: 17

  3. 3 On October 29th, 2008, Chinh Do said:

    s0uL: Thanks for letting me know. My guess is that the code needs to be updated to work with the latest version(s) of Silverlight. I’ll try to take a look and fix soon.

  4. 4 On January 22nd, 2009, Sam said:

    I am also getting exactly the same error.

    Silverlight error message
    ErrorCode: 4005
    ErrorType: ParseError
    Message: 4005 An error has occured.
    XamlFile: Page.xaml
    Line: 5
    Position: 17

    Please let me know if anyone found the solution.

  5. 5 On January 27th, 2009, My Silverlight 2.0 Hello World Application » Chinh Do said:

    […] is an update my my original article that was based on Silverlight 1.0 alpha. The code for the old article no longer worked with the […]

  6. 6 On January 27th, 2009, Chinh Do said:

    s0uL, Sam: I have posted a updated version of this article targeted for Silverlight 2.0 runtime here: http://www.chinhdo.com/20090127/silverlight-helloworld-2.

  7. 7 On April 6th, 2015, cài đặt win tại nhà quận 1. said:

    Posts understandable, I finished good.thank you admin.

  8. 8 On February 5th, 2016, agario cheat said:

    Right away I am going away to do my breakfast, afterward
    having my breakfast coming yet again to read other news.

  9. 9 On July 19th, 2016, cai win tai nha said:

    Your article Unlimited

Leave a Comment

  • Calendar

  • October 2007
    M T W T F S S
    « Sep   Nov »
    1234567
    891011121314
    15161718192021
    22232425262728
    293031