Главная » Разработка для Windows Phone 7 » Трансформации Windows Phone 7

0

До появления Windows Presentation Foundation и Silverlight трансформации были преимущественно инструментом для знатоков графики. С математической точки зрения

Такое смещение белой точки создает эффект отражения источника света и делает фигуру объемной:

трансформация – это применение простой формулы ко всем координатам визуального объекта, что приводит к перемещению, изменению размера или повороту объекта.

В Silverlight трансформации могут применяться к любому объекту, который наследуется от UIElement и включает текст, растровые изображения, фильмы, панели и элементы управления. Трансформации возможны в UIElement благодаря свойству RenderTransform (Трансформация визуального представления), значением которого является объект типа Transform. Transform – это абстрактный класс, но от него наследуются семь неабстрактных классов:

•         TranslateTransform (Трансформация переносом) обеспечивает изменение местоположения объекта

•         ScaleTransform (Трансформация масштабированием) обеспечивает увеличение или уменьшение размера

•           RotateTransform (Трансформация вращением) обеспечивает вращение вокруг точки

•         SkewTransform (Трансформация наклонением) обеспечивает смещение одного размера относительного другого

•         MatrixTransform (Трансформация с использованием матрицы) обеспечивает представление трансформаций с помощью стандартной матрицы

•         TransformGroup (Группа трансформаций) позволяет комбинировать несколько трансформаций

•         CompositeTransform (Составная трансформация) позволяет задавать ряд трансформаций в определенном порядке

Трансформации могут быть довольно сложными, особенно если это составные трансформации. Мы рассмотрим здесь лишь самые основные из них. Очень часто трансформации используются в сочетании с анимациями. Анимация трансформации – наиболее эффектный вид анимации визуального объекта.

Предположим, имеется TextBlock, и требуется увеличить его в два раза. Нет ничего проще: удваиваем значение его свойства FontSize. Теперь, предположим, необходимо сделать текст в два раза шире и в три раза выше. Здесь одним изменением FontSize не обойтись. Понадобится вынести свойство RenderTransform как свойство-элемент и задать ScaleTransform в качестве его значения:

<TextBlock … >

<TextBlock.RenderTransform>

<ScaleTransform ScaleX="2" ScaleY="3" /> </TextBlock.RenderTransform> </TextBlock>

Чаще всего в качестве значения свойства RenderTransform используется объект типа TranslateTransform, ScaleTransform или RotateTransform. Трансформации можно объединять в TransformGroup. Двухмерные трансформации представляются в виде матриц 3×3, сочетание трансформаций эквивалентно умножению матриц. Общеизвестно, что умножение матриц не является коммутативным, поэтому порядок трансформаций имеет значение.

Несмотря на то, что применение TransformGroup считается сложным случаем, я включил TransformGroup в свой небольшой проект TransformExperiment (Опыт с трансформациями), который позволяет поэкспериментировать с четырьмя стандартными трансформациями. Изначально в этом проекте все свойства имеют значения по умолчанию:

Проект Silverlight: TransformExperiment Файл: MainPage.xaml (фрагмент)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="Transform Experiment" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock.RenderTransform> <TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"

CenterX="0" CenterY="0" /> <SkewTransform AngleX="0" AngleY="0"

CenterX="0" CenterY="0" /> <RotateTransform Angle="0"

CenterX="0" CenterY="0" /> <TranslateTransform X="0" Y="0" /> </TransformGroup> </TextBlock.RenderTransform> </TextBlock> </Grid>

Можете поэкспериментировать с этим приложением прямо в Visual Studio. Сначала попробуйте каждый тип трансформации отдельно. Хотя TranslateTransform и расположен в конце группы, начните с него. Меняя значение свойства X, можно смещать текст вправо или влево (задавая отрицательные значения). Изменение значения свойства Y обеспечивает перемещение текста вверх или вниз. Задайте Y равным -400, и текст окажется вверху в области заголовка!

