(XAML Layout in Depth) Transformations and Projections

Copyright

이 모든 내용은 Pluralsight에 Thomas Claudius Huber가 올린 'XAML Layout in Depth'라는 강의의 네번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-layout-in-depth/table-of-contents).

Content

1. Layout Basics 1

2. Layout Basics 2

3. Layout properties of Element

4. Panels

5. Transformations and Projections

6. Advanced Topics

Outline

Transformations

Get the position of an element

Projections

Transformations

Defines how to map points from one coordinate space into another one

A transformation can be used on an element to - rotate it, scale it,  skew it, translate it(move it)

Transformation Classes

RotateTransform class

ScaleTransform class

SkewTransform class

TranslateTransform class

MatrixTransform class

All transformations in the two-dimensional space can be described by a 3x3 matrix

While the Rotate/Scale/Skew/TranslateTransform class is high-level classes, the MatrixTransform class is low-level. It allows you to change the 3x3 matrix directly to rotate, scale, skew, translate an element.

TransformGroup class (to combine transformations)

CompositeTransform class (not in WPF)

Single transform class that can rotate, scale, skew, and translate an element

These all Transform classes inherit from the Transform class. The Transform class is the base class for two-dimensional transformations.

Also Transform class inherits from GeneralTransform. The GeneralTransform contains the base logic for transformations between points and rectangles.

All the Transform classes are DependencyObjects and their properties have been implemented as Dependency properties. That means you can use the properties in a style, you can use them as a target for a data binding, or you can event animate them.

LayoutTransform vs RenderTransform

On a FrameworkElement, there are LayoutTransform and RenderTransform properties. Both are of type Transform.

A Transform can be assigned to an element's...

1. LayoutTransform property (WPF only)

The Transform that assigned to the LayoutTransform property is applied before the layout process. 따라서 layout에 영향을 미치므로, 예를들어 StackPanel의 child중 하나를 rotate시켰다면 그 child는 더 많은 Heigth/Width를 차지한 채 layout에 표시된다DesiredSize is bigger). So the layout process runs whenever you change the transform.

2. RenderTransform property (all XAML-based frameworks)

The Transform that assigned to the RenderTransform property is applied after the layout process. 따라서 layout에 영향을 미치지 않으므로, 에를들어 StackPanel의 child중 하나를 rotate시켰다면 그 child만 회전하고 나머지 child의 위치에 영향을 주지 않는다. Whenever you change the transformation that has been assigned to the RenderTransform property, only a new rendering will occur, but no layout process will be executed. So when you plan to change the Transform object at runtime, you should assign it to the RenderTransform property.

The Origin of a RenderTransform

Layout process가 RenderTransform과 무관하기 떄문에 Origin을 필요로 한다.

Origin is defined in the RenderTransformOrigin property(Type Point) that is defined in the UIElement class.

Default value is 0, 0. Specified origin is relative to the size of an element (center of element 0.5, 0.5, bottom right corner 1, 1)

Rotate, Scale and Skew

RotateTransform : Angle property to define clockwise rotation (default 0)

ScaleTransform : Properties ScaleX/ScaleY to define scale (both default value 1 == scale is by default 100%)

SkewTransform : Properties AngleX/AngleY to define skew angle (defualt 0)

All three Transforms have the Properties CenterX and CenterY (default 0) : Use them to define an absolute (pixel-based) origin

Element에 RenderTransformOrigin property를 지정하는 대신에, you could also define the origin by setting the properties CenterX and CenterY on your Transform object. When you group multiple transforms with the TransformGroup, the properties CenterX and CenterY allow you to define a different origin for each transform in that TransformGroup.

Get the Position of an Element

WinRT eg. 

//Call TransformToVisual method on green element and pass orange element as parameter, then returns GeneralTransform object

//GeneralTransform contains base logic for transformations between points and rectangles.

GeneralTransform generalTransform = green.TransformToVisual(orange);

//Call TransformPoint method on the GeneralTransform object with a new Point that contains default 0 for X and Y

//then it returns a point that contains Horizontal/Vertical distance between default value and generalTransform 

Point point = generalTransform.TransformPoint(new Point());

//In WPF Transform method instead of TransformPoint method

WPF (alternative)

Point pint = green.TranslatePoint(new Point(), orange);

Translate an Element

TranslateTransform class has the properties X and Y to define the translation(move)

The TranslateTransform has no effect when it is assigned to the LayoutTransform property of an element, because the transformation occurs before the layout process and the layout process arranges element and gives it a final position. So Assign it to the RenderTransform property

eg.    private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)

        {

            var element = e.OriginalSource as FrameworkElement;

            if (element != null)

            {

//Get the position of target (where the rectangle will positioned)

                var generalTransform = target.TransformToVisual(element);

                var point = generalTransform.TransformPoint(new Point());

//Set TranslateTransform to element's RenderTransform

                var translateTransform = element.RenderTransform as TranslateTransform;

                if (translateTransform == null)

                {

                    translateTransform = new TranslateTransform();

                    element.RenderTransform = translateTransform;

                }

//Translate(move) the element to the position of the target

//Here can be replaced to an animation

                translateTransform.X = point.X;

                translateTransform.Y = point.Y;

            }

        }

MatrixTransform

Low-level class to create custom 2D-transformations

Matrix-Property contains the 3x3 affine transformation matrix

The Matrix can be modifed to rotate scale, skew and translate an element (need linear algebra)

Combine Transformations

Instead of a MatrixTransform, you can also use the TransformGroup to combine transformations(much simpler).

TransformGroup has a Children property of type TransformCollection and inherits from Transform, can be assign it either to the RenderTransform or to the LayoutTransform property of an element.

eg. <Rectangle.RenderTransform>

           <TransformGroup>

               <RotateTransform Angle="45" />

               <ScaleTransform ScaleX="2" ScaleY="2"/>

           </TransformGroup>

     </Rectangle.RenderTransform>

There is another class to combine multiple transformations (not available in WPF) : CompositeTransform

CompositeTransform contains Rotation, ScaleX/ScaleY, SkewX/SkewY, TranslateX/TranslateY properties

Projections (Not available in WPF)

A projection is a perspective transformation of an element

The perspective transformation is a 3D-like effect that you can apply to your element.

In Silverlight, this Projection class is abstract.

In the WinRT, the constructor is protected.

you can assign PlanProjection or Matrix3DProjection to the Projection property of any UIElement.

PlaneProjection

To rotate an element around the axis X, Y and Z

It contains the properties RotationX, RotationY, and RotationZ (angle in degrees, default 0) and CenterOfRotationX, CenterOfRotationY, CenterOfRoationZ properties define the center of rotation.

CenterOfRotationX/Y contain a relative value (default 0.5)

CenterOfRoataionZ contain a absolute value in pixels (default 0, <0 means center of rotation is behind the element, >0 front of it)

Translate your element with offsets

LocalOffsetX/Y/Z : Translation before rotation

GrobalOffsetX/Y/Z : Translation after rotation (just move the center of rotation)

Matrix3DProjection

Low-level class to create custom 3D-transformations

ProjectionMatrix property contains the 4x4 transform matrix (Matrix3D) used for the projection

Summary (생략)

출처

이 모든 내용은 Pluralsight에 Thomas Claudius Huber가 올린 'XAML Layout in Depth'라는 강의의 네번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-layout-in-depth/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.