#789 – How a Scale Transform Works

A 2D scale transform in WPF is accomplished by using a transformation matrix.  The transformation matrix is multiplied by another matrix representing a single 2D point to be transformed.  The resulting matrix describes the transformed point.  When scaling a user interface element, this transformation is done individually on each point to generate the set of points representing the transformed element.

The transformation operation for scaling looks like:

789-001

Where Sx and Sy represent the ScaleX and ScaleY properties of the ScaleTransform, respectively.

This leads to the equations:

789-002

#788 – Flipping an Element Using a Scale Transform

You can flip any GUI element, either horizontally or vertically, by using a scale transform.

To flip an element horizontally, you use a ScaleTransform with a ScaleX value of -1.0.  To flip an element vertically, you use a ScaleTransform with a ScaleY value of -1.0.

    <StackPanel Orientation="Vertical">
        <Label Content="Jane Austen" Background="Thistle"
               HorizontalAlignment="Center" FontSize="16" Margin="10"/>
        <Label Content="Jane Austen" Background="Thistle"
               HorizontalAlignment="Center" FontSize="16" Margin="10">
            <Label.LayoutTransform>
                <ScaleTransform ScaleX="-1.0"/>
            </Label.LayoutTransform>
        </Label>
        <Label Content="Jane Austen" Background="Thistle"
               HorizontalAlignment="Center" FontSize="16" Margin="10">
            <Label.LayoutTransform>
                <ScaleTransform ScaleY="-1.0"/>
            </Label.LayoutTransform>
        </Label>
    </StackPanel>

788-001