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

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

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

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

Примечание

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

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

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

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 единиц по оси X, а его ширина будет увеличена в 3 раза. Поскольку Windows Presentation Foundation (WPF) поддерживает только аффинное преобразование, значения в правом столбце всегда имеют значение 0, 0, 1.

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

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

Windows Presentation Foundation (WPF) предоставляет следующие двумерные 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) также предоставляет трехмерные преобразования. Дополнительные сведения см. в описании класса Transform3D.

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

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

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

Элемент FrameworkElement, повернутый на 45 градусов относительно точки (0, 0)
Элемент Rectangle, повернутый на 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 и Center, позволяющие указать точку, в которой применяется преобразование.

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

Элемент Geometry, повернутый на 45 градусов относительно точки (25, 25)
Элемент Rectangle, повернутый на 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
Поворот кнопки с использованием 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>

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

Возможности объектов Freezable

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

См. также раздел