1.

Silverlight Overview
Microsoft Silverlight is a cross-browser, cross-platform implementation of the .NET Framework
for building and delivering the next generation of media experiences and rich interactive
applications (RIA) for the Web. Silverlight unifies the capabilities of the server, the Web, and the
desktop, of managed code and dynamic languages, of declarative and traditional programming,
and the power of Windows Presentation Foundation (WPF).

1.1. What Is Silverlight?

Silverlight enables you to create a state-of-the-art application that has the following
features:

 It is a cross-browser, cross-platform technology. It runs in all popular Web

browsers, including Microsoft Internet Explorer, Mozilla Firefox, and Apple
Safari, and on Microsoft Windows and Apple Mac OS X.
 It is supported by a very small download that installs in seconds.
 It streams video and audio. It scales video quality to everything from mobile
devices to desktop browsers to 720p HDTV video modes.
 It includes compelling graphics that users can manipulate—drag, turn, and
zoom—directly in the browser.
 It reads data and updates the display, but it doesn't interrupt the user by refreshing
the whole page.

1.2. What Features Are in Silverlight?

Silverlight combines multiple technologies into a single development platform that
enables you to select the right tools and the right programming language for your needs.
Silverlight offers the following features:

 WPF and XAML. Silverlight includes a subset of the Windows Presentation

Foundation (WPF) technology, which greatly extends the elements in the browser for
creating UI. WPF lets you create immersive graphics, animation, media, and other
rich client features, extending browser-based UI beyond what is available with
HTML alone. Extensible Application Markup Language (XAML) provides a
declarative markup syntax for creating elements.
 Extensions to JavaScript. Silverlight provides extensions to the universal browser
scripting language that provide control over the browser UI, including the ability to
work with WPF elements.
 Cross-browser, cross-platform support. Silverlight runs the same on all popular
browsers (and on popular platforms). You can design and develop your application
without having to worry about which browser or platform your users have.

Silverlight – Compiled by Krishna Alaparthi Page 1 of 20

  Integration with existing applications. Silverlight integrates seamlessly with your
existing JavaScript and ASP.NET AJAX code to complement functionality you have
already created.
 Access to the .NET Framework programming model and to associated tools. You
can create Silverlight-based applications using dynamic languages such as IronPython
as well as languages such as C# and Visual Basic. You can use development tools
such as Visual Studio to create Silverlight-based applications.
 Networking support. Silverlight includes support for HTTP over TCP. You can
connect to WCF, SOAP, or ASP.NET AJAX services and receive XML, JSON, or
RSS data.
 LINQ. Silverlight includes language-integrated query (LINQ), which enables you to
program data access using intuitive native syntax and strongly typed objects in .NET
Framework languages.

1.3. Running Silverlight-Based Applications

Silverlight-based applications run in the browser. Silverlight makes sure that you can run
your applications in all modern browsers, without having to create browser-specific code.

To run a Silverlight-based application, users require a small plug-in in their browser. The
plug-in is free. If users do not already have the plug-in, they are automatically prompted
to install it. The download and installation take seconds and require no interaction from
the user except permission to install.

2. Silverlight Architecture

Silverlight – Compiled by Krishna Alaparthi Page 2 of 20

 2.1. Core Presentation Components
The core presentation features of the Silverlight platform, shown in the previous section
and illustration, are described in the following table.

Feature Description
Handles inputs from hardware devices such as the keyboard and mouse,
Input
drawing, or other input devices.
UI
Renders vector and bitmap graphics, animations, and text.
rendering
Features playback and management of various types of audio and video
Media
files, such as .WMP and .MP3 files.
Deep Zoom Enables you to zoom in on and pan around high resolution images.

Silverlight – Compiled by Krishna Alaparthi Page 3 of 20

 Supports extensible controls that are customizable through styling and
Controls
templating.
Layout Enables dynamic positioning of UI elements.
Data
Enables linking of data objects and UI elements.
binding
DRM Enables digital rights management of media assets.
XAML Provides a parser for XAML markup.

2.2. The .NET Framework for Silverlight

