rendertransformorigin wpf что это

Анимированные трансформации

Трансформации представляют собой один из наиболее мощных способов изменения элемента. При использовании трансформаций не просто изменяются границы элемента. При этом все визуальное представление элемента движется, опрокидывается, скашивается, растягивается, увеличивается, сжимается или вращается. Например, если выполняется анимация размеров кнопки с помощью ScaleTransform, то вся кнопка изменяется в размерах, включая ее рамку и внутреннее содержимое. Эффект получается более впечатляющий, чем когда осуществляется анимация только свойств Width и Height или свойства FontSize, затрагивающего текст кнопки.

Каждый элемент способен применять трансформацию двумя разными способами: через свойства RenderTransform и LayoutTransform. Свойство RenderTransform более эффективно, поскольку применяется после того, как выполняется компоновка, и служит для трансформации финального отображаемого вывода. Свойство LayoutTransform применяется перед проходом компоновки, и в результате другие элементы управления оказываются переупорядоченными с целью заполнения контейнера. Изменение свойства LayoutTransform инициирует новую операцию компоновки (если только элемент не находится внутри Canvas — в этом случае RenderTransform и LayoutTransform эквивалентны).

Чтобы использовать в анимации трансформацию, первым делом нужно определить трансформацию (анимация может изменить существующую трансформацию, но не создать новую). Например, предположим, что необходимо позволить кнопке вращаться. Для этого потребуется трансформация RotateTransform.

Кроме того, имеется триггер, который заставит кнопку вращаться, когда курсор мыши проходит над ней. Он использует целевое свойство RenderTransform.Angle — другими словами, читает свойство кнопки RenderTransform и модифицирует свойство Angle определенного там объекта RenderTransform. Тот факт, что свойство RenderTransform может содержать широкое разнообразие объектов трансформации, каждый со своим набором свойств, не вызывает проблемы. До тех пор, пока используется трансформация, которая имеет свойство Angle, этот триггер будет работать:

Кнопка делает один оборот каждые 0,8 секунды и продолжает свое вращение бесконечно. Пока кнопка вращается, она остается полностью функциональной, например, на ней можно щелкнуть и обработать событие Click.

Чтобы обеспечить вращение кнопки вокруг ее центральной точки (а не верхнего левого угла), понадобится установить свойство RenderTransformOrigin. Вспомните, что свойство RenderTransformOrigin использует относительные единицы от 0 до 1, так что 0.5 представляет среднюю точку.

Для остановки вращения может использоваться второй триггер, реагирующий на событие MouseLeave. В этот момент можно удалить раскадровку, выполняющую вращение, однако это заставит кнопку вернуться к своей исходной ориентации за один шаг. Более удачный подход заключается в запуске второй анимации, которая заменит первую. В этой анимации свойства То и From опущены, вследствие чего кнопка плавно развернется в свое исходное положение примерно на 0,2 секунды:

Этот пример также дает отличный шанс понять разницу между RenderTransform и LayoutTransform. Модифицировав код для использования LayoutTransform, вы увидите, что другие кнопки отодвигаются, освобождая место активной кнопке для поворота. Например, если верхняя кнопка поворачивается, то все, находящиеся ниже, отодвинутся, чтобы не мешать ей:

Источник

WPF. Практика трансформаций

WPF Transforms

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

Трансформация графики в WPF обеспечивается классами происходящих от абстрактного класса System.Windows.Media.Transform определяющего общую функциональность для преобразований в двумерной плоскости.

Для создания составных трансформаций из вышеописанных классов используется класс TransformGroup.

RenderTransform vs LayoutTransform

Две одинаковые группы элементов синхронно вращаются пошагово в 30 градусов. Преобразование координат выполняется просто, благодаря готовому классу трансформации вращения RotateTransform. Для сравнения задавать трансформацию будем через разные свойства RenderTransform и LayoutTransform.

