#788 – Flipping an Element Using a Scale Transform

April 1, 2013 2 Comments

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

Advertisement

Filed under Layout Tagged with , , ,

#297 – Create a Mirror Image of a Control or Image

May 11, 2011 Leave a comment

You can flip any image or control, creating a mirror image, by using a 2D scaling transformation.

A scaling transform is represented by an instance of the ScaleTransform class.  You use it to scale the visual representation of any image or control in the X or Y dimension (or both).

The ScaleX and ScaleY properties of the ScaleTransform represent the scaling factors in either dimension.  These values are normally positive, but we can use values less than zero to indicate that we also want the object flipped in the corresponding dimension.

In the example below, we scale an image to half (50%) its original size, and flip it in the X dimension.

	<StackPanel Orientation="Horizontal">
		<Image Source="NativeAmerican.jpg" Margin="10" Stretch="None"/>
		<Image Source="NativeAmerican.jpg" Margin="10" Stretch="None">
			<Image.LayoutTransform>
				<ScaleTransform ScaleX="-0.5" ScaleY="0.5"/>
			</Image.LayoutTransform>
		</Image>
	</StackPanel>

Filed under Controls Tagged with , , , , ,