TranslateTransform используется для создания теней и эффектов выпуклого или вдавленного текста. Просто поместите два элемента с одинаковым текстом в одно и то же место. Все свойства текста должны быть одинаковыми, отличаются только значения свойства Foreground. Без применения каких-либо трансформаций второй TextBlock просто располагается поверх первого. К любому из двух примените ScaleTransform, и получите абсолютно фантастический результат. Эту технику демонстрирует проект EmbossedText (Выпуклый текст). Вот два элемента TextBlock в одном Grid:

Проект Silverlight: EmbossedText Файл: MainPage.xaml (фрагмент)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="EMB0SS"

Foreground="{StaticResource PhoneForegroundBrush}" FontSize="9 6"

HorizontalAlignment="Center" VerticalAlignment="Center" />

<TextBlock Text="EMB0SS"

Foreground="{StaticResource PhoneBackgroundBrush}" FontSize="9 6"

HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock.RenderTransform>

<TranslateTransform X="2" y="2" /> </TextBlock.RenderTransform> </TextBlock> </Grid>

Заметьте, что в качестве значений свойств Foreground я использовал цвета темы. В случае применения стандартной темной темы нижний TextBlock будет белым, и верхний – черным, как фон, но немного смещенным, так что белый чуть-чуть выглядывает:

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

Обратимся опять к проекту TransformExperiment. Вернем значения свойств TranslateTransform к применяемым по умолчанию (0) и поэкспериментируем немного со свойствами ScaleX и ScaleYдля ScaleTransform. По умолчанию оба свойства имеют значение 1. Значения больше 1 обеспечат увеличение размеров текста в горизонтальном и вертикальном направлениях; значения меньше 1 обусловят уменьшение текста. Можно использовать даже отрицательные значения, чтобы развернуть текст вокруг горизонтальной или вертикальной оси.

Любое изменение масштаба выполняется относительно верхнего левого угла текста. Другими словами, при увеличении или уменьшении размера текста, его верхний левый угол остается закрепленным на одном месте. Это может быть сложно заметить, поскольку верхний левый угол, на самом деле, располагается немного выше горизонтального штриха первой «Т» текстовой строки, в области, зарезервированной для диакритических знаков, таких как знаки ударения и умляуты.

Предположим, требуется изменить масштаб текста относительно другой точки, например, центра текста. Для этого в классе ScaleTransform предусмотрены свойства CenterX и CenterY. Для реализации масштабирования текста вокруг его центра можно вычислить размер текста (или получить его в коде посредством свойств ActualWidth и ActualHeight TextBlock), разделить полученные значения на 2 и задать результаты в качестве значений CenterX и CenterY. В проекте TransformExperiment задайте для текстовой строки 96 и 13, соответственно. Теперь масштабирование будет выполняться относительно центра.

Но существует и намного более простой путь. У самого TextBlock есть свойство RenderTansformOrigin (Центр трансформации визуального представления), которое он наследует от UIElement. Это свойство определяет точку в относительной системе координат, где (0, 0) соответствует верхнему левому углу, (1, 1) нижнему правому углу, и (0.5, 0.5) – центру. Верните значения CenterX и CenterY в ScaleTransform к исходному 0 и задайте RenderTransformOrigin в TextBlock следующим образом:

RenderTransformOrigin= «0.5 0.5"

Не будем менять это значение RenderTransformOrigin, вернем свойствам ScaleX и ScaleY класса ScaleTransform значения по умолчанию (1) и займемся RotateTransform. Как и масштабирование, вращение всегда выполняется относительно какой-то точки. Эту точку можно задать в абсолютных единицах измерения (т.е. пикселах) относительно вращаемого объекта посредством свойств CenterX и CenterY или использовать относительные координаты через RenderTransformOrigin. Свойство Angle (Угол) измеряется в градусах, положительные значения означают вращение по часовой стрелке. На рисунке представлено вращение вокруг центра на 45 градусов.

Трансформацию SkewTransform сложно описать, но легко продемонстрировать. На рисунке представлен эффект, получаемый в результате задания свойству AngleX значения 30 градусов:

Windows Phone поддерживает также трансформацию проекции. Эта трансформация была введена в Silverlight 3, но используется практически исключительно в связи с анимациями, поэтому отложим ее рассмотрение до главы 15.

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

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