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