Flip a UIElement Horizontally or Vertically

How to: Flip a UIElement Horizontally or Vertically

 

This example shows how to use a ScaleTransform to flip a UIElement horizontally or vertically. In this example, a Button control (a type of UIElement) is flipped by applying a ScaleTransform to its RenderTransform property.

Example

The following illustration shows the button to flip.

A button with no transform

The UIElement to flip

The following shows the code that creates the button.

<Button Content="Flip me!" Padding="5">
</Button>

Example

To flip the button horizontally, create a ScaleTransform and set its ScaleX property to -1. Apply the ScaleTransform to the button's RenderTransform property.

<Button Content="Flip me!" Padding="5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>
A button flipped horizontally about (0,0)

The button after applying the ScaleTransform

Example

As you can see from the previous illustration, 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 Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>
A button flipped horizontally about its center

The button with a RenderTransformOrigin of 0.5, 0.5

Example

To flip the button vertically, set the ScaleTransform object's ScaleY property instead of its ScaleX property.

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleY="-1" />
  </Button.RenderTransform>
</Button>
A button flipped vertically about its center

The vertically flipped button

Show:
© 2016 Microsoft