Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Трансформация Windows Runtime

0
Основные виды трансформаций

В  Windows  Runtime  все  визуальные элементы,  наследуемые  от  UIElement, поддерживают трансформации.  Под  трансформацией   мы   будем  понимать преобразование относительно прямоугольной (Декартовой) системы координат. Рассмотрим виды трансформаций.

·                   RotateTransform — поворачивает заданный элемент на указанный угол и вокруг указанной точки.

·                   ScaleTransform — предназначена для сжатия или расширения элемента в   заданное  количество раз.  В  качестве параметров  следует  указать ScaleX и ScaleY, которые определяют, во  сколько раз нужно сжать или расширить элемент по каждой из осей. Если значение этих свойств от 0 до 1, то элемент сжимается, а если больше 1, то расширяется.

·                   SkewTransform — позволяет наклонить заданный элемент по осям X и Y.

В качестве параметра принимает углы наклона AngleX и AngleY.

·                   TranslateTransform  —  позволяет переместить  элемент  на  указанный промежуток по осям X и Y.

·                   MatrixTransform  —  позволяет задать  матрицу   трансформации  для преобразования элемента.

Чтобы  установить трансформацию  для  одного  из  элементов,   достаточно создать объект соответствующей трансформации и  заполнить этим объектом свойство  элемента RenderTransform. Если  Вы  хотите использовать несколько трансформаций    одновременно,     то     для    заполнения    RenderTransform используется   TransformGroup,  позволяющий объединить  несколько  видов трансформации. Рассмотрим пример, который объединяет  все стандартные виды трансформации, при этом пользователь может менять их свойства с помощью ползунков. Вот код этого примера.

<StackPanel x:Name="LayoutRoot" Background="White">

<Rectangle Width="200" Height="100" Fill="Red">

<Rectangle.RenderTransform>

<TransformGroup>

<RotateTransform Angle=

"{Binding Value, ElementName=rotateSlider, Mode=OneWay}" CenterX="100" CenterY="50">

</RotateTransform>

<ScaleTransform  CenterX="100" CenterY="50"

ScaleX=

"{Binding Value, ElementName=scaleXSlider, Mode=OneWay}" ScaleY=

"{Binding Value, ElementName=scaleYSlider, Mode=OneWay}">

</ScaleTransform>

<SkewTransform CenterX="100" CenterY="50" AngleX=

"{Binding Value, ElementName=skewXSlider, Mode=OneWay}" AngleY=

"{Binding Value, ElementName=skewYSlider, Mode=OneWay}">

</SkewTransform>

<TranslateTransform X=

"{Binding Value, ElementName=translateXSlider, Mode=OneWay}" Y=

"{Binding Value, ElementName=translateYSlider, Mode=OneWay}">

</TranslateTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Slider Width="200" Name="rotateSlider" Minimum="0" Maximum="360">

</Slider>

<Slider Width="200" Name="scaleXSlider" Minimum="0" Maximum="2" Value="1">

</Slider>

<Slider Width="200" Name="scaleYSlider" Minimum="0" Maximum="2" Value="1">

</Slider>

<Slider Width="200" Name="skewXSlider" Minimum="-180" Maximum="180" Value="0">

</Slider>

<Slider Width="200" Name="skewYSlider" Minimum="-180" Maximum="180" Value="0">

</Slider>

<Slider Width="200" Name="translateXSlider" Minimum="-100" Maximum="100" Value="0">

</Slider>

<Slider Width="200" Name="translateYSlider" Minimum="-100" Maximum="100" Value="0">

</Slider>

</StackPanel>

Результат работы приложения показан ниже:

Рис. 4.7.

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

CompositeTransform

Существует   еще    один    тип    трансформации    —    CompositeTransform, объединяющий   все    основные    трансформации.    При   его   использовании разработчик    тратит     меньше    времени   на    реализацию    программного взаимодействия   с   интерфейсом.  Хотя  данный  тип  трансформации  можно использовать только в  том случае, если Вы хотите реализовать  комбинацию трансформаций, привязанных к  одному центру.  Перепишем вышеуказанный пример, используя новый тип трансформации.

<StackPanel x:Name="LayoutRoot" Background="White">

