Creating Hello World in Silverlight 2 - Page 1
       by kirupa  |  27 March 2008

I am not sure why, but ever since the first hello, world example made its way into the world in the 1970's, it seems customary to start an introductory tutorial by having you create a small Hello World application. Nostalgic reasons aside, an application as simple as the one you will create in this tutorial is a great way to become familiar with bits and pieces of the language and tools.

In this tutorial, I will show you how you can use Expression Blend to create a small Silverlight 2 application that does nothing more than print Hello World to the screen:

[ what you will have created by the end of this tutorial ]

The following steps will explain how to to create something similar to what you see above:

1. Before you begin, make sure you have ready my earlier Getting Started article and have Expression Blend 2 SP1 installed.

2. Launch Expression Blend 2. A Welcome Screen should appear, and from this screen, click on the New Project link:

[ from the Welcome Screen, click the New Project link ]

If you do not see a Welcome Screen, then go to File | New Project instead. The end result is the same.

3. After clicking on New Project, the New Project window appears. From this window, select the button for Silverlight 2 Application, for Name enter HelloWorld, and ensure the Language is set to Visual C#:

[ you want to create a new Visual C# based Silverlight 2 Application ]

Click OK to both close your New Project window as well as create your new project with the specified values.

4. You should now see a large area with a big white rectangle-like shape in the middle This area overall is known as the Artboard, and it is here where you will design your Silverlight application:

[ meet the Artboard - it is your friend! ]

5. What we want to do first is add some text to our Artboard. To do that, you use what is known as a Control. Controls are UI elements that provide you custom functionality that you can just use out of the box.
   
   To display text, you have some controls that allow you to...display text! In your Toolbox (the strip of icons on your left), find the icon that contains a T inside it and click it:

[ click on the Text controls category in your Toolbox ]

From the menu that appears, select the TextBlock item. Once you select your TextBlock item, it will seem like nothing happened, but don't worry. Something did happen that isn't immediately evident.

6. Move your mouse over your design area, and notice that your mouse cursor currently displays in a shape resembling a crosshair. When you see something like that, you know something must be up:

[ your mouse cursor changes into a crosshair-like shape ]

Position your crosshair towards the top-left of your design area like you see in the above image and click-and-drag to draw out your Textblock control:

[ you can draw out controls just like you would draw anything else ]

Make your textblock large enough and release your mouse button press to have your textbox actually be drawn. You should see something similar to what is shown in the following image:

[ your new control has been created ]

All right! You created a new project and inserted a textblock control. This seems like a good point to take a small break. We'll pick up from here on the next page!

Onwards to the next page!

1 | 2 | 3