Общие сведения о преобразованиях

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

Что такое преобразование?

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

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

Матрица преобразования 2D

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

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

Классы преобразования

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

Класс	Описание	Пример	Иллюстрация
RotateTransform	Поверните элемент на указанный Angle.	поворот объекта
ScaleTransform	Масштабирует элемент на указанные величины ScaleX и ScaleY.	масштабирование элемента
SkewTransform	Искажает элемент на указанные величины AngleX и AngleY.	Наклонить элемент
TranslateTransform	Перемещает (преобразует) элемент по указанным X и Y суммам.	Перевод элемента

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

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

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

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

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

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

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

Элемент Прямоугольника вращён на 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)

<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. На следующем рисунке показан результат преобразования.

RenderTransform
Поворот по часовой стрелке на 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">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

В следующем примере также используется RotateTransform для поворота кнопки 45 градусов по часовой стрелке, но она также задает значение RenderTransformOrigin кнопки (0,5, 0,5). Значение свойства 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, используемый для поворота кнопки

<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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

Для полного примера см. раздел Пример преобразований 2D. Дополнительные сведения об анимациях см. в разделе Обзор анимации.

Функции с возможностью заморозки

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

См. также

• Transform
• Matrix
• Темы руководств
• пример преобразования 2D