Для наглядности работы разных видов графических преобразований вокруг группы элементов создан бордюр. При вращении группы через свойство RenderTransform размер бордюра не изменяется. Контейнер Grid владеющей группой элементов выходит за пределы из ограждения Border, перерасчет компоновки не производится.

Группа элементов, использующее для вращения LayoutTransform изменяет размер бордюра. После каждого цикла такого преобразования происходит перерасчёт компоновки дочерних элементов. Border вынужден изменять свои размеры чтобы полностью вместить трансформированную группу. При поворотах габаритную длину и ширину увеличивают внутренние диагонали прямоугольной группы. При исследовании размеров ActualWidth и ActualHeight внешнего бордюра, они в действительности изменяются после каждого поворота.

Выбор между свойствами

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

При выборе вида преобразований между RenderTransform и LayoutTransform следует руководствоваться выгодой производительности. Если нет необходимости изменять компоновку элементов (возможно большого количества), рекомендуется использовать RenderTransform.

Как показывает практика можно присваивать одновременно двум свойствам разные трансформации. При запуске такого кода действительно работают два преобразования одновременно. Но такая операция подходит больше для изучения, чем для применения. Во время анимации LayoutTransform всё время пытается скорректировать положение элемента в макете, RenderTransform работает в своей координатной системе. Не согласованность двух трансформаций, во время демонстрационной анимации, порождает интересные графические артефакты.

Псевдокод такого симбиоза:

XAML разметка и программный код

Логика вращения написана в программном коде отдельным методом.

Листинг метода вращения групп элементов:

Вращение и масштабирование текста

Текстом владеет элемент TextBlock, стоит подчеркнуть, что в этом примере трансформируется только сам текст. Как птичка из гнезда, вылетает текст из области TextBlock и возвращается вновь. Для элементов TextBlock можно определить текстовые эффекты с помощью его свойства TextEffects. Данное свойство имеет тип TextEffectCollection и позволяет одновременно применять различные эффекты к тексту.

Составная трансформация

Элементам можно присвоить только одну трансформацию. При необходимости нескольких трансформаций одновременно можно создать составную трансформацию. Для этого в распоряжении библиотек WPF имеется класс комбинирования преобразований TransformGroup. Через свойство Children данного класса добавляются необходимые виды трансформаций. В результате TransformGroup создаёт единую MatrixTransform, объединяя все трансформации из коллекции Children.

XAML разметка визуальной части

Визуальная часть текстовых эффектов небольшая и построена в XAML файле.

Краткий листинг данного кода:

TextEffect для управления текстом

Программный код составной трансформации текста

Вращение LinearGradientBrush

Трансформировать можно и кисти для закраски заднего фона элементов. LinearGradientBrush наследует от абстрактного класса Brush два свойства трансформации: Brush.RelativeTransform и Brush.Transform.

К кистям можно применять любую трансформацию. Для наглядности эффектов от воздействия на цвета градиентной кисти взята трансформация вращения. RotateTransform плюс метод BeginAnimation() самой кисти создают завораживающую красотой анимацию.

RelativeTransform vs Transform

У кистей, в сравнении с элементами наследуемые от UIElement, нет свойства RenderTransformOrigin. Центр координат для трансформации вращения, масштабирования, наклона, необходимо определять в классе трансформации свойствами CenterX и CenterY.

XAML разметка и программный код

Трансформация TranslateTransform

TranslateTransform такая же частая, в обиходе программистов, операция трансформации, как и RotateTransform. Чтобы переместить элемент указывается конечная точка свойствами типа double X и Y. Элемент мгновенно оказывается в новой позиции. Трансформация почти всегда ногу в ногу с анимацией. В прилагаемом коде перемещение совмещено с анимацией.

Данные новой позиции сохраняются только в объекте класса TranslateTransform. Чтобы отслеживать позицию элемента необходимо создавать объект TranslateTransform глобальным на уровне приложения.

