Home > Articles > Web Development > ASP.NET

Graphics in Silverlight 3

  • Print
  • + Share This
In this chapter, you will learn how to add rich vector graphics and images to your application. You will also learn how to optimize performance and image quality of those graphics elements.
This chapter is from the book

This chapter is from the book

In particular, Chapter 3 will discuss the following:

  • The graphics system design principles
  • The elements for displaying graphics
  • The problems the Silverlight runtime solves "under the hood" and the problems your application must solve

Graphics Principles

The Silverlight graphics API makes it easy to add vector graphics, bitmap images, and text to your applications. This section describes the graphics API design principles.

Vector Graphics and Bitmap Images

Bitmap images are a common method of adding graphics to an application. However, bitmap images become blurry when scaled up, as shown in Figure 3.1, or aliased when scaled down, as shown in Figure 3.2. Unlike a bitmap image, if you scale a vector graphic, it will remain sharp as shown in Figure 3.3. Both vector graphics and bitmap images are useful in most applications. For example, a user interface control looks better at different sizes and resolutions with vector graphics instead of bitmap images. Bitmap images are useful for displaying content that is not easily expressible in vector form such as digital photographs or visual effects not supported by the runtime.

Figure 3.1

Figure 3.1 Scaling up an image of a circle

Figure 3.2

Figure 3.2 Scaling down an image of a circle

Figure 3.3

Figure 3.3 Scaling a vector graphic circle

Retained Mode

There are two types of graphics API: retained mode and immediate mode. A retained mode API automatically responds to changes to a graph of objects. An immediate mode API requires you to issue all the draw commands to describe a change. For example, to remove the rectangle shown in Figure 3.4 in a retained mode system, simply call a function to remove that element. The retained mode graphics system is responsible for redrawing the background, the triangle beneath, and the ellipse above. To remove the same rectangle shown in Figure 3.4 with an immediate mode API, you need to make three calls to draw the background, the triangle beneath it, and the ellipse above as shown in Figure 3.5.

Figure 3.4

Figure 3.4 Removing a rectangle with a retained mode API

Figure 3.5

Figure 3.5 Removing a rectangle with an immediate mode API

A retained mode API enables you to do the following:

  • Construct a set of graphics elements
  • Change properties of the graphics elements
  • Build a graph representing the relationship between those elements
  • Manipulate the graph structure

A retained mode graphics API is easier to use than an immediate mode API and enables the underlying system to provide automatic performance optimizations such as drawing incrementally and avoiding the drawing of occluded shapes. Silverlight provides a retained mode system to optimize for ease of use, animating vector graphics content, and for building applications composed of UI controls.

In Silverlight, you can construct the retained mode graph declaratively with a XAML file:

<Canvas xmlns="http://schemas.microsoft.com/client/2007">

    <!––  triangle ––>
        Data="F1 M 128,12L 12,224L 224,224"

    <!–– rectangle ––>

    <!–– circle ––>


Alternatively, you can construct the retained mode graph with code:

Canvas canvas = new Canvas();

// Make the triangle

Path path = new Path();

path.Fill = new SolidColorBrush(Colors.Green);

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(128, 12);

LineSegment lineSegment1 = new LineSegment();
lineSegment1.Point = new Point(12, 224);

LineSegment lineSegment2 = new LineSegment();
lineSegment2.Point = new Point(224, 224);

PathGeometry pathGeometry = new PathGeometry();
pathGeometry.Figures = new PathFigureCollection();


path.Data = pathGeometry;


// Make the rectangle

Rectangle rectangle = new Rectangle();

rectangle.Fill = new SolidColorBrush(Colors.Blue);
Canvas.SetLeft(rectangle, 96);
Canvas.SetTop(rectangle, 160);
rectangle.Width = 256;
rectangle.Height = 224;


// Make the circle
Ellipse ellipse = new Ellipse();

ellipse.Fill = new SolidColorBrush(Colors.Red);
Canvas.SetLeft(ellipse, 230);
Canvas.SetTop(ellipse, 288);
ellipse.Width = 200;
ellipse.Height = 200;


Cross Platform Consistency

An important goal for the Silverlight graphics engine is to enable a developer to write his or her application once and have it run consistently across a variety of operating systems and browsers. Each operating system has a local graphics library. However, these local operating system graphics libraries differ significantly in feature set, performance, and image quality. To ensure cross-platform consistency and performance, Silverlight includes its own rendering engine.


Silverlight is capable of loading vector and image content from designer tools and integrating with developer written application code. For vector graphics and animation, you can use Expression Design and Expression Blend to generate XAML content for use with the Silverlight runtime. There are also a variety of free XAML exporters available to generate XAML content including an Adobe Illustrator exporter, an XPS print driver, and several others.

Balancing Image Quality and Speed

In addition to displaying static XAML, Silverlight provides real-time animation at 60 frames per second. However, real-time performance is highly dependent on the application content, the specific hardware configuration of the target machine, the resolution of the target display, the operating system, and the hosting Web browser.

When an application does not meet the 60 frame per second goal, the Silverlight team uses the following two options to improve performance:

  1. Make optimizations to components in the Silverlight runtime
  2. Lower image quality to achieve better speed

Reducing image quality for speed is the most controversial optimization technique. The Silverlight application must look good. However, it is possible to trade off image quality in a manner that is generally acceptable to the end user. For example, vector graphics rendering makes some quality sacrifices but still maintains an acceptable visual bar. On the other hand, end users have a much higher standard for text quality and the Silverlight runtime spends more CPU time rendering text clearly.

  • + Share This
  • 🔖 Save To Your Account