Vertically rotated Textblock takes up entire width as if it were horizontal

Question

I've wrapped the TextBlock control in a border so I could see what's taking up space:

Here is the XAML:

<Border BorderBrush="Cyan" BorderThickness="3">
    <TextBlock Style="{StaticResource subtitle}" Text="{Binding Title}" >
        <TextBlock.RenderTransform>
            <RotateTransform Angle="90" />
        </TextBlock.RenderTransform>
    </TextBlock>
</Border>

The problem is that this is taking up much more room than I need it to, and if I set a static width to it, I get this:

Any suggestions?

Answer 1

<Setter Property="LayoutTransform"> 
    <Setter.Value> 
        <RotateTransform Angle="90" /> 
    </Setter.Value> 
</Setter> 

This happed because like in most Web Base Applications there is a series of events that get trigger / fired most of what we are use to seeing or dealing with happens in the Rendering Event.. by then the page has already been served up so to speak I am not 100% sure but I am really thinking that the LayoutTransform happens during pre-Rendering

Answer 2

I had the same problem while creating textblocks on runtime and rotating them. I solved it simply by setting

tb.Margin = .......
tb.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left;
tb.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Top;
RotateTransform rt = new RotateTransform();
rt.Angle = -40;
tb.RenderTransform = rt;

it seems as if you don't set them, the transform is doing its calcs on the centered text and adding width to position it where you wanted...