windows-phone-7 - How to flip a textblock

Question

How to flip a textBlock that already rotate to 90 degree?

Rotate is not same as flip. Hope you can help the following code.

RotateTransform transform = new RotateTransform();

 transform.Angle = 90.0;

txtBlock.RenderTransform = transform;   

from here, I want to flip

Answer 1

You can probably use ScaleTransform, something like:

var scaleTransform = new ScaleTransform() { ScaleX = -1 };

You can change ScaleX with ScaleY to switch axes, depending on your needs.

Answer 2

You can use an additional ScaleTransform and then animate this transform if you want a smooth flipping animation.

      <Storyboard x:Key="Storyboard_Flip">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                       Storyboard.TargetName="front"
                                       Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
          <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="0" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
                                       Storyboard.TargetName="back"
                                       Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
          <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1" />
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>

And here's the reverse flip animation.

      <Storyboard x:Key="Storyboard_Reverse">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                       Storyboard.TargetName="back"
                                       Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
          <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="0" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
                                       Storyboard.TargetName="front"
                                       Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
          <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1" />
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>

Answer 3

If you want something in xaml, then try this:

<TextBlock Height="45" HorizontalAlignment="Left" Margin="41,137,0,0" Name="textBlock1" Text="This is sample text" VerticalAlignment="Top" Width="296" RenderTransformOrigin="0.5,0.5" >
            <TextBlock.RenderTransform>
                <CompositeTransform ScaleX="-1"/>
            </TextBlock.RenderTransform>
</TextBlock>

Flip in y direction needs you to set the composite transform ScaleY="-1"