Graphics in Silverlight 3
- Graphics Principles
- Graphics Elements
- Under the Hood
- Where Are We?
This chapter is from the book
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 Scaling up an image of a circle
)
Figure 3.2 Scaling down an image of a circle
)
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 Removing a rectangle with a retained mode API
)
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 ––>
<Path
Fill="Green"
Data="F1 M 128,12L 12,224L 224,224"
/>
<!–– rectangle ––>
<Rectangle
Fill="Blue"
Canvas.Left="96"
Canvas.Top="160"
Width="256"
Height="224"
/>
<!–– circle ––>
<Ellipse
Fill="Red"
Canvas.Left="230"
Canvas.Top="288"
Width="200"
Height="200"
/>
</Canvas>
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); pathFigure.Segments.Add(lineSegment1); LineSegment lineSegment2 = new LineSegment(); lineSegment2.Point = new Point(224, 224); pathFigure.Segments.Add(lineSegment2); PathGeometry pathGeometry = new PathGeometry(); pathGeometry.Figures = new PathFigureCollection(); pathGeometry.Figures.Add(pathFigure); path.Data = pathGeometry; canvas.Children.Add(path); // // 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; canvas.Children.Add(rectangle); // // 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; canvas.Children.Add(ellipse);
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.
Tools
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:
- Make optimizations to components in the Silverlight runtime
- 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.