<Canvas.LayoutTransform>

<SkewTransform AngleX= 20 AngleY= 25 />

</Canvas.LayoutTransform>

На рис. 34.8 показывает результаты всех трансформаций. Рисунки размещены внутри StackPanel. Начиная слева, первая фигура масштабирована, вторая - повернута, а третья - сдвинута. Чтобы легче увидеть разницу, свойство Background элементов Canvas устанавливаются в разные цвета.

Рис. 34.8. Примеры различных трансформаций

Кисти

В этом разделе мы проиллюстрируем, как используются кисти (brushes), предоставленные WPF для закрашивания фона и переднего плана. На протяжении этого раздела мы будем ссылаться на рис. 34.9, который показывает эффекты от использования различных кистей для фона (Background) элементов Button.

SolidColorBrush

Первая кнопка на рис. 34.9 использует кисть SolidColorBrush, которая, как следует из ее названия, дает сплошной цвет. Вся область закрашена одним цветом.

Вы можете определить сплошной цвет, устанавливая атрибут Background в строку, определяющую этот самый сплошной цвет. Строка конвертируется в элемент SolidColorBrush.

<Button Height= 30 Background= Purple > Solid Color</Button>

Конечно, вы получите тот же эффект, устанавливая дочерний элемент Background и добавляя элемент SolidColorBrush в качестве его содержимого. Вторая кнопка приложения использует сплошной цвет Yellow (желтый) для фона:

<Button Height= 30 >

<Button.Background>

<SolidColorBrush>Yellow</SolidColorBrush> </Button.Background> Solid Color </Button>

Рис. 34.9. Использование различных кистей для фона

LinearGradientBrush

Для плавного изменения цвета вы можете использовать LinearGradientBrush, как показано в третьей кнопке. Эта кисть определяет свойства StartPoint и EndPoint. Этим свойствам вы можете присвоить двумерные координаты, чтобы задать линейный градиент. По умолчанию принят диагональный линейный градиент от точки 0,0 до 1,1. Определяя разные значения, градиент может принимать разные направления. Например, при StartPoint 0,0 и EndPoint 0,1 вы получите вертикальный градиент. При том же StartPoint и значении EndPoint 1,0 получается горизонтальный градиент.

В содержимом этой кисти вы можете определять значения цветов в указанных смещениях посредством элемента GradientStop. Между двумя стопами выполняется плавный переход цвета.

<Button Height= 60 >

<Button.Background>

<LinearGradientBrush StartPoint= 0,0 EndPoint= 0.5,1.2 > <GradientStop Color= Red Offset= 0 ></GradientStop> <GradientStop Color= Blue Offset= 0.2 > </GradientStop>

<GradientStop Color= BlanchedAlmond Offset= 0.7 > </GradientStop>

<GradientStop Color= DarkOrange Offset= 1 >

</GradientStop> </LinearGradientBrush> </Button.Background> Linear Gradient Brush

</Button>

RadialGradientBrush

С помощью RadialGradientBrush вы можете задать переход цвета в радиальном направлении. На рис. 34.9 четвертая кнопка использует RadialGradientBrush. Эта кисть определяет начальную точку цвета в свойстве GradientOrigin.

<Button Height= 70 >

<Button.Background>

<RadialGradientBrush Center= 0.5,0.5 GradientOrigin= 0.5,0.5

RadiusX= 0.5 RadiusY= 0.5 SpreadMethod= Pad > <GradientStop Color= White Offset= 0 /> <GradientStop Color= LightBlue Offset= 0.4 /> <GradientStop Color= DarkBlue Offset= 1 /> </RadialGradientBrush> </Button.Background> Radial Gradient Brush </Button>

DrawingBrush

DrawingBrush позволяет вам определить рисунок, отображаемый кистью. Этот рисунок определен внутри элемента GeometryDrawing. Элемент GeometryGroup, который вы можете видеть внутри свойства Geometry, состоит из элементов Geometry, таких как EllipseGeometry, LineGeometry, RectangleGeometry и CombinedGeometry.

<Button Height= 80 >

<Button.Background> <DrawingBrush>

<DrawingBrush.Drawing>

<GeometryDrawing Brush= LightBlue > <GeometryDrawing.Geometry> <GeometryGroup> <EllipseGeometry RadiusX= 30 RadiusY= 30

Center= 20,20 /> <EllipseGeometry RadiusX= 4 RadiusY= 4 Center= 10,10 /> </GeometryGroup> </GeometryDrawing.Geometry> <GeometryDrawing.Pen> <Pen> <Pen.Brush>Red </Pen.Brush> </Pen> </GeometryDrawing.Pen> </GeometryDrawing> </DrawingBrush.Drawing> </DrawingBrush> </Button.Background> Drawing Brush </Button>

ImageBrush

Чтобы загрузить графическое изображение в кисть, вы можете использовать элемент ImageBrush. С помощью этого элемента будет отображен образ, определенный свойством ImageSource.

<Button Height= 100 > <Button.Background> <ImageBrush

ImageSource= C:\Windows\Web\Wallpaper\img21.bmp

/>

</Button.Background>

<Button.Foreground>White</Button.Foreground> Image Brush </Button>

VisualBrush

VisualBrush позволяет использовать в кисти другие элементы WPF. Здесь вы можете добавить элемент WPF к свойству Visual. Седьмая кнопка на рис. 34.9 содержит в себе элементы Rectangle, Ellipse и Button.

<Button Height= 100 > <Button.Background> <VisualBrush >

<VisualBrush.Visual>

<StackPanel Background= White > <Rectangle Width= 25 Height= 25 Fill= LightCoral Margin= 2 />

<Ellipse Width= 65 Height= 20

Fill= Aqua Margin= 5 /> <Button Margin= 2 >A Button</Button> </StackPanel> </VisualBrush.Visual> </VisualBrush> </Button.Background> Visual Brush

</Button>