Silverlight 1.0 Architecture

  • Article

This article provides a high-level overview of the Microsoft Silverlight architecture and focuses on how to build applications by using Silverlight 1.0. This document discusses only the Silverlight 1.0 feature set. (Silverlight 1.1 Alpha provides additional functionality, including common language runtime (CLR) support. See Silverlight Architecture for more information.)

This overview covers the following topics:

  • Introduction
  • Silverlight Architecture
  • Browser Plug-in
  • Element Tree
  • Javascript Programming Model
  • Rendering Engine
  • Input and Events
  • Animation System
  • Image Cache
  • Text Engine
  • Glyph Cache
  • Media Pipeline
  • Decoders
  • Downloader and Packaging
  • Ink Support

Introduction

Microsoft Silverlight is a cross-browser, cross-platform technology for delivering rich interactive content on the Web.

The Silverlight version 1.0 feature set includes the following:

  • Declarative content format based on Extensible Application Markup Language (XAML).
  • JavaScript-based programming model.
  • Deployment options for content: in-line with the HTML page, as loose files, or in a compressed zip package.
  • Media support, including support for Windows Media Video (WMV),Windows Media Audio (WMA), and MPEG Audio Layer-3 (MP3), delivered with Windows Media Services or progressive download. Also includes support for client-side playlists (ASX files).
  • Text.
  • Image (PNG and JPG) support.
  • Anti-aliased vector graphics engine.
  • Animation.
  • Mouse and keyboard input.
  • HTTP downloader.
  • Ink support.
  • Full-screen rendering support.

Note   You can find detailed information about many of these features in the Silverlight Overviews and How-to Topics.

Silverlight Architecture

The Silverlight runtime enables users to integrate media, vector graphics, text, and images into an interactive application. This section discusses some of the key components provided in Silverlight 1.0.

The Silverlight 1.0 architecture

The Silverlight 1.0 architecture

Browser Plug-in

At the top of the stack, a browser plug-in enables hosting in Microsoft Internet Explorer, Mozilla Firefox, or Apple Safari. The recommended hosting and deployment of the plug-in is provided in the SDK.

Primarily, the plug-in provides mechanisms for the following:

  • Setting and changing the XAML content to be executed by the runtime.
  • Retrieving objects from the runtime, for manipulation through JavaScript.
  • Downloading content incrementally.

The rendering performance of the plug-in varies with the hosting parameters specified and the complexity of the content. We recommend that you set the settings.EnableFrameRateCounter property to true during development to display the frame rate in the browser's status bar and identify performance bottlenecks.

Hosting parameters that affect the consistency and performance of your application include the following:

  • isWindowless – Setting this parameter to false will ensure the highest frame rate and will result in better visual display quality across various platforms. Windowed display is the best mode of operation for the plug-in.
  • Background – If windowless mode is required, use an opaque background instead of a translucent or fully transparent background for better performance. In particular, you should set the background to '#FF000000', where the first component is FF. A transparent background affects performance because the browser has to re-render the area under the control with each frame. This additional rendering, combined with the cost of blending images, can result in significantly slower performance on some operating systems and browsers.

If your application requires the use of a windowless display and a transparent background, its performance will vary, depending on the operating system and browser. We recommend that you test any application that uses a transparent background across all target operating systems and browsers. For additional suggestions for improving performance, see Performance Tips.

Element Tree

At the heart of a Silverlight-based application is a tree of objects, such as Path objects, Image objects, and MediaElement objects, that you compose to build an application. This tree, which is called the element tree, is conceptually similar to an HTML tree. However, it has a richer set of graphical elements than HTML, and the programming model is similar to the HTML Document Object Model (DOM). The traversal order of the tree controls the order in which the objects in the application are drawn. To build an element tree, you can use the XAML parser that is provided with Silverlight (by setting the source on the plug-in) or use the CreateFromXaml method.

You can make changes to the element tree as follows:

  • You can use the JavaScript API to change child relationships and to set properties on the content.
  • You can use the animation system to change the value of properties over time.

If your application relies on per-frame manipulation of the element tree, we recommend that you test its performance by using the various JavaScript engines that are available on different operating systems and browsers. The recommended method for manipulating the element tree over time is through the animation system. This approach is platform- and browser-independent and is the most efficient method.

For more information about the element tree, see Silverlight Object Models and Scripting to the Silverlight Plug-in.

JavaScript Programming Model

All objects in Silverlight 1.0 can be manipulated through a JavaScript object model. The hosting Web page can call the content.FindName method to retrieve a named element and can subsequently set properties or call methods that are exposed by that element. In addition, you can attach keyboard and mouse event handlers to the elements or to the control. These event handlers enable the user to receive JavaScript callbacks and respond to user input.

Note    When JavaScript is running, the plug-in will stop drawing. Typically, this is not an issue if minimal work is done in the event handlers. However, if your application requires substantial CPU-intensive work on the JavaScript thread, we recommend that you split that work into smaller tasks. This will allow rendering to keep up with the desired frame rate. For additional suggestions for improving performance, see Performance Tips.

Rendering Engine

The Silverlight rendering engine is optimized for rasterizing the contents of the element tree at the desired frame rate indicated on the plug-in. In particular, the optimizations include the following:

  • Incremental redraw between frames, which reduces the number of pixels drawn based on the content that is changing.
  • Not rasterizing content that is completely or partially occluded.
  • Only rendering content that is visible. (That is, not rendering clipped content, opacity=0 content, and so on.)
  • Taking advantage of more CPU cores on the machine for significantly improved rendering performance.