The following table describes a partial list of the .NET Framework for Silverlight features
shown in the previous illustration.

Feature Description
Supports Language-Integrated Query (LINQ) and LINQ to XML features,
which ease the process of integrating and working with data from
Data
disparate sources. Also supports the use of XML and serialization classes
for handling data.
A set of .NET Framework libraries that provide essential programming
Base class library functions, such as string handling, regular expressions, input and output,
reflection, collections, and globalization.
Window Provides features to simplify access to remote services and data. This
Communication includes a browser object, HTTP request and response object, support for
Foundation cross-domain HTTP requests, support for RSS/Atom syndication feeds,
(WCF) and support for JSON, POX, and SOAP services.
CLR (common Provides memory management, garbage collection, type safety checking,
language runtime) and exception handling.
WPF (Windows
Provides a rich set of controls, including Button, Calendar, CheckBox,
Presentation
DataGrid, DatePicker, HyperlinkButton, ListBox, RadioButton, and
Foundation)
ScrollViewer.
controls
Supports the dynamic compilation and execution of scripting languages
DLR (dynamic such as JavaScript and IronPython to program Silverlight-based
language runtime) applications. Includes a pluggable model for adding support for other
languages for use with Silverlight.

Silverlight – Compiled by Krishna Alaparthi Page 4 of 20

3. Contrasting Silverlight and WPF
Silverlight and Windows Presentation Foundation (WPF) both allow you to develop rich user experience
applications based on XAML and the .NET Framework. However, there are some differences between
these platforms, and these differences have to be carefully considered when transitioning an application
between Silverlight and WPF or when building an application that targets both WPF and Silverlight

3.1. Silverlight and WPF Architectural Overview

Windows Presentation Foundation (WPF) provides developers with a unified programming model
for building rich Windows Forms applications that incorporate user interface (UI), media, and
documents. WPF enables software developers to deliver a new level of "user experience" (UX) by
providing a declarative-based language (XAML) for specifying vector-based graphics that can
scale and take advantage of hardware acceleration.

Silverlight is a cross-browser, cross-platform implementation of the .NET Framework for delivering

next-generation rich interactive media and content over the Web and for developing browser-
hosted Rich Internet Applications (RIAs) that can integrate data and services from many sources.
Silverlight enables developers to build applications that significantly enhance the typical end user
experience, compared with traditional Web applications. Like WPF, Silverlight provides a XAML-
based language to specify user interfaces.

Silverlight and WPF share many of the same features and capabilities, but they are built on top of
different run-time stacks, as illustrated in the figure below. WPF leverages the full .NET Framework
and executes on the common language runtime (CLR). Silverlight is based on a subset of XAML
and the full .NET Framework, and it executes on a browser-hosted version of the CLR.

Silverlight – Compiled by Krishna Alaparthi Page 5 of 20

3.2. Differences between Silverlight and WPF
To keep Silverlight small and lightweight, some WPF and .NET Framework features are not
available in Silverlight. Because of this, there can be subtle—and not so subtle—differences that
have to be carefully considered when moving an application between Silverlight and WPF or
when building an application that targets both WPF and Silverlight.

This section describes some of the major differences the patterns & practices team encountered
during the development of the Composite Application Guidance for WPF and Silverlight. These
differences relate to Silverlight 2.0 and WPF 3.5, the current versions at the time of this writing.

3.2.1. Resources
Resources are simple collections of key-value pairs that can store almost any element
(strings, brushes, styles, data sources, and many others). Resources can be associated with
almost any element class that exposes a Resources property of type
ResourceDictionary. The following are the main differences between Silverlight and WPF
concerning resources:

 Resources can contain static or dynamic content. Dynamic content can be

changed at any time and consumers of the resource will be automatically
updated. Dynamic resource references are not supported in Silverlight; therefore,
only static resource references are available.
 Merged dictionaries are useful for separating resources so that they can be
shared within the application as if they were in a single logical location. Silverlight
does not currently support MergedDictionaries. Global resources can be defined
in the App.xaml file or locally in each user control that will use the resource.

Silverlight – Compiled by Krishna Alaparthi Page 6 of 20

 3.2.2. Styles
