Technical Insight 1
As shown in the previous example, the Source property of an Image element can be set to a URI. Many references to the same Source URI cause Silverlight to download the image once and use it multiple times. If you remove all references to Image elements for a specific URI, Silverlight removes the image from the memory cache and a future reference causes Silverlight to initiate another download. Future downloads may be serviced from the browser cache or go over the network if the image is no longer in the browser cache.
Solid Color Brush
SolidColorBrush returns a single color for all screen positions. When you specify a Fill or Stroke property value, Silverlight creates a solid color brush for the corresponding shape fill or pen stroke respectively:
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Rectangle
Fill="Blue"
Stroke="Black"
StrokeThickness="10"
Canvas.Left="96"
Canvas.Top="160"
Width="256"
Height="224"
Alternatively, you can specify a brush with the expanded XAML syntax:
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Rectangle
StrokeThickness="10"
Canvas.Left="96"
Canvas.Top="160"
Width="256"
Height="224"
<Rectangle.Fill>
<SolidColorBrush Color="Blue"/> </Rectangle.Fill> <Rectangle.Stroke>
<SolidColorBrush Color="Black"/> </Rectangle.Stroke>
</Rectangle>
The previous examples specified a named color. You can also specify a color explicitly by providing a hex string of the form #aarrggbb, which represents a hex alpha channel value, red channel value, green channel value, and blue channel value. For example, opaque green would be #ff00ff00.
From C#, you can specify a color by creating an instance of the Color class:
Color green = Color.FromArgb(0xff, 0x0, 0xff, 0x0);
The alpha channel specifies the degree of transparency where 0x0 indicates completely transparent, 0xff indicates an opaque color, and intermediate values indicate partial transparency. A brush with a transparent color will blend its color to the background color using the following formula:
Color_destination = (alpha * Color_source + (0xff - alpha) * Color_destination)/256
Silverlight will pass colors specified in hex format to the Web browser without a color space conversion. Typically, the browser will interpret the color as a standard RGB color space color (sRGB) that is, an 8-bit per channel 2.2 implied gamma space color. However, the visible color may vary with operating systems, Web browser, the monitor, and the operating system color profile. An alternative form of specifying colors is the floating point wide gamut linear RGB color space (scRGB):
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Rectangle
Canvas.Left="96" Canvas.Top="160" Width="256" Height="224"
Silverlight converts scRGB colors to sRGB internally for blending. Consequently, specifying colors in native sRGB is desirable to avoid extra color conversion steps.
Gradient Brushes
Gradient brushes define a set of colors and positions along a virtual gradient line. The function that maps screen position to color first maps the screen position to a point along the gradient line and then interpolates a color based on the two nearest points.
Consider the following use of a LinearGradientBrush:
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Ellipse
Width="450" Height="450"
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0"/> <GradientStop Color="Black" Offset="1"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Ellipse.Fill> </Ellipse>
The preceding linear gradient brush produces the fill shown in Figure 3.18. A linear gradient brush maps a screen position to the point on the line
- Figure 3.18: Linear gradient brush
closest to that position. The brush then interpolates a color based on the two nearest points specified along the line as shown in Figure 3.18.
Alternatively, you can specify a radial gradient fill using RadialGradientBrush that takes the distance from the screen position to the center of the radial gradient and maps that distance to the specified gradient line of colors and positions. For example, the following XAML generates the rendering shown in Figure 3.19.
Figure 3.19: Radial gradient brush
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Ellipse
Width="450" Height="450"
<Ellipse.Fill>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0"/> <GradientStop Color="Black" Offset="1"/> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Ellipse.Fill> </Ellipse>
Another feature of RadialGradientBrush is the capability to move the point that maps to the start of our gradient line. In particular, in our previous example, the center of the radial gradient circle mapped to the start of our gradient line and the radius of the gradient circle mapped to the end of our gradient line. With this pattern, you always get a uniform ellipse. You can move the center using the GradientOrigin property to get the result shown in Figure 3.20.
Figure 3.20: Focal gradient brush
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Ellipse
Width="450" Height="450"
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.25 0.25"> <RadialGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0"/> <GradientStop Color="Black" Offset="1"/> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Ellipse.Fill> </Ellipse>
One other feature of linear and radial gradients is the capability to specify the behavior when the display position maps to some position outside the range of the gradient line. The SpreadMethod property defines that behavior. The Pad mode repeats the closest point when off the line, the Reflect mode mirrors to a point on the line, and the Repeat mode simply takes the position modulo the length of the line as shown in Figure 3.21.
Pad Repeat Reflect
Figure 3.21: SpreadMethod example
Pad Repeat Reflect
Figure 3.21: SpreadMethod example
Image Brushes
The role of the image brush is to map a screen position to a pixel in the specified image. For example, the following XAML would result in the image brush rendering shown in Figure 3.22.
Figure 3.22: ImageBrush example
Figure 3.22: ImageBrush example
<Canvas xmlns="http://schemas.microsoft.com/client/2007"> <Ellipse
Width="450" Height="450" Stroke="Black" StrokeThickness="10"
<Ellipse.Fill>
<ImageBrush ImageSource="silverlight.png"/> </Ellipse.Fill> </Ellipse>
Strokes
The previous section showed how to use a brush to color the fill of a shape. You can also use a brush to add color to the outline of a shape by setting the stroke properties. For example, the following XAML generates the output shown in Figure 3.23.
- Figure 3.23: Sample stroke applied to an ellipse
<Canvas xmlns="http://schemas.microsoft.com/client/2007"> <Ellipse
Stroke="Black"
StrokeThickness="10"
Canvas.Left="50"
Canvas.Top="50"
Width="400"
Height="400"
Stroke
A stroke transforms geometry to a widened form that describes the shape outline instead of the shape fill. Silverlight fills the widened geometry with exactly the same rendering rules as the main shape fill. For example, Figure 3.24 shows an example of a widened ellipse.
The widening process expands the original geometry by half the stroke thickness to form an outer outline. The widening process also shrinks the original geometry by half the stroke thickness to form an inner outline. The outer and inner outlines combine to form two figures Silverlight fills to produce the resulting stroke.
- Figure 3.24: The widening process applied to an ellipse
Average user rating: 5 stars out of 1 votes
Post a comment