how to flip Image in wpf

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; 

Answer 2

To give your flip a little more "depth" so that is looks more like a true flip you probably want to do a skew transform with a smaller scale transform.

You would want to skew the object about 20 degrees to make it look as if it is flipping in 3D. This is a poor mans 3D flip. You can accomplish a true 3D flip in WPF but that takes a bit more work.

This will give you the animation that looks cleaner, then you can toggle visibility on two different panels to give the impression of a front and a backside to your element.

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">   <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />   <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.3" />   <SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="0.6" />                                 <SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.8" />   <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />   <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" /> </DoubleAnimationUsingKeyFrames>  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">   <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />   <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.9" />   <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />   <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)">   <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />   <SplineDoubleKeyFrame KeyTime="00:00:00.06" Value="-10" />   <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="-20" />   <SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="20" />   <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="0" /> </DoubleAnimationUsingKeyFrames>