The ImageBrush
The ImageBrush allows you to fill an area with a bitmap image using any file type that Silver-light supports (BMP PNG, and JPEG files). You identify the image you want to use by setting the ImageSource property. For example, this brush paints the background of a Grid using an image named logo.jpg that's included in your project as a resource (and therefore embedded in your application's XAP file):
<Grid> <Grid.Background>
<ImageBrush ImageSource="logo.jpg"x/ImageBrush> </Grid.Background> </Grid>
The ImageSource property of the ImageBrush works in the same way as the Source property of the Image element, which means you can also set it using a URI that points to an embedded file in your project or a web location.
Note Silverlight respects any transparency information that it finds in an image. For example, Silverlight supports transparent areas in a PNG file.
In this example, the ImageBrush is used to paint the background of a cell. As a result, the image is stretched to fit the fill area. If the Grid is larger than the original size of the image, you may see resizing artifacts in your image (such as a general fuzziness). If the shape of the Grid doesn't match the aspect ratio of the picture, the picture will be distorted to fit. You can control this behavior by modifying the ImageBrush.Stretch property and assigning one of the values listed in Table 8-2.
Table 8-2. Values for the Stretch Enumeration
Name_Description_
Fill Your image is stretched in width and height to fit its container exactly. This is the default.
None The image is not stretched. Its native size is used (and any part that won't fit is clipped).
Uniform The width and height are sized up proportionately until the image reaches the edge of the container. The image's aspect ratio is preserved, but there may be extra blank space.
UniformToFill The width and height are sized proportionately until the shape fills all the available height and width. The image's aspect ratio is preserved, but it may be clipped to fit the region.
Note Even with a Stretch of None, your image may still be scaled. For example, if you've set your Windows system DPI setting to 120 dpi (also known as large fonts), Silverlight will scale up your bitmap proportionately. This may introduce some fuzziness, but it's a better solution than having your image sizes (and the alignment of your overall user interface) change on monitors with different dpi settings.
If the image is painted smaller than the fill region, the image is aligned according to the AlignmentX and AlignmentY properties. The unfilled area is left transparent. This occurs if you're using Uniform scaling and the region you're filling has a different shape (in which case you'll get blank bars on the top or the sides). It also occurs if you're using None and the fill region is larger than the image.
Post a comment