Прозрачность

В WPF поддерживается истинная прозрачность. Каждый элемент и кисть содержит свойство Opacity, определяющее степень прозрачности и принимающее вещественные значения из диапазона , Например, Opacity=0.9 создаёт эффект 90% видимости и 10% прозрачности. Также можно использовать цвет (и соответствующую сплошную кисть) с альфа-каналом, меньшим максимума.

Все элементы содержат свойство OpacityMask, которое принимает любую кисть. Альфа-канал кисти определяет степень прозрачности (другие цветовые компоненты значения не имеют). Применение OpacityMask с кистями, содержащими градиентный переход от сплошного к прозрачному цвету создаёт эффект постепенного «исчезновения» поверхности. Если поместить в OpacityMask кисть DrawingBrush, можно создать прозрачную область заданной формы.

В следующем примере OpacityMask используется в сочетании с VisualBrush для создания популярного эффекта отражения. По мере набора текста VisualBrush рисует ниже отражение этого текста. VisualBrush закрашивает прямоугольник, использующий свойство OpacityMask для постепенного затухания отражения.

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="30" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<TextBox Name="txt" FontSize="20" FontWeight="Bold" />

<Rectangle Grid.Row="1" RenderTransformOrigin="1,0.5">

<Rectangle.Fill>

<VisualBrush Visual="{Binding ElementName=txt}" />

</Rectangle.Fill>

<Rectangle.OpacityMask>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Offset="0.3" Color="Transparent" />

<GradientStop Offset="1" Color="#44000000" />

</LinearGradientBrush>

</Rectangle.OpacityMask>

<Rectangle.RenderTransform>

<ScaleTransform ScaleY="-1" />

</Rectangle.RenderTransform>

</Rectangle>

</Grid>

Рис. 32. Эффект отражения.

10. Трансформации и эффекты

Трансформация – это заданное изменение координатной системы, в которой отображается элемент. Описание таких трансформаций на плоскости, как масштабирование, отражение и поворот, можно выполнить в терминах числовых матриц размером . Чтобы представить в матричной форме операцию сдвига координатной системы, используют однородные координаты.

Однородными координатами точки является тройка вида . Если дана тройка чисел , соответствующая точка на плоскости находится после применения нормировки – деления на : . Тройки вида описывают в однородных координатах бесконечно удалённую точку.

В терминах однородных координат основные трансформации можно выразить следующим образом:

1. Масштабирование (включая отражения): .

2. Поворот на угол : .

3. Сдвиг: .

Комбинация трансформаций выполняется как умножение матриц.

В WPF трансформации представлены классами, унаследованными от абстрактного класса System.Windows.Media.Transform. Набор предопределённых трансформаций перечислен в табл. 8.

Таблица 8

Классы трансформаций

Имя класса	Описание	Важные свойства
TranslateTransform	Смещает координатную систему на указанную величину	X, Y
RotateTransform	Поворачивает координатную систему вокруг заданной точки	Angle, CenterX, CenterY
ScaleTransform	Масштабирует координатную систему. Можно применять разную степень масштабирования по измерениям X и Y	ScaleX, ScaleY, CenterX, CenterY
SkewTransform	Деформирует координатную систему, наклоняя её оси на заданное число градусов	AngleX, AngleY, CenterX, CenterY
MatrixTransform	Выполняет трансформацию, используя указанную матрицу вида	Matrix
TransformGroup	Комбинирует несколько трансформаций. Порядок трансформаций в группе имеет значение	Children

Укажем некоторые возможности задания трансформаций в WPF:

• Класс UIElement определяет свойства RenderTransform и RenderTransformOrigin. RenderTransform – это трансформация, выполняемая после процесса компоновки непосредственно перед отображением элемента. RenderTransformOrigin задаёт стартовую (неподвижную) точку трансформации. По умолчанию это точка имеет координаты (0,0) (координаты точки относительные, в терминах виртуального ограничивающего прямоугольника).

• Класс FrameworkElement содержит свойство LayoutTransform для трансформации, применяемой до процесса компоновки.

• Класс Brush имеет свойства RelativeTransform и Transform, позволяющие выполнить трансформацию кисти до и после её применения.

Следующий пример демонстрирует использование трансформаций.

<StackPanel Orientation="Horizontal">

<Button Height="30" Width="60" Content="Rotate">

<Button.LayoutTransform>

<RotateTransform Angle="-45" CenterX="30" CenterY="15"/>

</Button.LayoutTransform>

</Button>

<Button Height="30" Width="60" Content="Skew">

<Button.RenderTransform>

<SkewTransform AngleX="30" AngleY="0" />

</Button.RenderTransform>

</Button>

<Button Height="30" Width="60" Content="Matrix">

<Button.LayoutTransform>

<MatrixTransform Matrix="1,0.5,1,-1,20,10" />

</Button.LayoutTransform>

</Button>

</StackPanel>

Рис. 33. Примеры трансформаций.

Кроме трансформаций, WPF поддерживает применение к элементам эффектов, таких как размытие, отбрасывание тени, сияние. Эффекты в WPF делятся на две категории – битовые эффекты и эффекты пиксельных шейдеров.

Битовые эффекты представлены классами, унаследованными от класса System.Windows.Media.Effects.BitmapEffect. Все битовые эффекты обрабатываются программно, без использования ресурсов видеокарты¹. Набор предопределённых битовых эффектов перечислен в табл. 9.

Таблица 9

Классы битовых эффектов

Имя класса	Описание	Важные свойства
BlurBitmapEffect	Размывает содержимое элемента	Radius, KernelType
BevelBitmapEffect	Добавляет выпуклую рамку вокруг содержимого	BevelWidth, Relief, EdgeProfile, LightAngle, Smoothness
EmbossBitmapEffect	Создает эффект «тиснения», выделяя границы и линии	LightAngle, Relief
OuterGlowBitmapEffect	Добавляет цветное сияние вокруг содержимого	GlowColor, GlowSize, Noise, Opacity
DropShadowBitmapEffect	Добавляет прямоугольную тень за элементом	Color, Direction, Noise, Opacity, ShadowDepth, Softness
BitmapEffectGroup	Применяет комбинацию битовых эффектов. Порядок эффектов имеет значение, поскольку каждый применяется поверх существующих	Children

Эффекты пиксельных шейдеров используют одноимённую технологию графических процессоров. Они представлены следующими классами:

• BlurEffect – эффект размытия, подобный BlurBitmapEffect;

• DropShadowEffect – эффект тени, подобный DropShadowBitmapEffect;

• ShaderEffect – любой эффект пиксельных шейдеров, описанный при помощи объекта PixelShader.

Для применения эффектов пиксельных шейдеров класс Visual определяет свойство VisualEffect, а класс UIElement – свойство Effect. Следующая разметка демонстрирует эффекты BlurEffect и DropShadowEffect .

<StackPanel Orientation="Horizontal">

<Button Height="40" Width="80" Content="Blur" Margin="10">

<Button.Effect>

<BlurEffect Radius="3" />

</Button.Effect>

</Button>

<Button Height="40" Width="80" Content="Shadow" Margin="10">

<Button.Effect>

<DropShadowEffect ShadowDepth="5" Direction="300"

Color="Blue" />

</Button.Effect>

</Button>

</StackPanel>

Рис. 34. Применение эффектов.