#804 – Specifying a MatrixTransform as a Simple String

You can specify an arbitrary transform to apply to an element by using a MatrixTransform element.  Below is an example of the XAML used to do this, showing the full logical tree.

        <Label Background="LightCoral" Content="The Earth" Margin="5"
               HorizontalAlignment="Center">
            <Label.LayoutTransform>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
                        <Matrix M11="1.3" M12="0.1"
                                M21="0.1" M22="1.2"
                                OffsetX="5.0" OffsetY="6.0"/>
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Label.LayoutTransform>
        </Label>

There’s a much more concise way of specifying this transform, however.  You can take advantage of a type converter provided for the LayoutTransform or RenderTransform properties, allowing you to specify the Matrix element for the transform as a simple string.  The string has the format M11,M12,M21,M22,OffsetX,OffsetY.  So we can simplify the above XAML to the following:

        <Label Background="LightCoral" Content="The Earth" Margin="5"
               HorizontalAlignment="Center"
               LayoutTransform="1.3,0.1,0.1,1.2,5.0,6.0"/>
Advertisements

#803 – Specifying an Arbitrary Transform with a MatrixTransform

You can transform user interface elements using the ScaleTransformRotateTransformTranslateTransform and SkewTransform objects.  Each of these transforms maps to a 3 x 3 transformation matrix that uses homogeneous coordinates to transform the element.

You can also specify any arbitrary transformation matrix directly, using the Matrix property of a MatrixTransform object.  The Matrix property is set to a Matrix struct, containing the following properties: M11, M12, M21, M22, OffsetX, and OffsetY.  This results in the transformation matrix:

803-001

        <Label Background="LightCoral" Content="The Earth" Margin="5" HorizontalAlignment="Center">
            <Label.LayoutTransform>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
                        <Matrix M11="1.3" M12="0.1" M21="0.1" M22="1.2" OffsetX="5.0" OffsetY="6.0"/>
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Label.LayoutTransform>
        </Label>

803-002