#014 Трансформация объектов в WPF

Сегодня мы поговорим об очень интересном свойстве RenderTransform, которое есть практически у каждого элемента и контрола Avalon. Это свойство позволяет производить различные геометрические преобразования объектов - например, вращение. Как и любое свойство, RenderTransform можно подвергнуть анимации, для получения различных эффектов движения или изменения формы объекта.

Давайте начнем. Создайте новый проект типа WinFX Windows Application и задайте ему имя "myTransforms".

Отредактируйте XAML-код главного окна, чтобы он принял следующий вид:

<Window x:Class="Window1"

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

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

    Title="myTransforms" 

    Width="640" Height="480" MinWidth="640" MinHeight="480"

    >

    <Grid>

      <Rectangle Stroke="#FF000000" Fill="#FFFFFFFF"

                 HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

                 Margin="239,124,204,159" 

                 Width="Auto" Height="Auto"

                 x:Name="Rectangle"/>

    </Grid>

</Window>

Несмотря на то, что мы всего лишь разместили на форме некий прямоугольный объект, я сделаю кое-какие пояснения. Дело в том, что сейчас я применил несколько иной способ задания координат для прямоугольника. Ключевые свойства Alignment приняли значение Stretch, что означает, что прямоугольник должен быть растянут и по высоте и по ширине по всей форме. Однако при помощи свойства Margin я как бы выдавил его от границ окна. Естественно при этом было бы нежелательно задавать напрямую ширину и высоту прямоугольника, поэтому их значение Auto. Результат:



Теперь давайте внесем в описание прямоугольника свойство RenderTransform, так:

<Rectangle Stroke="#FF000000" Fill="#FFFFFFFF"

                 HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

                 Margin="239,124,204,159" 

                 Width="Auto" Height="Auto"

                 x:Name="Rectangle">



   <Rectangle.RenderTransform>

          

   </Rectangle.RenderTransform>

</Rectangle>

При помощи этого свойства мы сможем изменить его внешний вид. Для начала мы его развернем на 45 градусов. Для этого измените код прямоугольника так:

<Rectangle Stroke="#FF000000" Fill="#FFFFFFFF"

                 HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

                 Margin="239,124,204,159" 

                 Width="Auto" Height="Auto"

                 x:Name="Rectangle"

                 RenderTransformOrigin="0.5,0.5">



  <Rectangle.RenderTransform>

      <TransformGroup>

          <RotateTransform Angle="45"/>

      </TransformGroup>

  </Rectangle.RenderTransform>

</Rectangle>

Итак, в тело свойства RenderTransform мы внесли тег <TransformGroup> - он позволит нам указать несколько параметров трансформации. Пока у нас только одно - вращение - и для этого мы используем свойство RotateTransform, в котором изменяем параметр угла (Angle) на нужные нам 45 градусов.

Обратите внимание на то, что в описании прямоугольника появилось новое свойство RenderTransformOrigin - оно не является обязательным, но позволяет указать вокруг какой точки необходимо производить любые трансформации. Если его не указать, то наш прямоугольник обернется вокруг верхнего левого угла. Мы же заставим прямоугольник вращаться по центру. Значение этого свойства - это две относительные координаты - по оси X и Y внутри объекта , которые обычно принимают значения от 0 до 1. Установив значения 0.5 для обеих координат, мы указываем, что объект будет трансформироваться вокруг центра.

Результат:



Продолжим трансформацию нашей фигуры. Для того, чтобы осуществить наклон нашей фигуры, достаточно добавить одну строчку в группу TransformGroup:

<Rectangle.RenderTransform>

          <TransformGroup>

            <RotateTransform Angle="45"/>

            <SkewTransform AngleX="-45" AngleY="25"/>

            

          </TransformGroup>

</Rectangle.RenderTransform>

Здесь указывается наклон по оси X и Y

Результат:



Также мы можем использовать особую трансформацию TranslateTransform , чтобы перемещать фигуру. Параметр X перемещает объект вдоль оси X , а параметр Y вдоль оси Y. Добавьте еще одну строку в группу TransformGroup:

<Rectangle.RenderTransform>

   <TransformGroup>

            <RotateTransform Angle="45"/>

            <SkewTransform AngleX="-45" AngleY="25"/>

            <TranslateTransform X="50" Y="50" />



   </TransformGroup>

</Rectangle.RenderTransform>

При помощи TranslateTransform мы переместили на 50 пикселов вправо и на 50 пикселов вниз нашу фигуру.

Есть и еще один способ трансформации объекта - это масштабирование. Он задается с помощью ScaleTransform, например так:

<Rectangle.RenderTransform>

          <TransformGroup>

            <RotateTransform Angle="45"/>

            <SkewTransform AngleX="-45" AngleY="25"/>

            <TranslateTransform X="50" Y="50" />

            <ScaleTransform ScaleX ="1.3" ScaleY ="1.3"/>



          </TransformGroup>

</Rectangle.RenderTransform>

Мы можем отдельно масштабировать по осям X и Y - в данном случае мы задали параметрам значения 1.3 , что соотвествует увеличению размера на 30%:

Результат:



Обратите внимание, что на самом деле у нас все еще тот самый обычный прямоугольник, который мы описали вначале - но он был подвергнут трансформации и поэтому выглядит по-другому.

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

Пример: