Tải bản đầy đủ - 0 (trang)
17-26. Fill a Shape with a Linear or Radial Color Gradient

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

property to an instance of System.Windows.Media.LinearGradientBrush. To use a radial gradient, set the

Fill or Stroke property to an instance of System.Windows.Media.RadialGradientBrush.



How It Works

The LinearGradientBrush and RadialGradientBrush classes allow you to create a blended fill or stroke

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

stops using GradientStop elements inside the LinearGradientBrush element.

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.

gradientbrush.mappingmode.aspx.



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

the gradient. You can change this behavior using the SpreadMethod property of the LinearGradientBrush

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



Pad



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.



The RadialGradientBrush is similar in behavior to the LinearGradientBrush except that it has an

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

the RadialGradientBrush to define the position and color of transitions, but you use the RadiusX and

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:

... Fill="{StaticResource GradientKey}" ...



The Code

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

namespace) to demonstrate how to use LinearGradientBrush and RadialGradientBrush objects to draw

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

LinearGradientBrush and RadialGradientBrush resources.


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






GradientOrigin="0.5,0.5" x:Key="RGB1">












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




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








Center="0.5,0.5" GradientOrigin="0.05,0.5">

































































878



www.it-ebooks.info



CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION



Figure 17-24. Filling and drawing shapes with linear and radial gradients



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



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

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

Tải bản đầy đủ ngay(0 tr)

×