Share via

  • Article

Silverlight Roadmap

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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.

This topic contains the following sections.

  • Prerequisites
  • Integrating Silverlight into Applications
  • XAML
  • Layout
  • Controls
  • Adding Code Logic
  • Dynamic Languages
  • Graphics
  • Media and Animation
  • Data
  • Networking
  • Run Your Silverlight Application Out of Browser
  • Related Topics

Prerequisites

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.

Integrating Silverlight into Applications

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.

If you want to use Silverlight for only a portion of your application, you may want to call into your HTML page from your Silverlight code and vice versa. For details on how to accomplish this, see HTML Bridge: Interaction Between HTML and Managed Code.

XAML

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.

Here is a simple XAML statement that creates a red rectangle.


<Rectangle Fill="Red" Width="150" Height="100"/>

The preceding example produces output that is similar to the following illustration.

Red Rectangle

You can create all of your UI in XAML, use the design surface of Visual Studio, or you can use Microsoft Expression Blend to design your application. Expression Blend is a designer tool with a WYSIWYG design surface for creating Silverlight-based applications. Expression Blend generates a XAML file that you can edit directly. You can also hook up events and write code-behind with Expression Blend. To learn more, see Walkthrough: Creating a Silverlight Clock by Using Expression Blend or Visual Studio.

Layout

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.

Container

Description

Canvas

Position child elements absolutely in x,y space.

StackPanel

Position child elements relative to one another in horizontal or vertical stacks.

Grid

Position child elements in rows and columns.

In the following example, a Rectangle element is placed in the 1,1 cell of a grid. Grid uses a zero-based index so the rectangle appears in the bottom-right cell.

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Rectangle Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/>
</Grid>

The preceding example produces output that is similar to the following illustration.

Red Rectangle in Grid

For more information on layout, see Silverlight Layout System.

Controls

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.

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Height="25" Width="100" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/>
</Grid>

The preceding example produces output that is similar to the following illustration.

Button and Red Rectangle in Grid

Adding Code Logic

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.

<Button Height="25" Width="100" Grid.Column="0" Grid.Row="0" Click="Button_Click"/>
<Rectangle x:Name="rect1" Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/>

In the code-behind file, define the Click event handler. For more information on using events, see Events Overview for Silverlight.

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    rect1.Fill = New SolidColorBrush(Colors.Blue)
End Sub

private void Button_Click(object sender, RoutedEventArgs e)
{
    rect1.Fill = new SolidColorBrush(Colors.Blue);

}

The preceding example produces output that is similar to the following illustration.

Button click changed Red Rectangle to Blue

Run this sample

Dynamic Languages

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.

Graphics

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 transform graphics and other objects on the screen (e.g. rotate or skew). You can even apply 3D effects. See Transforms and 3-D Effects (Perspective Transforms).

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.

<Rectangle x:Name="rect1"  Width="150" Height="100" Grid.Column="1" Grid.Row="1">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="LightBlue"/>
            <GradientStop Offset="0.4" Color="Blue"/>
            <GradientStop Offset="0.8" Color="Purple"/>
            <GradientStop Offset="1.0" Color="Lavender"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

The preceding example produces output that is similar to the following illustration.

Rectangle with linear gradient

Media and Animation

In addition to static graphics, you can add animations, audio, and video to your application to make it more dynamic and interactive. For more information, see Animation Overview and Audio and Video Overview.

The following example makes the rectangle from the previous example grow and shrink until the Stop button is clicked.

Run this sample

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid.Resources>
        <Storyboard x:Name="AnimateRectangle">
            <DoubleAnimation Storyboard.TargetName="rect1"
                             Storyboard.TargetProperty="Height"
                             From="0" To="100" AutoReverse="True" Duration="0:0:02"
                             RepeatBehavior="Forever"/>
            <DoubleAnimation Storyboard.TargetName="rect1"
                             Storyboard.TargetProperty="Width"
                             From="0" To="100" AutoReverse="True" Duration="0:0:04"
                             RepeatBehavior="Forever"/>
        </Storyboard>
    </Grid.Resources>

    <Button Height="25" Width="100" 
            Grid.Column="0" Grid.Row="0"
            Content="Stop"
            Click="Button_Click"/>
    <Rectangle x:Name="rect1"  Width="150" Height="100" Grid.Column="1" Grid.Row="1" Loaded="OnLoaded">
        <Rectangle.Fill>
            <LinearGradientBrush>
                <GradientStop Offset="0" Color="LightBlue"/>
                <GradientStop Offset="0.4" Color="Blue"/>
                <GradientStop Offset="0.8" Color="Purple"/>
                <GradientStop Offset="1.0" Color="Lavender"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Button Height="25" Width="100" 
            Grid.Column="0" Grid.Row="1"
            Content="Start"
            Click="Button_Click_1"/>

</Grid>

Private Sub OnLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    AnimateRectangle.Begin()
End Sub

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    AnimateRectangle.Pause()
End Sub

Private Sub Button_Click_1(ByVal sender As Object, ByVal e As RoutedEventArgs)
    AnimateRectangle.[Resume]()
End Sub

private void OnLoaded(object sender, RoutedEventArgs e)
{
    AnimateRectangle.Begin();
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    AnimateRectangle.Pause();

}

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    AnimateRectangle.Resume();
}

Data

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.

Networking

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.

Run Your Silverlight Application Out of Browser

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.