Tải bản đầy đủ - 0 (trang)
17-27. Fill a Shape with an Image

17-27. Fill a Shape with an Image

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

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



CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION



absolute pixel values to specify the size of the Viewbox, set the ViewboxUnits property of the ImageBrush to

the value Absolute.



The Code

The following XAML uses a set of Rectangle, Ellipse, Polygon, and Line objects (from the

System.Windows.Shapes namespace) to demonstrate how to use ImageBrush objects to fill shapes with an

image (see Figure 17-25). The XAML also demonstrates how to create and use a static ImageBrush

resource.


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

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

Title="Recipe17_27" Height="300" Width="300">














Canvas.Top="0" Canvas.Left="110"

Stroke="Black" StrokeThickness="1"

Fill="{StaticResource IB1}" />




Canvas.Top="5" Canvas.Left="5"

Stroke="Black" StrokeThickness="1" >












Points="40,0 150,100 10,100"

Stroke="Black" StrokeThickness="1">




AlignmentX="Left" />







881



www.it-ebooks.info



CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION










Viewbox="30,46,42,15" ViewboxUnits="Absolute" />











Figure 17-25. Filling and drawing shapes with images



17-28. Fill a Shape with a Pattern or Texture

Problem

You need to fill a shape with a repeating pattern or texture.



Solution

To fill shapes derived from System.Windows.Shapes.Shape, assign an instance of System.Windows.Media.

ImageBrush to the Fill property of the Shape. Use the Stretch, TileMode, ViewBox, and ViewPort

properties of the ImageBrush element to control the way WPF uses the image to fill the shape.



How It Works

Recipe 17-27 describes how to fill a shape with an image using an ImageBrush. To fill a shape with

a pattern or texture, you typically load some abstract graphic or texture from a file and apply it

repeatedly to cover the entire area of a given shape. You do this using the same techniques discussed



882



www.it-ebooks.info



CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION



in recipe 17-27, but you use a number of additional ImageBrush properties (inherited from TileBrush) to

completely fill the shape by drawing the image repeatedly instead of once.

The first step is to define the tile that the ImageBrush will use to fill the shape. The ImageBrush uses

the concept of a viewport to represent the tile. By default, the viewport is a rectangle with dimensions

equal to those of the image that the ImageBrush would normally use to fill the shape. Normally the

viewport would be completely filled with the source image, but you can define what proportion of the

viewport is filled by the source image using the Viewport property of the ImageBrush.

The Viewport property takes four comma-separated System.Double values that identify the

coordinates of the upper-left and lower-right corners of the rectangle within the viewport where you

want the ImageBrush to insert the source image. So, for example, you can take the original image and

configure it to cover only a fraction of the viewport. The point 0,0 represents the top-left corner of the

viewport, and the point 1,1 represents the bottom-right corner.

With your base tile defined, you use the TileMode property of the ImageBrush to define how the

ImageBrush fills the shape using the tile defined by the viewport. Table 17-11 lists the possible values of

the TileMode property you can assign and describes their effect.

Table 17-11. Possible Values of the TileMode Property



Value



Description



None



The default value. The base tile is drawn but not repeated. You get a single image, and the rest

of the shape is empty (transparent fill).



Tile



The base tile is used repeatedly to fill the shape. Each tile is placed next to the other using the

same orientation.



FlipX



The base tile is used repeatedly to fill the shape, except that the tiles in alternate columns are

flipped horizontally.



FlipY



The base tile is used repeatedly to fill the shape, except that the tiles in alternate rows are

flipped vertically.



FlipXY



The base tile is used repeatedly to fill the shape, except that the tiles in alternate columns are

flipped horizontally and the tiles in alternate rows are flipped vertically.



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 ImageBrush objects to fill shapes with repeating patterns loaded

from image files (see Figure 17-26). The XAML also demonstrates how to create and use static ImageBrush

resources for the purpose of tiling.


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

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

Title="Recipe17_28" Height="300" Width="380">





883



www.it-ebooks.info



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

17-27. Fill a Shape with an Image

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

×