<Rectangle Width="200" Height="100" Fill="Red">

<Rectangle.RenderTransform>

<CompositeTransform CenterX="100" CenterY="50" ScaleX=

"{Binding Value, ElementName=scaleXSlider, Mode=OneWay}" ScaleY=

"{Binding Value, ElementName=scaleYSlider, Mode=OneWay}" Rotation=

"{Binding Value, ElementName=rotateSlider, Mode=OneWay}" SkewX=

"{Binding Value, ElementName=skewXSlider, Mode=OneWay}" SkewY=

"{Binding Value, ElementName=skewYSlider, Mode=OneWay}" TranslateX=

"{Binding Value, ElementName=translateXSlider, Mode=OneWay}" TranslateY=

"{Binding Value, ElementName=translateYSlider, Mode=OneWay}">

</CompositeTransform>

</Rectangle.RenderTransform>

</Rectangle>

<Slider Width="200" Name="rotateSlider" Minimum="0" Maximum="360">

</Slider>

<Slider Width="200" Name="scaleXSlider" Minimum="0" Maximum="2" Value="1">

</Slider>

<Slider Width="200" Name="scaleYSlider" Minimum="0" Maximum="2" Value="1">

</Slider>

<Slider Width="200" Name="skewXSlider" Minimum="-180" Maximum="180" Value="0">

</Slider>

<Slider Width="200" Name="skewYSlider" Minimum="-180" Maximum="180" Value="0">

</Slider>

<Slider Width="200" Name="translateXSlider" Minimum="-100" Maximum="100" Value="0">

</Slider>

<Slider Width="200" Name="translateYSlider" Minimum="-100" Maximum="100" Value="0">

</Slider>

</StackPanel>

Теперь код выглядит более приятно, а разработчик взаимодействует с  одним объектом вместо четырех.

Трехмерные проекции

Еще   один   тип   трансформации  определяется   элементом   PlaneProjection, который  позволяет реализовывать  наиболее   распространенные  задачи  по работе в  трехмерном пространстве. С одной стороны, его можно использовать по отношению к любому элементу или даже некоторым контейнерам (Border), а с другой — он имеет довольно простые свойства, позволяющие  задать углы поворота и  расположить объект в  трехмерном пространстве. Ниже приведен пример использования объекта PlaneProjection по отношению к MediaElement, отображающему видео.

<StackPanel x:Name="LayoutRoot" Background="White">

<MediaElement Source="WildLife.wmv" Width="400" Height="300">

<MediaElement.Projection>

<PlaneProjection RotationX=

"{Binding Value, ElementName=rotateXSlider, Mode=OneWay}" RotationY=

"{Binding Value, ElementName=rotateYSlider, Mode=OneWay}" RotationZ=

"{Binding Value, ElementName=rotateZSlider, Mode=OneWay}">

</PlaneProjection>

</MediaElement.Projection>

</MediaElement>

<Slider Width="400" Minimum="0" Maximum="360" Name="rotateXSlider">

</Slider>

<Slider Width="400" Minimum="0" Maximum="360" Name="rotateYSlider">

</Slider>

<Slider Width="400" Minimum="0" Maximum="360" Name="rotateZSlider">

</Slider>

</StackPanel>

В  данном случае использовались свойства  RotationX, RotationY,  RotationZ, позволяющие развернуть элемент по каждой из осей в трехмерном пространстве на заданное количество градусов. Результат работы этого кода отображается на экране следующим образом.

Рис. 4.8.

Обратите внимание, что, в  отличие от трансформаций, проекции  имеют свой контейнер, который не пересекается с RenderTransform.

Дополнительно в элементе PlaneProjection существуют атрибуты, позволяющие задать начало координат в трехмерном пространстве, а также смещение элемента по  каждой  из  осей.  При  этом  смещение  можно  отсчитывать относительно текущего  контейнера  или  всего  окна.  Вот  эти  свойства:  CenterOfRotationX, CenterOfRotationY,        CenterOfRotationZ,       LocalOffsetX,       LocalOffsetY, LocalOffsetZ, GlobalOffsetX, GlobalOffsetY, GlobalOffsetZ.

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

  • Комментарии