Silverlight 2 Beta 1 Controls Available, including Source and Unit Tests

Get Silverlight 2 Beta 1

If you were watching the Keynote from MIX08, you know that Silverlight 2 Beta 1 is now available for download.

The package includes three components:

1) The Silverlight 2 Beta 1 Runtime - installs the basic Silverlight runtime components

2) The Silverlight 2 SDK - includes - installs tools for building Silverlight applications including the controls

3) Microsoft Silverlight Tools Beta 1 for Visual Studio 2008 - installs a project system for Silverlight that works on Visual Studio 2008, including Silverlight XAML Intellisense, Expression Blend interop, and a design-time view of the Silverlight app that you're building.

Get the Source for the Controls

A few months back, we pulled together a team to build out this list of controls.  As part of this effort, we wanted to make sure we delivered something that would really help customers with using the Beta 1 bits. 

So we decided to do to things:

1) Provide source code for the components so users can use it as a sample, or to make changes to the components themselves.

2) Within that project, also ship the Unit Tests that our developers used when writing the components.

You can also download the Silverlight 2 Beta 1 Controls project package now.   The code in this package exactly matches the controls included with the Silverlight 2 Beta 1 SDK download (for example, TextBox, Image, etc. are implemented directly in the runtime).

Simply download the package and unzip it somewhere on your machine using the self-extracting zip.  Once you've done that, launch the project using the "MixControls.sln" solution in VS 2008.

When you launch the solution, you'll see six projects:

Controls - contains basic controls like Button, Checkbox, etc.

Controls.Extended - contains controls like Calendar, Slider, etc.

Controls.Data - contains the DataGrid control

Controls.Test - Unit tests for the Controls project

Controls.Extended.Test - Unit tests for the Controls.Extended project

Controls.Data.Test - Unit tests for the Controls.Data project

Controls Project Test Projects, Controls.Data, Controls.Extended

As expected, all the source code for the controls is in the project.

image

Testing Silverlight Control Code

You can then run the unit tests for any of the projects by launching it's corresponding "Test" project.  Our test harness runs inside of the browser and runs the unit tests.  There are a lot of them -- almost 1500 for the Controls assembly alone! -- and we've gotten very good code coverage.  In the case of the Controls.Test project, for example, we know we're getting over 80% code coverage from our unit tests.  This facility has allowed us to have very few regressions in our control development work, as well as quickly spot any possible issues in the underlying Silverlight runtime when we pick up daily builds. 

Silverlight Control Unit Tests

As you'd expect, the unit tests are basic but provide some functionality that you need for testing in an animated environment like Silverlight.  For example, if the template for a component defines animations, you need to wait for those to run and for the component to be added to the visual tree before checking the state.  You can't do this synchronously, and you can't access the UI thread from another thread.  So we came up with a unique easy to use system for this that handles all that for you, but still lets you write tests that are in one method and are easy to maintain.

Here's an example:

 

image

CreateAsyncTest takes the component, adds it to the Silveright surface, waits for it's Loaded event to fire, then runs the delegate function you've provided (in this case we're using the C# 3.0 Lambda syntax).  It's very clean and simple and allows very rapid writing and execution of tests.

In the controls themselves, you'll also see lots of things to help you write your own control.  In each controls project, you'll find a file called generic.xaml.  This is where you will find the default templates for all of our controls.  You can either customize this in place, or (preferably) use it as a starting point for creating your own templates.

To use these controls in your Silverlight project instead of the default, just add the DLL to your references as you would with any other .NET project and you're set.

More Resources

We're working on getting more sample apps up to help you do usage and templating of controls, but the online docs really are great, including videos and traditional MSDN content.  For example, check out this topic on templating a Button.  Keep an eye on Silverlight.net for more example apps.

I've found the code in these controls invaluable when building Silverlight applications.  I think you will too!