# WPF - 2D Matrix Transformation

## Video WPF - 2D Matrix Transformation

Matrix (Matrix) is the method used to perform all kinds of geometric transformations in 2D or 3D space. In WPF, you can use the class MatrixTransform an object with Matrix to make any kind of transform that I showed in the previous post: WPF - 2D Transformation .

A Matrix object includes the property:

 Name Description M11 Gets or sets the value of the first row and first column of this Matrix structure. M12 Gets or sets the value of the first row and second column of this Matrix structure. M21 Gets or sets the value of the second row and first column of this Matrix structure. M22 Gets or sets the value of the second row and second column of this Matrix structure. OffsetX Gets or sets the value of the third row and first column of this Matrix structure. OffsetY Gets or sets the value of the third row and second column of this Matrix structure.

Position representatives of this property is illustrated as follows: For each transformation, you need to change the property of the Matrix on theoretical computer graphics. View: Transformation matrix (Wikipedia).

For example, you can perform two transformations rotated 90 degrees (rotate) and go 200 units shifted horizontally, vertically 10 units as follows:

 `< ``Image ` `Source ``= ``"baby-girl.jpg" ` `Name ``= ``"image1" ``>``    ``< ``Image.RenderTransform ``>``        ``< ``MatrixTransform ``>``            ``< ``MatrixTransform.Matrix ``>``                ``< ``Matrix ` `M11 ``= ``"0" ` `M12 ``= ``"1" ` `M21 ``= ``"-1" ` `M22 ``= ``"0" ` `OffsetX ``= ``"200" ` `OffsetY ``= ``"10" ``/>``            ````        ````    ````` However, instead of having to remember and calculate the value of each element in the matrix, the representative structure of .NET Matrix provides methods for each type of conversion. Considering the purpose, the methods are divided into two categories:

- The matrix processing method:

 Method Description Append Appends the rõ Matrix Matrix structure to this structure Equals Determines Whether the two have the same structures rõ Matrix values Invert Inverts this Matrix structure Multiply Multiplies a Matrix structure by another Matrix structure Prepend Prepends the rõ Matrix Onto this structure Matrix structure SetIdentity Changes this Matrix structure Into an identity matrix

- The method used to create a matrix for converting geometry:

 Method Description Rotate Applies a rotation angle of the rõ about the origin of the Matrix structure RotateAt Rotates the matrix about the rõ point Scale Appends the rõ scale vector to the Matrix structure. ScaleAt Scales the Matrix by the rõ amount about the rõ point Skew Appends a skew to the Matrix structure Translate Appends a translation to the Matrix structure

Would be more convenient if you use these methods in the code-behind to transform instead of XAML. Therefore the content behind will mainly focus on the introduction, through a simple example for you to see the behavior of the method.

First you create a WPF project named MatrixTransformation. Then edit the corresponding file with the following content:

MainWindow.xaml:

 `< ``Window ` `x: Class ``= ``"MatrixTransformation.MainWindow"``        ``xmlns ``= ``" http://schemas.microsoft.com/winfx/2006/xaml/presentation "``        ``xmlns: x ``= ``" http://schemas.microsoft.com/winfx/2006/xaml "``        ``Title ``= ``"MatrixTransformation Demo" ` `Height ``= ``"350" ` `Width ``= ``"525" ``>``    ``< ``Window.Resources ``>``        ``< ``Style ` `TargetType ``= ``"Image" ``>``            ``< ``Setter ` `Property ``= ``"Width" ` `Value ``= ``"200" ``/>``            ``< ``Setter ` `Property ``= ``"Height" ` `Value ``= ``"200" ` `/>``            ``< ``Setter ` `Property ``= ``"Stretch" ` `Value ``= ``"Fill" ``/>``            ``< ``Setter ` `Property ``= ``"Effect" ``>``                ``< ``Setter.Value ``>``                    ``< ``DropShadowEffect ` `Color ``= ``"Black" ` `Direction ``= ``"-50" ` `ShadowDepth ``= ``"10" ` `Opacity ``= ``"0.5" ``/>``                ````            ````        ````        ``< ``Style ` `TargetType ``= ``"Button" ``>``            ``< ``Setter ` `Property ``= ``"Margin" ` `Value ``= ``"5" ``/>``            ``< ``Setter ` `Property ``= ``"Padding" ` `Value ``= ``"5" ``/>``        ````    ````    ``< ``DockPanel ``>``        ``< ``StackPanel ` `DockPanel.Dock ``= ``"Left" ` `Width ``= ``"200" ``>``            ``< ``Button ` `Content ``= ``"Reset" ` `Click ``= ``"ResetButton_Click" ``/>``            ``< ``Button ` `Content ``= ``"Translate" ` `Click ``= ``"TranslateButton_Click" ``/>``            ``< ``Button ` `Content ``= ``"Rotate" ` `Click ``= ``"RotateButton_Click" ``/>``            ``< ``Button ` `Content ``= ``"Scale" ` `Click ``= ``"ScaleButton_Click" ``/>``            ``< ``Button ` `Content ``= ``"Skew" ` `Click ``= ``"SkewButton_Click" ``/>``            ``< ``Button ` `Content ``= ``"Invert" ` `Click ``= ``"InvertButton_Click" ``/>``        ````            ``< ``Image ` `Source ``= ``"baby-girl.jpg" ` `Name ``= ``"image1" ``/>``    `````

MainWindow.xaml.cs:

 `using ` `System;``using ` `System.Windows;``using ` `System.Windows.Controls;``using ` `System.Windows.Media;` `namespace ` `MatrixTransformation``{``    ``///`` ``/// Interaction logic for MainWindow.xaml`` ``/// ``    ``public ` `partial ` `class ` `MainWindow: Window``    ``{``        ``_matrix Matrix = ``new ` `Matrix ();``        ``public ` `MainWindow ()``        ``{``            ``InitializeComponent ();` `            ``this ``.DataContext = _matrix;``        ``}``        ``private ` `void ` `ResetButton_Click ( ``object ` `sender, RoutedEventArgs e)``        ``{``            ``_matrix = ``new ` `Matrix ();``            ``image1.RenderTransform = ``new ` `MatrixTransform (_matrix);``        ``}``        ``private ` `void ` `TranslateButton_Click ( ``object ` `sender, RoutedEventArgs e)``        ``{``            ``_matrix.Translate (100, -50);``            ``image1.RenderTransform = ``new ` `MatrixTransform (_matrix);``        ``}``        ``private ` `void ` `RotateButton_Click ( ``object ` `sender, RoutedEventArgs e)``        ``{``            ``_matrix.Rotate (45);``            ``image1.RenderTransform = ``new ` `MatrixTransform (_matrix);``        ``}``        ``private ` `void ` `ScaleButton_Click ( ``object ` `sender, RoutedEventArgs e)``        ``{``            ``_matrix.Scale (1.2, 1.2); ``// 120%``            ``image1.RenderTransform = ``new ` `MatrixTransform (_matrix);``        ``}``        ``private ` `void ` `SkewButton_Click ( ``object ` `sender, RoutedEventArgs e)``        ``{``            ``_matrix.Skew (10, 10);``            ``image1.RenderTransform = ``new ` `MatrixTransform (_matrix);``        ``}``        ``private ` `void ` `InvertButton_Click ( ``object ` `sender, RoutedEventArgs e)``        ``{``            ``_matrix.Invert ();``            ``image1.RenderTransform = ``new ` `MatrixTransform (_matrix);``        ``}``    ``}``}`

Illustration:

Related article: