#801 – Creating a Mirror Image Using a RenderTransform

April 18, 2013 Leave a comment

You can flip an object horizontally, so that you get a mirror image, using a ScaleTransform with the ScaleX value of -1.  If you use a LayoutTransform, the object will be layed out as intended after doing the transformation.

You might, however, want to do a transform to get a mirror image only after laying everything out.  To do this, you use a RenderTransform.  You still set the ScaleX property to -1, but you also need to set the RenderTransformOrigin to be located in the middle of the object being transformed.

    <StackPanel RenderTransformOrigin="0.5,0.5">
        <StackPanel.RenderTransform>
            <ScaleTransform ScaleX="-1"/>
        </StackPanel.RenderTransform>

        <Label Content="Earthquake hits San Francisco!" Margin="5"
               FontSize="16" FontFamily="Constantia" />
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <DatePicker SelectedDate="4/18/1906"/>
            <Label Content="Horrible!" FontWeight="Bold"/>
        </StackPanel>
        <Button Content="Donate $$ Now" HorizontalAlignment="Center"
                Padding="10,5" Margin="15"/>
    </StackPanel>

801-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 , , , , ,