There are several differences between Silverlight and WPF when using styles. You should be aware
of the following limitations in Silverlight:

 After you set a style to a FrameworkElement at run time, it cannot be subsequently

changed.
 Style inheritance is not supported, because the BasedOn property is not available.
 Silverlight does not support implicit styles applied using the TargetType attribute value.
If you define an application-level style for a specific user control, it will not be
automatically applied to all instances of the user control; instead, you must explicitly
reference the style by its key for each control instance.

3.2.3. Triggers
Triggers allow designers to define the visual behavior of a control by declaratively specifying how
its properties change in response to events or property changes, such as highlighting a button
when it is clicked. Typically, triggers are fired when a property of a control changes and results in
one or more other properties of that control also changing. Triggers are defined inside a style and
can be applied to any object of the specified target type.

Silverlight does not support triggers in Styles, ControlTemplates, or DataTemplates (the

Triggers collection does not exist on these elements). However, similar behavior can be achieved
by using the Silverlight Visual State Manager (VSM) to define interactive control templates. Using
VSM, the visual behavior of a control, including any animations and transitions, are defined in the
control template. This can be easily done by using Blend 2.5. However, be aware that the XAML
file will get more complex and that control templates built for Silverlight are not yet compatible
with WPF.

3.2.4. Data Binding

Both WPF and Silverlight provide data binding support. The following are the main differences
between Silverlight and WPF data binding:

 In Silverlight, there is no support for the ElementName property in the binding syntax, so
the property of a control cannot be bound to a property in another control. In addition,
Silverlight does not support the RelativeSource property, which is useful when the
binding is specified in a ControlTemplate or a Style.
 In Silverlight, there is no OneWayToSource data flow mode.
 In Silverlight, there is no UpdateSourceTrigger property. All updates to the source in the
two-way binding mode occur immediately, except in the case of TextBox, in which case
changes are propagated to the source when the focus is lost.
 In Silverlight, you cannot bind directly to XML data. A possible workaround for this is to
convert the XML to CLR objects, and then bind to the CLR object.
 In Silverlight, there is no XMLDataProvider class.

Silverlight – Compiled by Krishna Alaparthi Page 7 of 20

  In Silverlight, there is no support for binding validation rules. Controls in Silverlight can be
configured to raise an event to indicate that a validation error has occurred.
 In Silverlight, there is no ReadOnlyObservableCollection; however,
ObservableCollection is supported. ReadOnlyObservableCollection is a read-only
wrapper around the ObservableCollection. The ObservableCollection represents a
dynamic data collection that provides notifications when items get added, removed, or
when the whole collection gets refreshed.
 In Silverlight, there is no CollectionView class. In WPF, this class represents a view for
grouping, sorting, filtering, and navigating a data collection. The ICollectionView
interface is available in Silverlight; by using this, developers can create their own
CollectionView implementations, although most Silverlight controls do not automatically
interact with this interface.
 In Silverlight, there is no DataTemplateSelector class. In WPF, this class provides a way
to choose a DataTemplate based on the data object and the data-bound element.

3.2.5. Commanding
The following are the differences between Silverlight and WPF regarding commanding:

 Routed commands are not available in Silverlight. However, the ICommand interface is
available in Silverlight, allowing developers to create their own custom commands. The
Composite Application Library provides the DelegateCommand and
CompositeCommand classes to simplify command implementation.
 In WPF, controls can be hooked up to commands through their Command property. By
doing this, developers can declaratively associate controls and commands. This also
means a control can interact with a command so that it can invoke the command and
have its enabled status automatically updated. Silverlight controls do not currently
support the Command property. To help work around this issue, the Composite
Application Library provides an attached property-based extensibility mechanism that
allows commands and controls to be declaratively associated with each other.
 There is no input gesture or input binding support in Silverlight.

3.2.6. Miscellaneous
The following are some miscellaneous differences between Silverlight and WPF:

 In Silverlight, the UIElement class has an internal constructor; therefore, you cannot
create a control inheriting from it.
 In Silverlight, there is no x:type markup extension support or support for custom markup
