Общие сведения о классах Transform

Статья
08/11/2011

В этом разделе описывается использование класса 2-D Transform для поворота, масштабирования, сдвига и наклона объектов FrameworkElement.

В этом разделе содержатся следующие подразделы.

Что такое Transform
Классы Transform
Общие свойства преобразований
Системы координат и преобразования
Преобразование FrameworkElement
Пример: Поворот элемента FrameworkElement на 45 градусов
Анимируемые преобразования
Возможности замораживания
Связанные разделы

Что такое Transform

Transform определяет способ сопоставления или преобразования точек из одного координатного пространства в другое. Это сопоставление описано преобразованием Matrix, которое представляет собой коллекцию из трех строк с тремя столбцами, содержащую значения типа Double.

Примечание
В Windows Presentation Foundation (WPF) используются матрицы, основанные на строках.Векторы представляют собой строки, а не столбцы.

В следующей таблице показана структура матрицы WPF.

Матрица двумерного преобразования

M11

Значение по умолчанию: 1,0

M12

Значение по умолчанию: 0,0

0.0

M21

Значение по умолчанию: 0,0

M22

Значение по умолчанию: 1,0

0.0

OffsetX

Значение по умолчанию: 0,0

OffsetY

Значение по умолчанию: 0,0

1.0

Управляя значениями матрицы, можно поворачивать, масштабировать, наклонять и перемещать объект. Например, изменив значения в первом столбце третьей строки (значение OffsetX) на 100, можно переместить объект на 100 единиц вдоль оси X. Изменив значение во втором столбце второй строки на 3, можно растянуть объект в высоту в три раза от текущего размера. Изменив оба значения, можно переместить объект на 100 единиц вдоль оси Х и растянуть в высоту в три раза от текущего размера. Windows Presentation Foundation (WPF) поддерживает только сходные преобразования, поэтому значения в правом столбце всегда равны 0, 0, 1.

Не смотря на то, что Windows Presentation Foundation (WPF) дает возможность непосредственно управлять значениями матрицы, она также предоставляет несколько классов Transform, позволяющих преобразовывать объект, не зная структуры матрицы. Например, класс ScaleTransform позволяет масштабировать объект с помощью определения его свойств ScaleX и ScaleY вместо управления матрицей преобразования. Аналогично класс RotateTransform позволяет повернуть объект, просто задав его свойство Angle.

Классы Transform

Windows Presentation Foundation (WPF) предоставляет следующие классы 2-D Transform для общих операций преобразования:

Класс	Описание	Пример
RotateTransform	Поворачивает элемент на значение, заданное в Angle.	Практическое руководство. Вращение объекта
ScaleTransform	Масштабирует элемент, используя коэффициенты, заданные в ScaleX и ScaleY.	Практическое руководство. Масштабирование элемента
SkewTransform	Наклоняет элемент на коэффициенты, заданные в AngleX и AngleY.	Практическое руководство. Отклонение элемента
TranslateTransform	Сдвигает элемент на расстояние, заданное в X и Y.	Практическое руководство. Смещение элемента

Для совершения более сложных преобразований Windows Presentation Foundation (WPF) предоставляет следующие два класса:

Класс	Описание	Пример
TransformGroup	Группирует несколько объектов TransformGroup в один объект Transform, к которому затем можно применять преобразования свойств.	Практическое руководство. Применение нескольких преобразований к объекту
MatrixTransform	Создает настраиваемые преобразования, не предоставленные другими классами Transform. При использовании MatrixTransform происходит непосредственное управление матрицей.	Практическое руководство. Использование класса MatrixTransform для создания пользовательских преобразований

Windows Presentation Foundation (WPF) также предоставляет возможность преобразований 3-D. Дополнительные сведения см. в описании класса Transform3D.

Общие свойства преобразований

Одним из способов преобразования объекта является объявление соответствующего типа Transform и применение его к свойству преобразования объекта. Для различных типов объектов существуют различные типы свойств преобразования. В следующей таблице перечислены несколько часто используемых типов Windows Presentation Foundation (WPF) и их свойства преобразования.

Тип	Свойства преобразования
Brush	Transform, RelativeTransform
ContainerVisual	Transform
DrawingGroup	Transform
FrameworkElement	RenderTransform, LayoutTransform
Geometry	Transform
TextEffect	Transform
UIElement	RenderTransform

Системы координат и преобразования

При преобразовании объекта происходит не просто его преобразование, а преобразование пространства координат, в котором существует объект. По умолчанию преобразование располагается в начале системы координат целевого объекта: (0,0). Единственным исключением является TranslateTransform; TranslateTransform не имеет свойства центра, так как результат преобразования не зависит от выбора центра преобразования.

В следующем примере используется класс RotateTransform для поворота элемента Rectangle, тип класса FrameworkElement, на 45 градусов вокруг его центра по умолчанию, (0,0). На следующем рисунке показан результат поворота.

Прямоугольный элемент, повернутый на 45 градусов относительно точки (0,0)