Для перемещения элементов можно использовать только свойство RenderTransform. Если попробовать использовать свойство LayoutTransform то перемещения не будет. Это связано с тем, что макет автоматически корректирует любые линейные смещения позиций своих дочерних элементов. По сравнению с локальными трансформациями вращения и масштабирования, TranslateTransform может переместить элемент даже за пределы видимой зоны окна приложения, а это лишает смысла адаптивную компоновку макета. LayoutTransform просто игнорирует трансформацию TranslateTransform.

XAML код элементов Border

Программный код для трансформации TranslateTransform

Программный код трансформации перемещения элементов состоит из двух методов. Вспомогательный метод AnimationBorder(. ) значительно уменьшает повторяющийся код.

Листинг методов перемещения элементов посредством трансформации TranslateTransform:

Трансформация графики класса Path

Класс Path создаёт графику из последовательности цветных линий и геометрических фигур. Свойство LayoutTransform класс Path наследует от FrameworkElement, свойство RenderTransform досталось ему от UIElement. Имея данные свойства графические объекты Path полноценно поддерживают все виды 2D трансформаций.

Для трансформации геометрических фигур создадим составную группу из трех видов: вращения, масштабирования и перемещения. Комбинированную матрицу всех трансформаций, экземпляр класса TransformGroup, присвоим свойству RenderTransform экземпляров Path. Поскольку здесь есть объект TranslateTransform свойство LayoutTransform использовать нельзя. Для визуальной выразительности преобразований трансформацию оформим в виде анимации.

При использовании различных видов трансформаций одновременно, важна их последовательность добавления в TransformGroup. В нашем случае вращение и масштабирование происходит относительно центра, эти трансформации можно менять местами, не изменяя результат. Но трансформация движения TranslateTransform должна добавляться в группу последней. Тогда мы получаем поступательное движение вращающихся цветных прямоугольников. Если последовательности преобразований изменить, получается тоже красочная трансформация, но такое лучше приберечь для особых случаев.

Программные коды трансформации геометрических фигур

Программный код комплексной трансформации экземпляров Path состоит из двух методов для уменьшения строк кода.

Листинг программного кода:

Исходник трансформаций элементов WPF

Источник

Трансформация элементов

Свойства RenderTransform и RenderTransformOrigin не ограничиваются фигурами. Фактически, класс Shape наследует их от класса UIElement, а это означает, что они поддерживаются всеми элементами WPF, включая кнопки, текстовые поля, TextBlock, контейнеры компоновки, заполненные содержимым, и т.д. Невероятно, но можно поворачивать, искажать и масштабировать любую часть пользовательского интерфейса WPF (хотя в большинстве случаев этого делать и не стоит).

RenderTransform — не единственное свойство, касающееся трансформации, определенное в базовых классах WPF. В FrameworkElement также определено свойство LayoutTransform. Это свойство изменяет элемент тем же самым образом, но выполняет свою работу перед проходом компоновки. В результате требуется немного больше накладных расходов, но это оправдано, когда контейнер компоновки используется для обеспечения автоматического размещения группы элементов управления. (Классы фигур также включают свойство LayoutTransform, но с ним редко приходится работать, поскольку обычно фигуры размещаются специальным образом с использованием контейнера вроде Canvas вместо применения автоматической компоновки.)

Чтобы понять разницу, взгляните на рисунок из примера ниже, на котором изображено два контейнера StackPanel (представленных заштрихованными областями), которые содержат повернутую кнопку и нормальную кнопку. Повернутая кнопка в первом контейнере StackPanel использует подход RenderTransform. Панель StackPanel располагает две кнопки так, что первая из них позиционирована нормально, а поворот второй происходит непосредственно перед ее отображением. В результате повернутая кнопка перекрывает ту, что находится под ней. Во второй панели StackPanel повернутая кнопка применяет подход LayoutTransform. Контейнер StackPanel получает границы, необходимые для размещения повернутой кнопки, и располагает ее соответствующим образом.