extensions.
 In Silverlight, items added to a TabControl control are not automatically wrapped inside
a TabItem type, as is the case with WPF.

4. Application Structure

Silverlight – Compiled by Krishna Alaparthi Page 8 of 20

 When you create a Silverlight-based application using the managed API, the build process generates
an application package. An application package is a zip file (compressed using the Deflate algorithm)
that has a .xap file extension

4.1. The Application Package

An application package contains the following files:

 One AppManifest.xaml file, which identifies the packaged assemblies and the application
entry point.
 One application assembly, which includes your application class.
 Zero or more library assemblies.
 Zero or more loose resource files, such as images or video files.

The AppManifest.xaml file is typically generated by the build process, and uses XAML markup
to declare a Deployment object for your application.

In the AppManifest.xaml file, the Deployment element includes the following attributes:

 A RuntimeVersion attribute to identify the required version of Silverlight.

 EntryPointType and EntryPointAssembly attributes to identify the application entry
point.

The following diagram summarizes the application package structure and deployment options for
your application files.

Silverlight – Compiled by Krishna Alaparthi Page 9 of 20

4.2. Application Services
When you create an application using the managed API for Silverlight, you must create a class
that derives from Application. The Application class provides several services that applications
commonly require. Primarily, it represents the entry point of your application code in the
Silverlight plug-in life cycle.

The Silverlight plug-in life cycle begins when a user navigates to a Web page that hosts the
Silverlight plug-in. If the user has installed Silverlight, the Web browser activates the plug-in and
begins downloading your application package.

The plug-in loads the Silverlight core services followed by the Silverlight common language
runtime (CLR), which creates an AppDomain for your application. When your application
package download is complete, the CLR instantiates your Application class and raises its Startup
event.

You can add code to your application class constructor. However, you typically use a Startup
event handler for most application initialization tasks, such as displaying a user interface page.

Silverlight – Compiled by Krishna Alaparthi Page 10 of 20

The following diagram illustrates the plug-in activation process and the relationship between
components in the process.

5. Silverlight Splash Screens

In the Silverlight managed API, the client requires assemblies referenced in the manifest to
be downloaded and loaded into the application’s AppDomain before the application is
instantiated. Also, your application design may want to preload certain resources and assure
that these are available before the application is ready for interaction, even if that means not
displaying the application until the download is complete. The splash screen is an initial
content area that can display to the user while other content is still loading.

You cannot use this splash screen model effectively if your main source content is using the
JavaScript API also. This is because the splash screen model relies on the notification that
comes from a loaded managed AppDomain as the signal to stop displaying
SplashScreenSource and start displaying Source. You could simulate the same apparent
transitional behavior by the following sequence:

1. Load an initial Source XAML page that is the "splash screen".

2. Initiate the download of the main source XAML page and any initial resources such
as images or videos that the page requires, using Downloader.
3. As soon as each Downloader raises Completed for all content, change the actual
Source value at the HTML DOM level, which unloads the "splash screen" and loads
your primary content. The transition is instant at this point because each required
element is already preloaded into the browser cache.

5.1. The Default Splash Screen Experience

The default experience that is defined for Silverlight under the managed API is that any load that
exceeds a certain time threshold (approximately 0.5 seconds) will display a XAML-based
animation in the content area. The XAML that displays the default animation and the initiation
sequence are hard-coded into the Silverlight plug-in.

Silverlight – Compiled by Krishna Alaparthi Page 11 of 20

To replace the default splash screen, you provide a value for the splashScreenSource parameter
of the Silverlight plug-in's defining object element in HTML.

5.2. Splash Screen Scenarios

 Download Progress
 Animations
 Branding
 Product Information

5.3. Adding the Custom Splash Screen

1. Create a Silverlight Application with name “SplashScreenSource”.

2. Right-click SplashScreenSource.Web in the Solution Explorer and choose Properties.
Click the Web tab. Change the Start Action default page from
SplashScreenSourceTestPage.aspx to SplashScreenSourceTestPage.html.
3. Right-click SplashScreenSource.Web in the Solution Explorer and choose Add, New
Item. Select the Silverlight option in the Categories tree view. Choose the Silverlight
JScript Page option. Name the page SplashScreen.xaml. Click Add.
4. Open SplashScreen.xaml for editing, if it is not already open. This is where you will
author your splash screen. Select All, and Paste over the existing code with the following,
then save the file:

