Silverlight: Visual Elements

Overview

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.

Controls

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).

Shapes

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

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.