Although Silverlight is a vector-based technology, pixel images are supported too. The XAML element is (conveniently) named <Image>. Apart from the default properties, such as Canvas.Left, Canvas.Top, Height, and Width, <Image> needs to know which graphics to show. This information is provided in the Source property. You can use
Figure 4-11. The pixel image within the Silverlight content
both local and remote URLs, and you can use two supported graphics formats: JPEG and PNG. Example 4-12has the code, and Figure 4-11 shows the associated output.
Example 4-12. Using an image, the XAML file (Image.xaml)
The final basic XAML elements used to design a static (i.e., non-moving) UI are brushes. A brush is used just like a “real” brush―you can paint. However, Silverlight brushes offer more: you can paint with color, you can paint gradients, you can paint images, you can even paint videos.
Brushes can be used as alternatives to attributes such as Background, Fill, or Stroke. However, you need to alter your syntax a bit. Instead of using the attribute, you use a sub element, <ElementYouWantToBrush.OldAttribute>. For example, filling a rectangle would look as follows:
<Rectangle> <Rectangle.Fill> <!-- brushes go here --> </Rectangle.Fill> </Rectangle>
The “easiest” brush is called SolidColorBrush because it only uses one solid color, there are no changes within the color or gradients. Actually, when using attributes like Back ground or Fill or Stroke as we have done so far in this book, we were implicitly using a SolidColorBrush. However, the alternative syntax works as well. Example 4-13 has the same output as Example 4-11 (Figure 4-10), but is using the <SolidColorBrush> element. Note how the color used by the brush is defined by its Color attribute.
Example 4-13. Using a solid color brush, the XAML file (SolidColorBrush.xaml)
Brushes can do unique things. The most typical example is gradients. A common form of a gradient is a radial gradient: The gradient starts at a given origin (quite often the center of an object) and then goes radially to the borders of the object. You can define an arbitrary number of stop points: these are points where a certain color must be matched. So, all you need to do is to define the stop points and associated colors; Silverlight automatically calculates and draws all colors in between. The XAML element for the brush is <RadialGradientBrush>.
There are a few parameters that must be defined for this gradient:
Center
The center of the object. You need to provide values between 0 and 1 for both the x and the y coordinate. Silverlight then calculates the actual coordinates based on the dimension of the target object.
GradientOrigin
The center of the gradient. Again, provide values between 0 and 1 for both coordinates.
RadiusX, RadiusY
The x and y radius of the gradient, again as values between 0 and 1
Stop colors are defined using the <GradientStop> element. You need to provide the color (Color attribute), and the offset (Offset attribute, value between 0 and 1). Example 4-14 shows a radial gradient with thee stop colors, and Figure 4-12 has the output.
Example 4-14. Using a radial gradient, the XAML file (RadialGradientBrush.xaml)
The other form of gradient is a linear gradient: The color change does not happen radially, but instead along a gradient axis. In the associated XAML element, <Linear GradialBrush>, you need to assign a start point and an end point, once again using values between 0 and 1, which are then mapped to the actual coordinates. Example 4-15 shows <LinearGradialBrush> in action, and also includes a line and markers that represent the radial axis and the stop points (trust me with the values), as you can see in Figure 4-13 .
Example 4-15. Using a linear gradient, the XAML file (LinearGradientBrush.xaml)
Figure 4-12.The radial gradient. Do you see the center and the stop colors?
Example 4-15. Using a linear gradient, the XAML file (LinearGradientBrush.xaml) continued
<Rectangle Width="600" Height="600" Stroke="Black"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.1 0.9" EndPoint="0.9 0.1"> <GradientStop Color="Red" Offset="0"/> <GradientStop Color="Green" Offset="0.33"/> <GradientStop Color="Blue" Offset="0.67"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Path Stroke="Black" Data="M 55 535 L 65 545 M 65 535 L 55 545" /> <Path Stroke="Black" Data="M 215 375 L 225 385 M 225 375 L 215 385" /> <Path Stroke="Black" Data="M 375 215 L 385 225 M 385 215 L 375 225" /> <Line X1="60" Y1="540" X2="540" Y2="60" Stroke="#7f000000" /> </Canvas>
A final brush option is to use a special “filling” for a brush: an image or a video file. So when you have an image to fill an object, Silverlight can automatically stretch the content so that it fits. You could also play a video as a background for a rectangle or within an ellipsis, just to give you a few ideas.
Using both brushes, ImageBrush and VideoBrush, is quite similar. You have to provide the name of the source file in an associated attribute, which is called ImageSource for <ImageBrush> and SourceName for <VideoBrush>. You can instruct Silverlight on how to
Figure 4-13.The linear gradient, with highlighted gradient axis and stop points
stretch the content so that it fits using the Stretch attribute, assigning one of these values:
None Content size remains the original one
Fill The content fills up the whole available area, loosing its aspect ratio
Uniform The content size is increased, maintaining the aspect ratio, until either the content has the width or the height of the display area
UniformToFill The content size is increased, maintaining the aspect ratio, until the content width and height are both greater or equal than the width and height of the display area. If necessary, parts of the content are cropped.
Example 4-16 shows an image that is used to fill an ellipsis. You can see in Figure 4-14 that this works as expected and that you can display rectangular image and
Figure 4-14. The ellipsis is filled with the image brush
video content and use other shapes. More information on using video in general can be found in Chapter 7.
Example 4-16. Using an image brush, the XAML file (ImageBrush.xaml)
An alternative approach to define the outline of an object is to use the Clip property and provide a Geometry object as its value, which will define the desired shape. Refer to the Silverlight SDK for more information (the topic is called “Silverlight Geometries Overview”).
There are many shapes in XAML, almost too many to keep track of, but we covered the most important ones. And, honestly, usually the UI comes out of a design tool; as a programmer, you just have to add functionality and we’ll start right away with that in the next chapter!
Painting with ImageBrush, VideoBrush and WebBrowserBrush in Silverlight 4.0