<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="parentCanvas"
Width="850"
Height="600"
Background="OldLace"
>
<Canvas Canvas.Top="228.834" Canvas.Left="246.329" Width="357"
Height="31.379">
<Rectangle Width="27.545" Height="1" x:Name="uxProgress"
Canvas.Top="29.545" Canvas.Left="1.4">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="0"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="270"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FF2975D0" Offset="0.28"/>

Silverlight – Compiled by Krishna Alaparthi Page 12 of 20

 <GradientStop Color="#FF2975D0" Offset="0.72"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

<TextBlock x:Name="uxStatus" Height="25" Canvas.Left="125"

Text="Loading..." TextWrapping="Wrap" Canvas.Top="4.16"/>

<Path Width="356.85" Height="1" Fill="#FF3A3A3A" Stretch="Fill"

Stroke="#FF000000" Canvas.Top="0" Data="M0,170.5 L356.84209,170.5"
Opacity="0.35"/>
<Path Width="1.662" Height="29.03" Fill="#FF3A3A3A" Stretch="Fill"
Stroke="#FF000000" Canvas.Top="0.48" Canvas.Left="0.2" Data="M360,168 L360,0"
Opacity="0.35" />

<Path Width="357.84" Height="1" Fill="#FF3A3A3A" Stretch="Fill"

Stroke="#FF000000" Canvas.Top="29" Data="M0,170.5 L356.84209,170.5"
Opacity="0.35"/>
<Path Width="358.85" Height="1" Fill="#FFA2A2A2" Stretch="Fill"
Stroke="#FF000000" Canvas.Top="30" Data="M0,170.5 L356.84209,170.5"
Opacity="0.25"/>
<Path Width="1.662" Height="30" Fill="#FF3A3A3A" Stretch="Fill"
Stroke="#FF000000" Canvas.Left="356.01" Data="M360,168 L360,0" Opacity="0.35"
Canvas.Top="-0.498"/>
<Path Width="1" Height="31" Fill="#FFA2A2A2" Stretch="Fill"
Stroke="#FF000000" Canvas.Left="357.333" Data="M360,168 L360,0"
Opacity="0.245" Canvas.Top="-0.498" />
</Canvas>
</Canvas>

5. Return to the Silverlight object element area of SplashScreenSourceTestPage.html for

editing. Notice that there are a number of "params" elements as child elements of object
already. You will now add several params elements to add your custom splash screen
information. Add the following params elements:

<param name="splashscreensource" value="SplashScreen.xaml"/>

<param name="onSourceDownloadProgressChanged"
value="onSourceDownloadProgressChanged" />

6. The second params element is referencing a JavaScript event handler, which you must
now define. Right-click SplashScreenSource.Web in the Solution Explorer. Find the file
SplashScreen.js in the solution's file list (this file was added when you added
SplashScreen.xaml in a previous step. Open SplashScreen.js for editing.
7. Delete all pre-existing content of SplashScreen.js. Paste in the following
onSourceDownloadProgressChanged function, which will update the progress bar in
SplashScreen.xaml.

function onSourceDownloadProgressChanged(sender, eventArgs)

{
sender.findName("uxStatus").Text = "Loading: " +
Math.round((eventArgs.progress * 1000)) / 10 + "%";
sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;

Silverlight – Compiled by Krishna Alaparthi Page 13 of 20

 }

8. Return to SplashScreenSourceTestPage.html for editing. You still need to reference the

JavaScript file you just created. Just after the head element in the HTML, add the
following:

<script type="text/javascript" src="splashscreen.js"></script>

9. Build your project and make sure that it compiles. The start action at this point will now
load SplashScreenSourceTestPage.html and first load your splash screen, and then the
source.
10. Clear your browser cache (otherwise, the assembly might still be cached as content by the
browser, and you will not experience the load time). Run the application again.