Существует несколько редких элементов, которые не могут быть трансформированы, потому что работа по их отображению не является встроенной в WPF. Примерами могут служить элемент WindowsFormsHost, который позволяет поместить элемент управления Windows Forms в окно WPF, а также элемент WebBrowser, который дает возможность отобразить HTML-содержимое.

До определенной степени элементы WPF остаются в неведении о том, что они были модифицированы, когда устанавливаются свойства LayoutTransform и RenderTransform. В частности, трансформации не затрагивают свойства ActualHeight и ActualWidth элемента, которые продолжают хранить его нетрансформированные размеры. Это часть того, как WPF обеспечивает продолжение работы потоковой компоновки и отступов с тем же поведением, даже если применяется одна или более трансформаций.

Источник

UIElement. Render Transform Origin Свойство

Определение

Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

Получает или задает центральную точку любого возможного преобразования при прорисовке, объявленного RenderTransform относительно границ элемента. Это свойство зависимостей.

Значение свойства

Значение, объявляющее преобразование при прорисовке. Значение по умолчанию — Point с координатами (0,0).

Примеры

Комментарии

RenderTransformOrigin имеет довольно нестандартное использование Point значения Structure, в котором не Point представляет абсолютное расположение в системе координат. Вместо этого значения от 0 до 1 обрабатываются как коэффициент для диапазона текущего элемента в каждой оси x, y. Например, значение (0,5, 0,5) приведет к центрированию преобразования прорисовки в элементе, или (1, 1) поместит преобразование прорисовки в нижний правый угол элемента. NaN не является допустимым значением.

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

Использование атрибута XAML

Значения XAML

ксоригин
Коэффициент горизонтального источника. Обычно это значение указывается в диапазоне от 0 до 1. См. заметки.

йоригин
Вертикальный коэффициент источника. Обычно это значение указывается в диапазоне от 0 до 1. См. заметки.

Источник

Transforms Overview

This topic describes how to use the 2D Transform classes to rotate, scale, move (translate), and skew FrameworkElement objects.

What Is a Transform?

A Transform defines how to map, or transform, points from one coordinate space to another coordinate space. This mapping is described by a transformation Matrix, which is a collection of three rows with three columns of Double values.

Windows Presentation Foundation (WPF) uses row-major matrices. Vectors are expressed as row-vectors, not column vectors.

The following table shows the structure of a WPF matrix.

A 2D transformation matrix

By manipulating matrix values, you can rotate, scale, skew, and move (translate) an object. For example, if you change the value in the first column of the third row (the OffsetX value) to 100, you can use it to move an object 100 units along the x-axis. If you change the value in the second column of the second row to 3, you can use it to stretch an object to three times its current height. If you change both values, you move the object 100 units along the x-axis and stretch its height by a factor of 3. Because Windows Presentation Foundation (WPF) only supports affine transforms, the values in the right column are always 0, 0, 1.

Although Windows Presentation Foundation (WPF) enables you to directly manipulate matrix values, it also provides several Transform classes that enable you to transform an object without knowing how the underlying matrix structure is configured. For example, the ScaleTransform class enables you to scale an object by setting its ScaleX and ScaleY properties, instead of manipulating a transformation matrix. Likewise, the RotateTransform class enables you to rotate an object by just setting its Angle property.

Transform Classes

Windows Presentation Foundation (WPF) provides the following 2D Transform classes for common transformation operations:

Class	Description	Example	Illustration
RotateTransform	Rotates an element by the specified Angle.	Rotate an Object
ScaleTransform	Scales an element by the specified ScaleX and ScaleY amounts.	Scale an Element
SkewTransform	Skews an element by the specified AngleX and AngleY amounts.	Skew an Element
TranslateTransform	Moves (translates) an element by the specified X and Y amounts.	Translate an Element

For creating more complex transformations, Windows Presentation Foundation (WPF) provides the following two classes:

Windows Presentation Foundation (WPF) also provides 3D transformations. For more information, see the Transform3D class.