FrameworkElement, повернутый на 45 градусов на (0, 0)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

По умолчанию элемент поворачивается вокруг верхнего левого угла, (0,0). Класс RotateTransform, класс ScaleTransform и класс SkewTransform предоставляют свойства CenterX и CenterY, которые позволяют указать точку, в которой применяется преобразование.

В следующем примере также используется класс RotateTransform для поворота элемента Rectangle на 45 градусов; однако, в этом случае свойства CenterX и CenterY заданы так, что класс RotateTransform имеет центр (25, 25). На следующем рисунке показан результат поворота.

Прямоугольный элемент, повернутый на 45 градусов относительно точки (25, 25)

Геометрическая фигура, повернутая на 45 градусов относительно точки (25, 25)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Преобразование FrameworkElement

Чтобы применить преобразования к FrameworkElement, создайте Transform и примените его к одному из двух свойств, предоставленных классом FrameworkElement:

LayoutTransform – преобразование, применяемое перед проходом разметки. После применения преобразования система макета обрабатывает преобразованные размер и положение элемента.
RenderTransform – преобразование, которое изменяет положение элемента, но применяется после завершения прохода разметки. Используя свойства RenderTransform вместо свойства LayoutTransform, можно увеличить производительность системы.

Какое свойство следует использовать? Ввиду предоставляемого повышения производительности используйте свойство RenderTransform везде, где это возможно, особенно при использовании анимированных объектов Transform. При масштабировании, повороте или наклоне применяется свойство LayoutTransform. Также требуется, чтобы родитель изменяемого элемента изменил свой размер в соответствии с изменениями своего дочернего элемента. Обратите внимание, что при использовании совместно со свойством LayoutTransform объекты TranslateTransform не вызывают видимых изменений в элементах. Это происходит потому, что, в ходе преобразования, система макета возвращает преобразуемый элемент на его исходную позицию.

Дополнительные сведения о макетах Windows Presentation Foundation (WPF) см. в разделе общих сведений Система макета.

Пример: Поворот элемента FrameworkElement на 45 градусов

В следующем примере используется класс RotateTransform для поворота кнопки на 45 градусов по часовой стрелке. Кнопка содержится в классе StackPanel, который имеет две другие кнопки.

По умолчанию класс RotateTransform, поворачивается вокруг точки (0, 0). Поскольку в примере не задано значение центра, кнопка поворачивается вокруг точки (0, 0), то есть верхнего левого угла. RotateTransform применяется к свойству RenderTransform. На следующей иллюстрации показан результат выполнения преобразования.

Поворот по часовой стрелке на 45 градусов относительно левого верхнего угла

Преобразованная кнопка с использованием RenderTransform

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

В следующем примере также используется класс RotateTransform для поворота кнопки на 45 градусов по часовой стрелке, а также задает значение (0,5,0,5) свойству кнопки RenderTransformOrigin. Значение свойства RenderTransformOrigin связано с размером кнопки. В результате, поворот выполняется относительно центра кнопки, а не ее верхнего левого угла. На следующей иллюстрации показан результат выполнения преобразования.

Поворот по часовой стрелке на 45 градусов относительно центра

Кнопка, преобразованная по центру

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

В следующем примере для поворота кнопки используется свойство LayoutTransform вместо свойства RenderTransform. При этом преобразование влияет на макет кнопки, что запускает полный проход системы макета. В результате кнопка повернута и ее расположение изменено, поскольку изменился ее размер. На следующей иллюстрации показан результат выполнения преобразования.

Для поворота кнопки использовалось свойство LayoutTransform

Преобразованная кнопка с использованием LayoutTransform

<Border Margin="30"   
 HorizontalAlignment="Left" VerticalAlignment="Top"
 BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">

    <Button Content="A Button" Opacity="1" />   
    <Button Content="Rotated Button">
      <Button.LayoutTransform>
        <RotateTransform Angle="45"  />
      </Button.LayoutTransform>
    </Button>   
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Анимируемые преобразования

Поскольку происходит наследование от класса Animatable, классы Transform должны быть анимированными. Чтобы анимировать Transform, примените анимацию совместимого типа к требуемому свойству.

В следующем примере используется Storyboard и DoubleAnimation с RotateTransform, чтобы заставить Button вращаться при нажатии.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>



    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

Полный пример см. на веб-странице 2-D Transforms Sample. Дополнительные сведения об анимации см. в разделе Общие сведения об эффектах анимации.

Возможности замораживания

Поскольку класс наследуется от класса Freezable, класс Transform имеет несколько особенных возможностей: объекты класса Transform можно объявлять ресурсами, которые: могут совместно использоваться несколькими объектами; их можно сделать доступными только для чтения с целью улучшения производительности, клонирования для того, чтобы сделать их потокобезопасными. Дополнительные сведения о различных возможностях, предоставляемых объектами Freezable, см. в разделе Общие сведения об объектах класса Freezable.