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
You can use ScaleTransform with negative ScaleX
/ScaleY
:
<TextBlock Text="P">
<TextBlock.RenderTransform>
<ScaleTransform ScaleY="-1" ScaleX="-1" />
</TextBlock.RenderTransform>
</TextBlock>
A quick trick for horizontal (only) flipping btw is to set FlowDirection property to FlowDirection.RightToLeft. If the component is a container though, some children of it may interpret the property differently (custom logic)
<Image x:Name="SampleImage" Margin="0" RenderTransformOrigin="0.5,0.5" >
<Image.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
<SkewTransform AngleY="0" AngleX="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Image.LayoutTransform>
</Image>
Create an image component like this. And when its source is set, the image will flip from left to right.
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;
Interesting 3d flippable usercontrol: http://flipcontrol.codeplex.com/releases/view/22358
In your case you will have to display on both sides the same image.
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>