Question

I recently learned how to rotate a BitmapImage using the ‘TransformedBitmap’ and ‘RotateTransformed’ classes. Now I am able to perform clockwise rotations on my images. But how do I FLIP an image? I can’t find the class(es) to perform horizontal and vertical flips of a BitmapImage. Please help me figure out how to do it. For instance, if my image was a drawing that looked like a ‘d’, then a vertical flip would result in something like a ‘q’, and a horizontal flip would result in something like a ‘b’.

Answer 1

Use a ScaleTransform with a ScaleX of -1 for horizontal and ScaleY of -1 for vertical flipping, applied to the image’s RenderTransform property. Using RenderTransformOrigin="0.5,0.5" on the image makes sure your image gets flipped around its center, so you won’t have to apply an additional TranslateTransform to move it into place:

<Image Source="a.jpg" Padding="5" RenderTransformOrigin="0.5,0.5">
  <Image.RenderTransform>
    <ScaleTransform ScaleX="-1"/>
  </Image.RenderTransform>
</Image>

for horizontal flipping and

<Image Source="a.jpg" Padding="5" RenderTransformOrigin="0.5,0.5">
  <Image.RenderTransform>
    <ScaleTransform ScaleY="-1"/>
  </Image.RenderTransform>
</Image>

for vertical.

If you want to do it in code-behind, in C# it should look something like this:

img.RenderTransformOrigin = new Point(0.5,0.5);
ScaleTransform flipTrans = new ScaleTransform();
flipTrans.ScaleX = -1;
//flipTrans.ScaleY = -1;
img.RenderTransform = flipTrans;