Gergely Orosz

This post aims to present a structured collection of resources for developers wanting to get started developing for Windows Phone 7 in Silverlight, but don’t have any Silverlight or WPF experience. I’m also aiming this post at people  who’ve started developing for WP7 without too much WPF/Silverlight experience and would like to learn more about the framework to move on.

Why Silverlight?

Developing for Windows Phone 7 can be done using two frameworks: Silverlight and XNA. XNA is a framework targeting game development. Those who are looking to develop either games or graphically intensive applications are advised to use that framework.

Silverlight, on the other hand started off as a web application framework, a “web” light version of Windows Presentation Framework (WPF), the successor of Windows Forms. Microsoft decided to support Silverlight as the other application development framework on Windows Phone 7 next to XNA, specifically version 3.0 with some extra libraries. It’s safe to say that if one’s goal isn’t game development, the obvious (and easier) choice is to develop applications in Silverlight for WP7.

What is Silverlight?

Silverlight is a similar framework to Adobe Flash, allowing the developer to create applications that manipulate media, are interactive all built on the .NET platform. .NET developers will be familiar with lots of the libraries used, however Silverlight introduces several new concepts and libraries. With Out Of Browser support and Windows Phone 7 development announced, Silverlight is no longer just a web framework, but more an application development platform.

Some useful resources on understanding what Silverlight is:

• What Is Silverlight? A CNET article back from 2007, most of the content is still not outdated though.
• Silverlight Overview on MSDN
• Overview of how Silverlight version differ on silverlight.net. Remember, WP7 supports Silverlight 3.

Developer tools

Silverlight development can be done with Visual Studio 2008 and upwards, I’d recommend using Visual Studio 2010 – a free, express version is available for use. Expression Blend is an additional tool that makes creating the UI much easier.

If you’re planning on doing WP7 development, download the developer tools for WP7 which will either install the expression version of Visual Studio 2010 and a phone version of Expression Blend or if VS and Expression Blend are already installed, it will just add the new supported project types and the emulator.

Understanding how Silverlight Works

There are some key areas anyone from an OO background needs to understand to be able to develop with Silverlight.

XAML

XAML (eXtensible Markup Language) is the markup language for Silverlight. A Silverlight page always consists of a XAML file (the markup) and a code behind file (the logic). Understanding how XAML works is vital to developing any Silverlight applications.

Some useful resources that give on overview of XAML are:

• XAML quickstart on silverlight.net
• Getting started with XAML – a short article by Umiar Saeed
• XAML overwiew on Wikipedia

Silverlight Controls

Building a Silverlight application involves with creating pages, then adding visual elements and controls to them. Silverlight has mostly the same controls as WPF – for someone who’s not worked with any of these, getting to know the basic controls can be challenging. The most important Silverlight controls to get to know are the following:

• Layout controls. Most important ones are Canvas, Grid and StackPanel.
• Input & selection: Button, CheckBox, ComboBox, RadioButton, Slider, TextBoxc
• Text display: TextBlock

The easiest way to explore the tools is to either add them on an example project in Visual Studio 2010 from the toolbox or in Expression Blend. There are also some good resources covering what the individual controls are designed for:

• Silverlight User Interface Controls – from silverlight.net (unfortunately the original article seems to be removed, this is a PDF version of it)
• Overview of Silverlight (and WPF) layout controls by Karl Shifflett
• Silverlight controls overview on MSDN – reference documentation

Styling and templating

Visuals are important in Silverlight and as such, the framework has good support for customization of visual elements. This customization can be done by using Styles on elements or by setting the Template of some controls.

Some resources on understanding styling and templating:

• Styles overview on silverlight.net
• Using Styles in Silverlight 2 – this applies to Silverlight 3 and 4 as well
• Using Style elements to better encapsulate look and feel – an article by Scott Guthrie
• Using templates to customize a control’s look and feel – again by Scott Guthrie

Dependency Properties

Dependency properties are new kinds of properties Silverlight (and WPF) introduces: compared to the standard properties (the CLR properties) they provide additional services: change notification, binding, styling and resetting to default value.

Most of the properties on visual elements are dependency properties meaning they can be bound to, styled and change can be detected on them. Dependency properties are mostly used in bindings and styling – a lot of developers not even always aware that they’re using DPs. Understanding how they work is a stepping stone to understanding how MVVM works.

Some resources on understanding what dependency properties are:

• Demistifying dependency properties – a nifty overview by Josh Smith
• Dependency properties overview on MSDN

MVVM

When writing larger Silverlight applications it’s important both to separate different parts of the application, such as the model, the view and the in between layer and also to be able to test the application as much as possible. The recommended way of designing larger Silverlight (and WPF) applications is using the MVVM: Model-View-ViewModel pattern.

This patterns shows some similarities to the MVC (Model-View-Controller) pattern in terms that it also separates the model and the view. However instead of the controller layer, something different, a ViewModel layer is used which acts as a wrapper around the model, presenting it to the view. The pattern very heavily relies on bindings that are available in Silverlight (and WPF).

Anyone planning on creating a more complex Silverlight application or working on an application with a team should understand and be able to use this pattern. Some good resources on learning MVVM are the following:

• MVVM for tarded folks like me by Jeremiah Morrill – an overview written in a unique (and entertaining) style
• MVVM explained by Jeremy Likness
• MVVM overview on Wikipedia

MVVM can be implemented on its own, but for more complex applications it’s worth using an MVVM framework that has most of the infrastructure implemented. If you’re looking into developing in WP7, the obvious choice is MVVM Light, the only MVVM framework at the moment I’m aware of that works on WP7, Silverlight and WPF.

Unfortunately there are few resources on MVVM Light – you’ll have to explore a lot on your own to master it. The few helpful ones I’m aware of are the following:

• MVVM Light on Silverlight TV
• MVVM Light discussions on Codeplex and MVVM Light questions on Stackoverflow

Other great tutorials

Others have put together great tutorials that help getting started with Silverlight. Some of the ones I’m aware of are the following:

• Scott Guthrie’s 8 part tutorial on building a Digg-like Silverlight application
• A list of quickstarts on silverlight.net – a list of quickstarts covering different topics in Silverlight
• Learn to use Expression Blend – learning to use Expression Blend can be extremely helpful in being more productive when building Silverlight applications

Conclusion

This post aimed to collect useful resources for those wanting to gain some understanding of Silverlight before jumping on to develop for Windows Phone 7 using it, hope you found it useful.

In my next post I’ll be presenting a similar list of resources specifically about developing for Windows Phone 7.