The rendering engine feature set includes the following:

  • Per-primitive anti-aliasing support.
  • Support for basic shapes such as Rectangle (with optional rounded corners), Ellipse, and Image.
  • Path drawing support (see Shapes and Drawing Overview and Path Markup Syntax):
    • Path data: A set of segments, including arc segments, Bezier segments, line segments, poly-Bezier segments, polyline segments, poly-quadratic Bezier segments, quadratic Bezier segments.
    • Fill rules: Non-zero and odd/even.
    • Strokes: Variable-width pens.
    • Dashing: Custom dash arrays.
    • End caps: Round, flat, and miter.
  • Support for brushes (see Brushes Overview):
    • Solid color.
    • Image brush support with bilinear filtering.
    • Linear gradients.
    • Radial gradients.
    • Video brush with bilinear filtering.
  • Text rendering support (see Text and Fonts Overview):
    • Subpixel positioning.
    • Custom anti-aliasing for sharper text.
  • Transforms (see Transforms Overview):
    • Path transforms.
    • Brush transforms.
    • Text and graphics remain sharp when scaled. Image data will be resampled, and quality will vary based on the resolution of the source images.
  • Clipping:
    • Applied to a group of arbitrary drawing primitives, which could also include other nested clips, opacity effects, or opacity masks.
  • Opacity and opacity mask support:
    • Applied to a group of arbitrary drawing primitives, including other nested opacities or clips.

Although the rendering engine tries to do its best with the content it gets, you should reduce the number of primitives it processes by marking subtrees that are not visible. You can do this by setting the Visiblity property to Collapsed or by removing these subtrees from the tree. This optimization is particularly important when transitioning to full-screen mode. The windowed version of the content should be marked Visibility=Collapsed before the full-screen content is added to the tree. This practice will reduce both the content processed by the graphics engine and the number of elements walked per frame.

Input and Events

Silverlight provides a set of events that enable you to respond to actions such as changes in Silverlight state and user input (for example, mouse actions). For more information, see Silverlight Events.

Animation System

Animation can enhance your graphical creation by adding movement and interactivity. By animating a background color or applying an animated Transform, you can create dramatic screen transitions or provide helpful visual cues. You can create basic animations as well as more complex and powerful animations that use key frames. In addition, you can make these animations interactive by hooking them up to events. For more information, see Animation Overview.

Image Cache

When an image references a URL, the image is downloaded and cached in its decoded form for the duration of the application based on the URL that is specified. If you reference the image multiple times within your application, it will be retrieved from the image cache, and that usage pattern will run quickly. Referencing the same image from separate plug-ins takes advantage of the browser cache but requires the image to be decoded once for each Silverlight-based application.

For best results, the resolution of the image being downloaded should be close to the display size of the image. If the image resolution is significantly larger than the display size, bilinear filtering aliasing display artifacts can occur. If the image resolution is significantly smaller than the display size, the image will appear blurry.

In addition, picking an image resolution that is close to the display size will ensure minimum download times. If zoom effects are required where this is simply not possible, store multiple resolutions on the server and dynamically switch image sources during your animation.

Text Engine

The text engine will flow text strings within a TextBlock by applying simple formatting and explicitly positioning glyphs for precise fixed-format display. It will either use a specified font from the system (which is limited to a set that is available on all platforms) or use a specified font Uniform Resource Identifier (URI), which can refer to a TrueType font.

Glyph Cache

The glyph cache is used by the text engine to produce glyphs for rendering from font files. The glyph is optimized for readability at a particular target resolution, so an initial cost is incurred on the first frame on which text is drawn or when the scale of text changes. After this initial cost, scrolling or translation of text is significantly cheaper.

If your application requires dynamic scale changes of large text, it may be better to pick a vector representation of that effect.

Media Pipeline

The video pipeline retrieves content either through progressive HTTP download or HTTP streaming (for WMS servers), calls the decoders to decode the video, and displays with the rendering system and audio engine.

Video can have arbitrary content shown on top, scaled to full-screen sizes, used in multiple locations with VideoBrush on arbitrarily shaped paths, rotated, and so on.

If your application transitions from windowed to full-screen display, we recommend the use of a video brush that references the currently playing media element in the new full-screen content to ensure that the transition is seamless and does not require rebuffering.

If the content in your application has to react to events in the video, you can insert markers in the video stream that will be fired to the application.

For more information on using media in your application, see Audio and Video Overview.

Decoders

Silverlight 1.0 supports PNG and JPG files for imaging, Windows Media Video (WMV) files for video, and Windows Media Audio (WMA) and MP3 files for audio.

Downloader and Packaging

XAML, images, fonts, or other data can be packaged into a compressed (.zip) file and downloaded on demand with the Downloader object. We recommend that you test your application with the browser cache cleared over low-bandwidth connections to ensure efficient loading performance. If the initial load time of your application is large, you can provide a loading screen, similar to the code used in "How to: Use a Splash Screen to Load a Silverlight-based Application" in the QuickStart documentation for Silverlight 1.1 Alpha.

Ink Support

Ink support refers to handwriting or drawing content that has been input by using a pen, a touch screen, or a mouse. Silverlight provides an InkPresenter object that lets you accept ink-based input in your application. To recognize the text, send the data back to the server. Samples can be found at the Silverlight Gallery. For more information about this feature, see Ink Support in Silverlight.

See Also

Silverlight Overviews and How-to Topics
Silverlight Reference

See Also