6. Out-of-Browser Support
You can configure Silverlight-based applications so that users can install them from their host
Web pages and run them outside the browser.

Configuration is a simple matter of providing additional information about an application.

Silverlight uses this information to display the installation user interface (UI), shortcuts for
launching the application, and an out-of-browser application window. This information is
supplied through the application manifest, so you can enable out-of-browser support in an
existing application without rebuilding

To configure out-of-browser support

1. In Solution Explorer, select the Silverlight project for which you want to enable out-of-
browser support.
2. On the Project menu, select project name Properties.
3. On the Silverlight tab, select Enable running application out of the browser.

The Out-of-Browser Settings dialog box appears.

4. Specify values for the indicated fields and then click OK. All fields are optional except
for the following:
o Window Title
o Shortcut name
o Download description

7. Controls

Silverlight – Compiled by Krishna Alaparthi Page 14 of 20

 The following table lists common Silverlight controls according to general function.

Function Control Location Description

Responds to user input from a mouse,
Button/Command
Button Runtime keyboard, stylus, or other input device and
controls
raises a Click event.
Represents a button control that displays a
hyperlink. When clicked, the
HyperlinkButton enables users to move to a
HyperlinkButton Runtime
Web page in the same Web application or a
Web page that is external to the current
application.
Represents a button that raises its click
RepeatButton Runtime event repeatedly from when the button is
pressed until it is released.
Represents a control that a user can select
Selection controls CheckBox Runtime or clear. A check box optionally offers an,
indeterminate state.
Displays a drop-down list of items a user
ComboBox Runtime
can select from.
Displays a list of items a user can select by
ListBox Runtime
clicking.
Allows a user to select a single option from
a list of options. When radio buttons are
RadioButton Runtime
grouped together they are mutually
exclusive.
Represents a control that lets the user select
Slider Runtime from a range of values by moving a Thumb
control along a track.
Allows a user to select a date from a visual
Date display and Silverlight calendar display. The calendar can be used
Calendar
selection SDK on its own or in combination with the
DatePicker control..
Allows a user to select a date by typing it in
Silverlight
DatePicker a text field or selecting it from a drop-down
SDK
calendar control.
Information
TextBlock Runtime Displays small amounts of read-only text.
display (read-

Silverlight – Compiled by Krishna Alaparthi Page 15 of 20

only)
Displays the current progress of an
ProgressBar Runtime
operation to the user.
Represents a control that provides a text
Text display and Silverlight box for user input and a drop-down that
AutoCompleteBox
editing SDK contains possible matches based on the
input in the text box.
Provides a control that allows the user to
PasswordBox Runtime
enter sensitive data, such as a password.
Provides a control for displaying or editing
TextBox Runtime
text.
Displays a collection of data in rows and
Silverlight columns. You can change the type of row
Data display DataGrid
SDK or column to fit the needs of your
application.
Provides a user interface for paging through
Silverlight
DataPager a collection of data that implements
SDK
IPagedCollectionView.
Silverlight Displays hierarchical data in a tree structure
TreeView
SDK that has items that can expand and collapse.
Graphics and
Image Runtime Displays an image.
video display
Enables users to open a multi-resolution
MultiScaleImage Runtime image which can be scaled or repositioned
for detail viewing.
Hosts audio or video content. Provides a
rectangular region that can display video on
MediaElement Runtime
its surface, or play audio if no video is
present.
Provides a drawing surface to support
InkPresenter Runtime
Tablet PC features.
Layout and Provides a border, background, or both to
Border Runtime
element grouping another control.
Provides a surface to display child elements
Canvas Runtime
at specific coordinates in the canvas.
ContentControl Runtime Represents a control with a single piece of

Silverlight – Compiled by Krishna Alaparthi Page 16 of 20

 content.
