Flipping an UI element

What happens when you flip an UI element?

The following button has been flipped horizontally.

        <Button Height="50" Width="100" VerticalAlignment="Bottom">

            <Button.RenderTransform>

                <ScaleTransform ScaleX="-1"></ScaleTransform>

            </Button.RenderTransform> Flipped Button

        </Button>

The button was flipped, but it was also moved. That's because the button was flipped from its top left corner. To flip the button in place, you want to apply the ScaleTransform to its center, not its corner. An easy way to apply the ScaleTransform to the buttons center is to set the button's RenderTransformOrigin property to 0.5, 0.5.

       <Button RenderTransformOrigin=".5, .5" Height="50" Width="100" VerticalAlignment="Bottom">

            <Button.RenderTransform>

                <ScaleTransform ScaleX="-1"></ScaleTransform>

            </Button.RenderTransform> Flipped Button

        </Button>

To flip the button vertically, set the ScaleTransform object's ScaleY property.

        <Button RenderTransformOrigin=".5, .5" Height="50" Width="100" VerticalAlignment="Bottom">
            <Button.RenderTransform>
                <ScaleTransform ScaleY="-1"></ScaleTransform>
            </Button.RenderTransform> Flipped Button
        </Button>