В этой статье рассказывается об использовании трансформации применительно к элементам интерфейса в Silverlight. Все описываемое действительно как в Silverlight первой версии (1.0), так и для версии 1.1 (на момент написания ещё Alpha). Всего существует 5 видов трансформации:
1. TranslateTransform - изменяет позицию элемента.
2. ScaleTransform - масштабирует элемент.
3. SkewTransform - поворачивает элемент на некоторый угол относительно его осей.
4. RotateTransform - поворачивает элемент вокруг центральной точки.
5. MatrixTransform - перемножает все точки элемента по заданной матрице.
Далее рассмотрим все пять подробнее, но перед описанием трансформаций необходимо проделать несколько шагов. Нужно создать новый проект, который будем использовать как шаблон для применения всех видов трансформации. О создании silverlight проектов читайте в статье "Создание Silverlight проектов в Visual Studio".
Добавим в XAML файл текстовый блок, над которым и будем производить манипуляции. Вот как выглядит мой XAML код:
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <TextBlock x:Name="myText"
9: Canvas.Left="30"
10: Canvas.Top="30"
11: FontSize="50"
12: Text="Transform test"/>
13: </Canvas>
После запуска при установленном silverlight плагине отобразится следующее:
Для добавления трансформации необходимо объявить <Элемент.RenderTransorm> внутри соответствующего элемента. Данная конструкция объявляет начало трансформации.
TranslateTransformation
Данный вид трансформации объявляется при помощи <TranslateTransform /> тега. Необходимы атрибуты X и Y, которые принимают числовые значения и представляют собой координаты x и y элемента после трансформации. Вот xaml код:
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <TextBlock x:Name="myText"
9: Canvas.Left="30"
10: Canvas.Top="30"
11: FontSize="50"
12: Text="Transform test">
13: <TextBlock.RenderTransform>
14: <TranslateTransform X="30" Y="30"/>
15: </TextBlock.RenderTransform>
16: </TextBlock>
17: </Canvas>
Пожалуй, это самый простой вид трансформации.
ScaleTranform
Для применения нужно объявить <ScaleTranform> с атрибутами ScaleX и ScaleY, которые задают коэффициент умножения каждой оси элемента. Также опционально можно задать координаты центра трансформации с помощью присвоения значений CenterX и CenterY параметрам. Например, я увеличил текстовый блок в 2 раза по оси x, и уменьшил по y, используя значения "2" и "0.5" соответственно.
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <TextBlock x:Name="myText"
9: Canvas.Left="30"
10: Canvas.Top="30"
11: FontSize="50"
12: Text="Transform test">
13: <TextBlock.RenderTransform>
14: <ScaleTransform ScaleX="2"
15: ScaleY="0.5"
16: CenterX="30"
17: CenterY="45"/>
18: </TextBlock.RenderTransform>
19: </TextBlock>
20: </Canvas>
SkewTransform
Используется при помощи <SkewTransform> тега с атрибутами AngleX и AngleY, которые задают угол поворота по осям. Как и в предыдущем случае можно задать координаты центра.
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <TextBlock x:Name="myText"
9: Canvas.Left="30"
10: Canvas.Top="30"
11: FontSize="50"
12: Text="Transform test">
13: <TextBlock.RenderTransform>
14: <SkewTransform CenterX="30"
15: CenterY="45"
16: AngleX="70"
17: AngleY="-28"/>
18: </TextBlock.RenderTransform>
19: </TextBlock>
20: </Canvas>
RotateTransform
Данный вид трансформации поворачивает объект вокруг верхней левой точки (можно задать при помощи CenterX, CenterY). Для применения нужно объявить <RotateTransform> с всего одним атрибутом - Angle, который, как видно из названия, отвечает за угол поворота.
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <TextBlock x:Name="myText"
9: Canvas.Left="30"
10: Canvas.Top="30"
11: FontSize="50"
12: Text="Transform test">
13: <TextBlock.RenderTransform>
14: <RotateTransform Angle="30"/>
15: </TextBlock.RenderTransform>
16: </TextBlock>
17: </Canvas>
MatrixTransform
Пожалуй, самый сложный и интересный вид трансформации. С помощью него над элементом можно сразу провести 3 вида трансформации: перемещение, масштабирование и поворот. Каждая координата точки элемента умножается на некоторое значение, после чего вычисляется её новое положение. Для вычисления используется следующая формула:
Xnew = X*M12 + Y*M21 + OffsetX
Ynew = X*M12 + Y*M22 + OffsetY
В silverlight матрице значения задаются в таком порядке:
<MatrixTransform Matrix="M11, M12, M21, M22, OffsetX, OffsetY"/>
Для внесения ясности взгляните на примеры.
1)Масштабирует текст по оси X в 2 раза:
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <TextBlock x:Name="myText"
9: Canvas.Left="30"
10: Canvas.Top="30"
11: FontSize="50"
12: Text="Transform test">
13: <TextBlock.RenderTransform>
14: <MatrixTransform Matrix="2,0,0,1,0,0" />
15: </TextBlock.RenderTransform>
16: </TextBlock>
17: </Canvas>
2)Перемещает элемент на 100 пикселей по осям X и Y:
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <TextBlock x:Name="myText"
9: Canvas.Left="30"
10: Canvas.Top="30"
11: FontSize="50"
12: Text="Transform test">
13: <TextBlock.RenderTransform>
14: <MatrixTransform Matrix="1,0,0,1,100,100" />
15: </TextBlock.RenderTransform>
16: </TextBlock>
17: </Canvas>
TransformGroup
Можно также группировать несколько трансформаций. Для этого используется <TransformGroup> тег, внутри которого объявляется несколько видов трансформации.
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <TextBlock x:Name="myText"
9: Canvas.Left="30"
10: Canvas.Top="30"
11: FontSize="50"
12: Text="Transform test">
13: <TextBlock.RenderTransform>
14: <TransformGroup>
15: <RotateTransform Angle="45"/>
16: <TranslateTransform X="200" Y="300"/>
17: </TransformGroup>
18: </TextBlock.RenderTransform>
19: </TextBlock>
20: </Canvas>
Стоит также отметить, что трансформация может применяться не только к основным элементам пользовательского интерфейса, но и к геометрическим фигурам, кистям.