Provides a surface composed of rows and
columns to display child elements. You
Grid Runtime define the rows and columns for a grid, than
assign objects to a specific row or column
in the grid.
Silverlight Allows a user to resize the columns or rows
GridSplitter
SDK in a Grid control.
Provides a surface to display child elements
StackPanel Runtime
in a line; either horizontally or vertically.
Provides a stack panel control that arranges
VirtualizingStackPanel Runtime content that is visible on the screen,
creating additional UI items as needed.
Represents a control that provides a scroll
ScrollBar Runtime bar that has a sliding Thumb whose
position corresponds to a value.
Provides a scrollable surface for displaying
ScrollViewer Runtime
a child element.
Provides a tabbed interface for displaying
Silverlight
TabControl elements. Child elements are hosted in a
SDK
TabItem.

Silverlight Displays a description and tracks error state

User Help DescriptionViewer
SDK for an associated control.
Displays a caption, required field indicator,
Silverlight
Label and validation error indicator for an
SDK
associated control.
Provides the user with information about an
ToolTip Runtime
element in the UI using a popup window.
Silverlight Displays a summary of the validation errors
ValidationSummary
SDK on a form.
Silverlight
Navigation Frame Supports navigation to Page controls.
SDK
Silverlight Encapsulates content that can be navigated
Page
SDK to by a Frame.
Dialog boxes and OpenFileDialog Runtime Enables the user to select one or more files

Silverlight – Compiled by Krishna Alaparthi Page 17 of 20

windows from the file system.
Enables the user to specify options for
SaveFileDialog Runtime
saving a file.
Provides a window that can be displayed
Silverlight
ChildWindow over a parent window and blocks
SDK
interaction with the parent window.
Overlays content on top of the existing
Popup Runtime content within the bounds of the Silverlight
plug-in.

8. Animations
Animation is an illusion that is created by quickly cycling through a series of images, each
slightly different from the last. The brain perceives the group of images as a single changing
scene. In film, this illusion is created by using cameras that record many photographs, or frames,
each second. When the frames are played back by a projector, the audience sees a moving
picture. In Silverlight, you animate objects by applying animation to their individual properties.
For example, to make a UIElement grow, you animate its Width and Height properties. To make
a UIElement fade from view, you animate its Opacity property. Silverlight contains many objects
that have properties that can be animated.

Note: In Silverlight, you can perform simple animations only on properties whose values are of
type Double, Color, or Point. In addition, you can animate properties of other types by using
ObjectAnimationUsingKeyFrames, but this is done using discrete interpolation (jumping from
one value to another), which is not what most people consider to be true animation.

8.1. Animation Types:

Silverlight provides two categories of animation types: From/To/By animations and key-frame
animations. The following table describes the animation categories and their naming
conventions.

Category Description Naming convention

Animates between a starting and ending value:

 To specify a starting value, set the From

From/To/By
property of the animation. typeAnimation
animation
 To specify an ending value, set the To
property of the animation.
 To specify an ending value relative to the

Silverlight – Compiled by Krishna Alaparthi Page 18 of 20

 starting value, set the By property of the
animation (instead of the To property).

The examples in this overview use these animations,

because they are the simplest to implement.
Animates between a series of values specified using
key-frame objects. Key-frame animations are more
powerful than From/To/By animations because you
Key-frame typeAnimationUsingK
can specify any number of target values and even
animation eyFrames
control their interpolation method. Key-frame
animations are described in detail in Key-Frame
Animations.

The following table shows several common animation types and some properties that they are
used with.

Corresponding
Property basic Corresponding key-frame
Usage example
type (From/To/By) animation
animation
Animate the Color
of a
Color ColorAnimation ColorAnimationUsingKeyFrames
SolidColorBrush or
a GradientStop.
Animate the Width
of a Rectangle or
Double DoubleAnimation DoubleAnimationUsingKeyFrames the Height of an
Ellipse (or any
FrameworkElement)
Animate the Center
Point PointAnimation PointAnimationUsingKeyFrames position of an
EllipseGeometry.
Animate the Fill
property from one
Object None ObjectAnimationUsingKeyFrames
GradientBrush to
another.

Silverlight – Compiled by Krishna Alaparthi Page 19 of 20

9. Samples
http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=HomePage
http://msdn.microsoft.com/en-us/vcsharp/aa336746.aspx - LINQ

Silverlight – Compiled by Krishna Alaparthi Page 20 of 20