Трансформации

Трансформации представляют инструмент изменения положения или размера элементов WPF. Трансформации могут быть полезны в тех ситуациях, когда надо изменить положение элемента, либо анимировать. Все трансформации наследуются от абстрактного базового класса System.Windows.Media.Transform и представляют следующие классы:

• TranslateTransform: сдвигает элементы по горизонтали и вертикали

• RotateTransform: вращает элемент

• ScaleTransform: выполняет операции масштабирования

• SkewTransform: изменяет позицию элемента путем наклона на определенное количество градусов

• MatrixTransform: изменяет координатную систему в соответствии с определенной матрицей

• TransformGroup: представляет группу трансформаций

RotateTransform

RotateTransform поворачивает элемент вокруг оси на определенное количество градусов. Данный объект принимает три основых параметра:

• Angle: угол поворота

• CenterX: устанавливает центр вращения по оси X

• CenterY: устанавливает центр вращения по оси Y

<Rectangle Width="100" Height="30" Stroke="Blue" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
</Rectangle>

TranslateTransform

TranslateTransform позволяет сместить положение элемента по оси X, с помощью свойства X, и по оси Y - с помощью свойства Y.

<Rectangle Width="100" Height="30" Stroke="Blue" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <TranslateTransform X="20" Y="-30" />
    </Rectangle.RenderTransform>
</Rectangle>

ScaleTransform

Обеспечивает масштабирование элемента на определенную величину. Для изменения ширины надо задать свойство ScaleX, а для изменения длины - свойство ScaleY. Кроме того, также имеются свойства CenterX и CenterY, позволяющие позиционировать элемент.

Например, увеличение прямоугольника в полтора раза:

<Rectangle Width="100" Height="30" Stroke="Blue" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <ScaleTransform ScaleX="1.5" ScaleY="1.5" />
    </Rectangle.RenderTransform>
</Rectangle>

SkewTransform

SkewTransform позволяет задать наклон элемента вдоль оси X с помощью свойства AngleX, и по оси Y - с помощью свойства AngleY. А с помощью свойств CenterX и CenterY можно изменить положение элемента относительно осй X и Y:

<Rectangle Width="100" Height="30" Stroke="Blue" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <SkewTransform AngleX="45"  />
    </Rectangle.RenderTransform>
</Rectangle>

MatrixTransform

Осуществляет матричное преобразование элемента. В свойстве Matrix мы задаем первые два столбца, которые применяются при преобразовании. Последний столбец по умолчанию имеет значения {0 0 1}.

<Rectangle Width="100" Height="30" Stroke="Blue" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <MatrixTransform Matrix="1 0 1 2 1 -3" />
    </Rectangle.RenderTransform>
</Rectangle>

TransformGroup

TransformGroup позволяет комбинировать различные трансформации вместе:

<Rectangle Width="100" Height="30" Stroke="Blue" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="45" />
            <TranslateTransform Y="-40" X="30" />
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>

RenderTransform и LayoutTransform

Для применения трансформаций у фигур и стандартных элементов управления WPF используются свойства RenderTransform и LayoutTransform. Несмотря на то, что для обоих свойств трансформации задаются одинаково, их действие различается. Так, свойство LayoutTransform применяется до компоновки элемента, а RenderTransform - после, поэтому одинаковые трансформации для этих свойств могут давать немного разные результаты:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Width="80" Height="30" Background="LightBlue" Content="Hello">
        <Button.RenderTransform>
            <RotateTransform Angle="-45" />
        </Button.RenderTransform>
    </Button>
	<Button Grid.Column="1" Width="80" Height="30" Background="LightBlue" Content="Hello">
        <Button.LayoutTransform>
            <RotateTransform Angle="-45" />
        </Button.LayoutTransform>
    </Button>
</Grid>