Tải bản đầy đủ - 0 (trang)

# 17-26. Fill a Shape with a Linear or Radial Color Gradient

Tải bản đầy đủ - 0trang

CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION

Solution

For shapes derived from System.Windows.Shapes.Shape, to use a linear gradient, set the Fill or Stroke

How It Works

that transitions from one color to another. It is also possible to transition through a sequence of colors.

A LinearGradientBrush represents a sequence of linear color transitions that occur according to a set

of gradient stops you define along a gradient axis. The gradient axis is an imaginary line that by default

connects the top-left corner of the area being painted with its bottom-right corner. You define gradient

To position gradient stops along the gradient axis, you assign a System.Double value between 0 and 1

to the Offset property of a GradientStop. The Offset value represents the percentage distance along the

gradient axis at which the gradient stop occurs. So, for example, 0 represents the start of the gradient

axis, 0.5 represents halfway, and 0.75 represents 75 percent along the gradient axis. You specify the color

associated with a gradient stop using the Color property of the GradientStop element.

You can change the position and orientation of the gradient axis using the StartPoint and EndPoint

properties of the LinearGradientBrush. Each of the StartPoint and EndPoint properties takes a pair of

Double values that allow you to position the point using a coordinate system relative to the area being

painted. The point 0,0 represents the top left of the area, and the point 1,1 represents the bottom right.

So, to change the gradient axis from its default diagonal orientation to a horizontal one, set StartPoint

to the value 0,0.5 and EndPoint to the value 1,0.5; to make the gradient axis vertical, set StartPoint to

the value 0.5,0 and EndPoint to the value 0.5,1.

■ Note By setting the MappingMode property of the LinearGradientBrush to the value Absolute, you change the

coordinate system used by the StartPoint and EndPoint properties from being one relative to the area being

filled to being one expressed as device-independent pixels. For details, refer to the MSDN documentation on the

MappingMode property, at http://msdn.microsoft.com/en-us/library/system.windows.media.

Using the StartPoint and EndPoint properties of the LinearGradientBrush, you can assign negative

numbers or numbers greater than 1 to create a gradient axis that starts or ends outside the area being

filled. You can also define a gradient axis that starts or ends somewhere inside the body of the area

being filled.

Where the gradient axis does not start and end on the boundary of the area being painted, WPF

calculates the gradient as specified but does not paint anything that lies outside the area. Where the

gradient does not completely fill the area, WPF by default fills the remaining area with the final color in

element. Table 17-9 lists the possible values of the SpreadMethod property.

876

www.it-ebooks.info

CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION

Table 17-9. Possible Values of the SpreadMethod Property

Value

Description

The default value. The last color in the gradient fills all remaining area.

Reflect

The gradient is repeated in reverse order.

Repeat

The gradient is repeated in the original order.

elliptical gradient axis that radiates out from a defined focal point. You still use GradientStop elements in

RadiusY properties to define the size of the elliptical area covered by the gradient and the Center

property to position the ellipse within the area being painted. You then use the GradientOrigin property

to specify the location from where the sequence of gradient stops and starts within the gradient ellipse.

As with the LinearGradientBrush, all of these properties’ values are relative to the area being painted.

■ Tip If you want to reuse LinearGradientBrush or RadialGradientBrush elements, you can declare them as a

resource within the resources collection of a suitable container and assign them a key. Once defined, refer to the

gradient resource from the Fill or Stroke property of the Shape element using the following syntax:

The Code

The following XAML uses a set of Rectangle, Ellipse, and Line objects (from the System.Windows.Shapes

and fill shapes (see Figure 17-24). The XAML also demonstrates how to create and use static

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Recipe17_26" Height="300" Width="300">

StartPoint="0.5,-0.25" EndPoint="0.5,.5">

877

www.it-ebooks.info

CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION

Fill="{StaticResource LGB1}" Height="180" Width="80" />

Fill="{StaticResource RGB1}" Height="70" Width="230" />

878

www.it-ebooks.info

CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION

17-27. Fill a Shape with an Image

Problem

You need to fill a shape derived from System.Windows.Shapes.Shape with an image.

Solution

Assign an instance of System.Windows.Media.ImageBrush to the Fill property of the Shape. Use the

Stretch, AlignmentX, AlignmentY, and ViewBox properties of the ImageBrush element to control the way

the image fills the shape.

How It Works

The abstract System.Windows.Media.TileBrush class contains the functionality required to use a

graphical image to paint a specified area. Classes derived from TileBrush include ImageBrush,

DrawingBrush, and VisualBrush (all from the System.Windows.Media namespace). Each TileBrush

subclassallows you to specify a different source for the graphics used to fill the area: ImageBrush lets you

use a graphics file, DrawingBrush lets you use a drawing object, and VisualBrush lets you use an existing

screen element.

To use an image to fill a shape, you simply assign an ImageBrush element to the Fill property of the

Shape you want to fill. You specify the name of the source image file using the Source property of the

ImageBrush. You can use a local file name or a URL. The image can be loaded from any of the following

image formats:

879

www.it-ebooks.info

CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION

.bmp

.gif

.ico

.jpg

.png

.wdp

.tiff

The default ImageBrush behavior (inherited from TileBrush) is to stretch the source image to

completely fill the shape. This does not maintain the aspect ratios of the source image and will result in a

stretched and distorted image if the source image is not the same size as the shape. You can override this

behavior using the Stretch property of the ImageBrush. Table 17-10 lists the possible values you can

assign to the Stretch property and describes their effect.

Table 17-10. Possible Values of the Stretch Property

Value

Description

None

Don’t scale the image at all. If the image is smaller than the area of the shape, the rest of

the area is left empty (transparent fill). If the image is larger than the shape, the image is

cropped.

Uniform

Scale the source image so that it all fits in the shape while still maintaining the original

aspect ratio of the image. This will result in some parts of the shape being left

transparent unless the source image and shape have the same aspect ratios.

UniformToFill

Scale the source image so that it fills the shape completely while still maintaining the

original aspect ratio of the image. This will result in some parts of the source image

being cropped unless the source image and shape have the same aspect ratios.

Fill

The default behavior. Scale the image to fit the shape exactly without maintaining the

original aspect ratio of the source image.

When using None, Uniform, and UniformToFill values for the Stretch property, you will want to

control the positioning of the image within the shape. ImageBrush will center the image by default, but

you can change this with the AlignmentX and AlignmentY properties of the ImageBrush element. Valid

values for the AlignmentX property are Left, Center, and Right. Valid values for the AlignmentY property

are Top, Center, and Bottom.

You can also configure the ImageBrush to use only a rectangular subsection of the source image as

the brush instead of the whole image. You do this with the Viewbox property of the ImageBrush element.

Viewbox takes four comma-separated System.Double values that identify the coordinates of the upper-left

and lower-right corners of the image subsection relative to the original image. The point 0,0 represents

the top left of the original image, and the point 1,1 represents the bottom right. If you want to use

880

www.it-ebooks.info