WPF: how to write text in a different direction?

Question

I need to write text in the orientation specified for the image below. The fact is that I saw some examples around here by using a textblock and rotating the angle of the control using "RenderTransform", but this is not what I really need. I tried to do it using an image but it doesn't fit very well... so I really don't know how to solve it. If you look at the image beside you can see that the text is written from bottom to top and the line below the text is in the right of the screen. This is the screen that I need to develop:

I tried by rotating the textblock, but the only way that it works for me was wrapping the text, but this is just the "closest" solution that I found. Also, as you can see, I need to set a border for the textblock.

Anyway, I hope you can help me because any example around fits with my problem.

Gipsy

using "RenderTransform", but this is not what I really need that's how it's done. You can stop looking now. – Orta

Answer 1

In order to rotate your text at 90 degrees, I believe that you will need to use the LayoutTransform instead of the RenderTransform:

<TextBlock Text="FootRoller" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock.LayoutTransform>
        <RotateTransform Angle="-90"/>
    </TextBlock.LayoutTransform>
</TextBlock>

The difference is when the transform will be applied. Using the LayoutTransform, the text will be rotated before the layout pass and this will be important in your case. I imagine that using the RenderTransform will rotate your TextBlock, but as it does that after the layout pass, it would not show it all... this is because it was measured for size before it was rotated.

You can find out full details from the Transforms Overview page on MSDN. From the linked page:

LayoutTransform – A transform that is applied before the layout pass. After the transform is applied, the layout system processes the transformed size and position of the element.

RenderTransform – A transform that modifies the appearance of the element but is applied after the layout pass is complete. By using the RenderTransform property instead of the LayoutTransform property, you can obtain performance benefits.

Streamway

Doh, I should have added that you could literally just change RenderTransform to LayoutTransform but the explanation is good for sure. – Mccauley

Did you mean change RenderTransform to LayoutTransform? – Streamway

might refresh your page ;) – Mccauley

Answer 2

They're all right. RenderTransform should be all you need. Like;

<TextBlock Text="FootRoller" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock.RenderTransform>
        <CompositeTransform Rotation="-90"/>
    </TextBlock.RenderTransform>
</TextBlock>

P.S. - You can literally just change RenderTransform to LayoutTransform which Sheridan has provided an explanation for in his answer.

Mccauley

Answer 3

If RenderTransform didn't work, take a look at LayoutTransform. You didn't tell us why RenderTransform didn't work but it's usually a safe bet that LayoutTransform will solve whatever problem it gave you.

Incapacity