Printer Friendly Version      Send     
Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
Silverlight
 Getting Started with Silverlight
Silverlight 2
Getting Started with Silverlight
[This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]

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.

You can run all the samples presented in this topic without installing anything except the Silverlight 2 Beta 2 runtime. However, if want to build or modify the samples, the following are required:

  • Silverlight 2 Beta 2

  • Silverlight 2 Beta 2 SDK

  • Visual Studio 2008

  • Silverlight Tools Beta 2 for Visual Studio 2008

Note:

This topic assumes you are using Visual Studio 2008 to build your applications. You can create a Silverlight-based application without Visual Studio by using MSBuild. For more information, see Developing a Silverlight Application Assembly.

Follow the instructions in Creating an Application for Silverlight to create a Silverlight-based application.

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 Instantiating a Silverlight Plug-In (Silverlight 2).

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. If you have an existing ASP.NET page, you can embed a MediaPlayer control or a Silverlight server control in your page. For more information, see Integrating Silverlight with ASP.NET Web Pages.

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 (Silverlight 2)

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

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

This following illustration shows how this code renders.

Red Rectangle

You can create all of your UI in XAML, 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 Silverlight QuickStart Using Microsoft Expression Blend.

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.

XAML
<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 following illustration shows how this code renders.

Red Rectangle in Grid

For more information on layout, see Object Positioning and Layout (Silverlight 2).

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, see Control Gallery.

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.

XAML
<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 following illustration shows how this code renders.

Button and Red Rectangle in 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 Overview.

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 (Silverlight 2) and XAML and Mapping Custom XML Namespace Values (Silverlight 2).

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.

XAML
<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 (Silverlight 2).

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

}

The following illustration shows how this code renders.

Button click changed Red Rectangle to Blue

Run this sample

Silverlight 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 2.

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 (Silverlight 2), Geometries (Silverlight 2), and Brushes (Silverlight 2).

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

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

XAML
<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 following illustration shows how this code renders.

Rectangle with linear gradient

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 (Silverlight 2) and Audio and Video Overview (Silverlight 2).

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

XAML
<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>

C#
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();
}

Run this sample

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 Parsing XML Data in Silverlight

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 Communication

Silverlight comes with a subset of the .NET Framework for core programming tasks such as manipulating strings, working with collections, and handling exceptions. It includes classes for all the base data types, exception handling, events and event handling, collections, threading, and synchronization. For more information, see Common Language Runtime and Base Class Library in Silverlight.

© 2008 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker