Silverlight Foundations: Hello, World!

Silverlight is Microsoft's new platform for developing Rich Internet Applications. Instead of being constrained by the limitations of HTML, .NET developers can use their skills to create even more powerful applications in the browser than is possible with ASP.NET. But unless you've been living under a rock for the past year and a half, you already know that. What you might not know is how in the world to get started using this exciting new technology in your own projects. We have already released the RadControls for Silverlight 2 beta (which will be officially released alongside the release of Silverlight 2), and these new controls are sure to make development in Silverlight easier. But new technologies take time to learn and finding the time to learn them can be tough. So to help smooth out that learning curve for you, I'd like to devote a few posts to covering some of basics so you can get  jumpstart on developing your own Silverlight applications.

Setting Up Your Dev Environment

To get started developing your first Silverlight application, you'll need to install a few things. However, before you install anything I highly recommend you switch to a test machine or virtual machine for Silverlight 2 development. Due to the fact that beta releases are often unstable, and can be a headache to remove or upgrade, I always install them in their own little sandbox. So until Silverlight 2 is RTM, I recommend this practice to you as well.

As for software requirements, you must first install Visual Studio 2008 and update it with Service Pack 1. Next, install Silverlight Tools Beta 2 for Visual Studio 2008. The Silverlight Tools package is an add-on to Visual Studio which provides C# and VB project templates, intellisense for XAML, debugging support, Expression Blend integration, and more. You can read the details here. Once you have Silverlight Tools installed on your machine, you are ready to write your first Silverlight app.

Hello, World!

To create a Silverlight project, open Visual Studio and select File | New | Project... In the New Project dialog, select Visual C# | Silverlight | Silverlight Application. For purposes of this example I will use the C# programming language, but it should be noted that Silverlight applications can be created in any .NET language, so feel free to create your new project in the language of your choice.

<

When the new Silverlight project is created, a dialog pops up asking if you'd also like to create an ASP.NET web application to host your Silverlight app. You are presented with the following two choices:

• Add a new Web to the solution. This option will add a new ASP.NET Web Application project to your solution, which can be used to host your Silverlight application.
• Dynamically generate an HTML test page. This option simply generates an HTML page for you to test your Silverlight application in when you run your project.

For now, we'll go ahead and select the second choice and let Visual Studio dynamically create an HTML test page for us. The project is then loaded into Visual Studio and we are presented with a split view of our designer and source code. Modify the content of your Page.xaml file with the following XAML.

 1: <UserControl x:Class="HelloWorld.Page"

 2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

 3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

 4: Width="400" Height="400">

 5: <Grid x:Name="LayoutRoot" Background="White">

 6: <Grid.RowDefinitions>

 7: <RowDefinition />

 8: <RowDefinition />

 9: </Grid.RowDefinitions> 

 10: <TextBlock x:Name="TextBlock1" 

 11: Grid.Row="0" 

 12: TextAlignment="Center"

 13: VerticalAlignment="Center"

 14: FontSize="40"/> 

 15: <Button Grid.Row="1" 

 16: Margin="50"

 17: FontSize="50"

 18: Content="Click Me!"

 19: Click="OnClick"/>

 20: </Grid>

 21: </UserControl>

This XAML will add a Grid control to your page. The Grid control will have a white background and contains two rows. Below the row definitions I have added a TextBlock, a control similar to the ASP.NET Label, and added it to the first row of the Grid by setting the Grid.Row property to 0. It is centered inside the row using the TextAlignment and VerticalAlignment properties, and its font set using the FontSize property. The TextBlock has also been given a unique identifier of TextBlock1 by setting the x:Name property. Below the TextBlock I have added one more control, the Button. It was added to the second row of the Grid by setting the Grid.Row property to 1. By default the Button will stretch to fill out the row it is contained within, so it's Margin property was set to 50 to shrink it down a bit. It's Content property holds the text displayed on the button and is set to "Click Me." Finally, the Button's OnClick property has been set, so you must jump into the code-behind of Page.xaml to add the proper event handler for the Button's Click event. I'll keep it simple in this example and simply set the text of the TextBlock to "Hello World."

 1: using System;

 2: using System.Windows.Controls;

 3:  

 4: namespace HelloWorld

 5: {

 6: public partial class Page : UserControl

 7:     {

 8: public Page()

 9:         {

 10:             InitializeComponent();

 11:         }

 12:  

 13: void OnClick(object sender, EventArgs args)

 14:         {

 15:             TextBlock1.Text = "Hello, World!";

 16:         }

 17:     }

 18: }

Now you can click the Run button or hit F5 to launch your application in the browser. When the application loads you can click the button and see the "Hello World" message.

Congratulations, you have just completed your first Silverlight 2 application.

Stay Tuned

Be sure to keep an eye out for future "Silverlight Foundations" posts which will cover more of the introductory information you need to get started developing your own Silverlight applications. If there are topics you would like to see covered or are having difficulty understanding, please let me know and I'll do my best to get that information to you in future posts.