Silverlight Roadmap

Silverlight

This topic provides an introduction to the main features for developing a Silverlight-based application. It includes common steps for creating a Silverlight-based application with code examples to get you started writing code.

You can run all the samples presented in this topic without installing anything except the Silverlight 5 runtime. However, if you want to build or modify the examples, you'll need the Silverlight tools and a working Silverlight project. For more information, see Silverlight Tools and How to: Create a New Silverlight Project.

This topic uses the managed API for Silverlight. You can also develop Silverlight-based applications using the JavaScript API for Silverlight. For more information, see Application and Programming Models.

A Silverlight-based application is the content loaded by the Silverlight plug-in on an HTML page. The Silverlight plug-in can fill the entire HTML page or just a portion of the space. By default, the Visual Studio project allows the plug-in to take up 100% of the width and height of your page. For details, see How to: Add Silverlight to a Web Page by Using HTML.

XAML is a declarative markup language that you can use to define the UI elements for your Silverlight-based application. When you create a new Visual Studio project, a Page.xaml file is created automatically. In the XAML file, you can create objects and define their properties using XML tags and attributes. For more on XAML, see XAML Overview.

When creating a Silverlight-based application, one of the first things you'll need to decide is how to lay out your UI. Silverlight provides 3 layout panels for you to use. The default panel is Grid, which is the most flexible and powerful layout panel.

Controls in Silverlight allow you to host content or other controls and can be designed to display state changes to the user. Controls range in functionality from elements that allow user interaction, such as Button or TextBox, to elements that support complex layout of information, such as DataGrid. For a list of all the controls that are available with the run-time and SDK, see Controls and Dialog Boxes. For a selection of even more controls, see the Silverlight Toolkit.

Silverlight comes with default templates for each control that affect how the control looks. However, your can create custom templates to change the appearance and visual behavior of all the controls. For more information, see Control Customization.

The following example takes the previous example and adds a button to the 0,0 cell of the grid.

By default, your Visual Studio project includes a code file, sometimes called a code-behind file. The code file contains one of the managed languages supported by Silverlight through the common language runtime (CLR), such as C# or Visual Basic. For more information on the CLR and Silverlight, see Common Language Runtime.

The code-behind file name takes Page.xaml and appends the language type (for example, Page.xaml.cs). The code-behind file is where you can apply logic to your XAML objects. You can create UI objects in code and add them to your visible element tree. In addition, classes created in your code-behind file (and in any code file included in your project) can be accessed from XAML. For example, you can define your own controls and then create instances of them in XAML. For more information, see XAML Namescopes and Silverlight XAML Namespaces, and Mapping XAML Namespaces as Prefixes.

The following example adds a Click event handler that will change the color of the rectangle to blue.

In XAML, add the Click event to the Button and an x:Name attribute to the Rectangle. The x:Name allows you to reference the rectangle in the code-behind file.

Silverlight tools for Visual Studio includes the dynamic language runtime (DLR), which enables users of dynamic languages such as Python and Ruby to write Silverlight-based applications. Dynamic languages are packaged as source code, not compiled into assemblies, and code can be generated and compiled at run time. They are well-suited to a flexible, interactive development style. Silverlight includes three dynamic languages: IronPython, IronRuby, and Managed JScript. For more information, see Dynamic Languages in Silverlight.

Silverlight provides many options for adding interesting visual features to your application. You can use drawing, shapes, paths, and complex geometries. Areas defined by geometries can be filled with effects, such as images, color gradients, or video clips, by using brushes. For more information, see Shapes and Drawing, Geometries, and Brushes.

You can add images and image effects to your application. Silverlight also includes Deep Zoom, which allows you to easily zoom and pan large detailed images. For more information, see Imaging and Deep Zoom.

The following example fills the rectangle with a linear gradient brush.

Many Silverlight-based applications work with data. You can display data sets using controls such as DataGrid and ListBox. To populate the UI, you can use Data Binding. If you bind your UI to your data object, updates to the object automatically propagate to your UI.

Data might come into your application from a variety of sources, such as an RSS feed, but often it is in XML format. Silverlight includes XmlReader and LINQ for parsing XML data. LINQ has advantages if you are parsing smaller pieces of data. For more information, see XML Data.

Silverlight provides several features for communicating in the cloud. The WebClient class handles downloading of content to the client. You can also use WebClient to send and receive plain XML messages. Your Silverlight-based application can also access Web services such as Windows Communication Foundation (WCF), SOAP, and ASP.NET AJAX. For more information, see Networking and Web Services.

In addition to distributing your Silverlight-based application online, you can also configure your application so that users can install it from a website and then run it on their computer outside the web browser. For more information, see Out-of-Browser Support.