Visual Studio 2008 support for building SilverLight applications

While not baked into the development environment, building SilverLight applications in Visual Studio 2008 is much easier than in Visual Studio 2005. With Visual Studio 2005 to be able to build a SilverLight application, you need to create a class library and add/remove a few assembly references and a few extra things. You can read more on this in the Orcas required post on the SilverLight forums. 

Instead, you can download the Microsoft SilverLight Tools Beta 1 for Visual Studio 2008 which will install SilverLight 2 (formerly SilverLight 1.1) beta 1 and the SilverLight project templates for you. The SilverLight 2 release comes with a “Go-Live” license, more information on the Go-Live license can be found in the post Exploring the SilverLight 2.0 “go-live” license.

The main difference between SilverLight 1.0 and SilverLight 2.0 is that do build SilverLight 1.0 applications you have to use JavaScript but for SilverLight 2.0 you can use .NET languages such as C# & VB.NET SilverLight 2.0 also includes additional controls. You can find out more about the differences in the SilverLight Feature Matrix.

Building a simple SilverLight form with Visual Studio 2008
After installing the SilverLight tools for Visual Studio 2008 the visual studio project templates become available to you as you can see below.



Using the above templates you can create a SilverLight Application or a SilverLight Class library, a SilverLight application is sufficient in most situations but you might consider a class library when you want to build a SilverLight assembly shared by multiple projects or creating custom controls for SilverLight. See Developing a SilverLight Library Assembly for more on that topic.

SilverLight 2.0 Controls
When you create a SilverLight Application using the SilverLight 2.0 tools for Visual Studio 2008 you will see the following list of controls available that you can use in your application, including new ones such as the Textbox, Radio and Checkbox controls.



As you can see from the list of controls available, you can use some of those controls to build a web form that has a much richer experience that traditional web forms not built with SilverLight. Below is a simple example demonstrating this.

Adding form elements into the Visual Studio 2008 SilverLight Designer



When the new project is created you see the following layout with your XAML files created including the Page.xaml, which is the file hosting our SilverLight form and the XAML/Design split view.

In the current version of the SilverLight tools for Visual Studio 2008 there is no support for dragging items into design view which is why I really like the split view feature of Visual Studio 2008 as it lets you drag your controls into the XAML code view and see an instant preview in the design view.

For this form let’s add a Textbox, Button and set some styling properties as shown below



As can be seen above the items we added are showing on top of each other, the reason for that is that we have not applied any positioning to the items we’ve just added. To do so we need to add those items into a canvas so that we can position them on the form as shown below.



We position the elements by specifying values for the Canvas.Left & Canvas.Top values as shown below with the button element. Note how we have access to XAML intellisense as can be seen on the Textbox properties.

Applying some styling




The screenshot above shows how with just a little bit of XAML code we can apply some styling to our form.

Now that the form is styled we need to actually be able to use it. Before we add events to our form elements we need to specify an element name so that we can reference those elements from the server side code. This is done by using the x:Name property as shown below.



Handling Events
To handle events on your form elements you need to bind some methods to your events as shown below where we bind some code to the Click event.



After selecting the click event, tab over the new event handler shown below.



This creates an event handler method in the server side code and binds that method to the event. We can now go to the code and implement that method as shown below.



So if all goes well our Textbox text should update and display “Text has changed...!!!”

Executing and debugging SilverLight code
We test if our code will work by adding a break point into the method above and debug.



The screenshot above shows us a breakpoint in the event handler method for the button with a tool tip showing the current text.

Final result



And finally once the code has run we can see that our Textbox text has been updated and our form is displayed with all the style attributes we’ve applied including the Opacity and transformations.

Download Visual Studio 2008 90 day trial
For detailed information and to request a free 90-day trial DVD of Visual Studio 2008 Team Suite to be sent out to you, go to the Microsoft Visual Studio webpage.

About the Author
Daniel Wissa is a Web Developer working in Christchurch. He has a B.Com. from the University of Canterbury where he studied Information Systems and Computer Science and is also a MCAD in .NET.

He has been involved with Microsoft and Microsoft communities for many years since being a Student Partner at Canterbury University a few years ago to currently leading the Christchurch .NET user group. He also maintains a blog http://www.dan.net.nz where he regularly blogs about Microsoft technologies, local user group events and more.



Other related posts:
Writing your own Html Helpers for the ASP.NET MVC Framework
Automating Visual Studio 2008
Windows Azure Table Storage - Getting Started - Part 2