Silverlight: Visual Elements


Silverlight 1.0 doesn't have any of the standard UI controls you may be used to. Instead you have a collection of visual elements that can be combined to create your own controls, or you may simply want to use existing HTML controls outside your Silverlight application for input. This major limitation has been removed in Silverlight 2.0.


The basic controls in Silverlight 1.0 are:

Name Description
Canvas The Canvas object is the only layout control available in Silverlight 1.0 and it must be the root element for all XAML documents. Child objects get the Left and Top attached properties for placement within the Canvas. As Silverlight 1.0 is not resolution independent like WPF, all coordinates are pixel based and not affected by the monitor resolution.
Image Displays bitmap images with support for applying both geometry and opacity based masks. Supported file formats are JPG and PNG (indexed color: 1, 4, or 8 bit. Truecolor: 24 bit and 32 bit with alpha).
InkPresenter Displays ink strokes from a collection of Strokes.
TextBlock Displays text and glyphs. In addition to the standard nine web fonts (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Lucida Grande/Lucida Sans Unicode, Times New Roman, Trebuchet MS, and Verdana), you may optionally load custom TrueType or OpenType fonts.


Shapes let you draw vector based graphics in your application and they can also be used as masks for other elements.

Name Description
Line Displays a line from point A to point B.
Ellipse Displays an ellipse or circle.
Path Displays lines or curves between a given set of points.
Polygon Displays a closed shape from a connected set of points.
Polyline Displays a set of connected straight lines.
Rectangle Displays a rectangle with an optional stroke (border) and fill.


Brushes are used to paint the surfaces such as fills, backgrounds and the outlines of controls.

Name Description
SolidColorBrush Paints the surface using a single color. The color to use can be specified using the well known name or its hexadecimal notation #rrggbb. In addition, you may specify the opacity (alpha) using #aarrggbb.
LinearGradientBrush Paints the surface using a gradient. You may specify multiple colors with GradientStops and modify the angle and direction.
RadialGradientBrush Paints the surface similar to the LinearGradientBrush, but instead of following a straight line, the gradient axis is defined by a circle.
ImageBrush Paints the surface using a bitmap image. You may specify the stretch behavior of the image to handle drawing on surfaces that aren't the same size as the source image.
VideoBrush Paints the surface similar to the ImageBrush, but instead of using a static image as the source, it uses a video played by a MediaElement.


Silverlight supports the following media file formats, along with Advanced Stream Redirector (ASX) playlist files:


  • WMV1 - WMV3: Windows Media Video 7 - 9
  • WMVA: Windows Media Video Advanced Profile, non-VC-1
  • WMVC1: Windows Media Video Advanced Profile, VC-1


  • WMA7 - WMA9: Windows Media Audio 7 - 9
  • MP3: Mono, stereo. 8, 11.025, 12, 16, 22.05, 24, 32, 44.1 and 48 kHz. Variable bit rates 8 - 320 kbps
  • WMVC1: Windows Media Video Advanced Profile, VC-1
Name Description
MediaElement Plays audio and video files. This element does not need to be visible on the screen if used for audio playback or as a source for a VideoBrush.


View Sample

Further Reading

Related information on the web is listed below.