Common Transformation Properties

One way to transform an object is to declare the appropriate Transform type and apply it to the transformation property of the object. Different types of objects have different types of transformation properties. The following table lists several commonly used Windows Presentation Foundation (WPF) types and their transformation properties.

Transformations and Coordinate Systems

When you transform an object, you do not just transform the object, you transform coordinate space in which that object exists. By default, a transform is centered at the origin of the target object’s coordinate system: (0,0). The only exception is TranslateTransform; a TranslateTransform has no center properties to set because the translation effect is the same regardless of where it is centered.

The following example uses a RotateTransform to rotate a Rectangle element, a type of FrameworkElement, by 45 degrees about its default center, (0, 0). The following illustration shows the effect of the rotation.

A Rectangle element rotated 45 degrees about the point (0,0)

By default, the element rotates about its upper-left corner, (0, 0). The RotateTransform, ScaleTransform, and SkewTransform classes provide CenterX and CenterY properties that enable you to specify the point at which the transform is applied.

The next example also uses a RotateTransform to rotate a Rectangle element by 45 degrees; however, this time the CenterX and CenterY properties are set so that the RotateTransform has a center of (25, 25). The following illustration shows the effect of the rotation.

A Rectangle element rotated 45 degrees about the point (25, 25)

Transforming a FrameworkElement

To apply transformations to a FrameworkElement, create a Transform and apply it to one of the two properties that the FrameworkElement class provides:

LayoutTransform – A transform that is applied before the layout pass. After the transform is applied, the layout system processes the transformed size and position of the element.

RenderTransform – A transform that modifies the appearance of the element but is applied after the layout pass is complete. By using the RenderTransform property instead of the LayoutTransform property, you can obtain performance benefits.

Which property should you use? Because of the performance benefits that it provides, use the RenderTransform property whenever possible, especially when you use animated Transform objects. Use the LayoutTransform property when scaling, rotating, or skewing and you need the parent of the element to adjust to the transformed size of the element. Note that, when they are used with the LayoutTransform property, TranslateTransform objects appear to have no effect on elements. That is because the layout system returns the translated element to its original position as part of its processing.

For additional information about layout in Windows Presentation Foundation (WPF), see Layout overview.

Example: Rotate a FrameworkElement 45 Degrees

The following example uses a RotateTransform to rotate a button clockwise by 45 degrees. The button is contained in a StackPanel that has two other buttons.

By default, a RotateTransform rotates about the point (0, 0). Because the example does not specify a center value, the button rotates about the point (0, 0), which is its upper-left corner. The RotateTransform is applied to the RenderTransform property. The following illustration shows the result of the transformation.

Clockwise rotation 45 degrees from upper-left corner

The next example also uses a RotateTransform to rotate a button 45 degrees clockwise, but it also sets the RenderTransformOrigin of the button to (0.5, 0.5). The value of the RenderTransformOrigin property is relative to the size of the button. As a result, the rotation is applied to the center of the button, instead of its upper-left corner. The following illustration shows the result of the transformation.

Clockwise rotation 45 degrees around center

The following example uses the LayoutTransform property instead of the RenderTransform property to rotate the button. This causes the transformation to affect the layout of the button, which triggers a full pass by the layout system. As a result, the button is rotated and then repositioned because its size has changed. The following illustration shows the result of the transformation.

LayoutTransform used to rotate the button

Animating Transformations

Because they inherit from the Animatable class, the Transform classes can be animated. To animate a Transform, apply an animation of a compatible type to the property you want to animate.

The following example uses a Storyboard and a DoubleAnimation with a RotateTransform to make a Button spin in place when it is clicked.

For the complete sample, see 2D Transforms Sample. For more information about animations, see the Animation Overview.

Freezable Features

Because it inherits from the Freezable class, the Transform class provide several special features: Transform objects can be declared as resources, shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. For more information about the different features that are provided by Freezable objects, see the Freezable Objects Overview.

Источник