TextBlock Text being truncated after rotating 90 degrees

I have a TextBlock that I want to display vertically in a user control that is 30px wide. The TextBlock control has been rotated 90° using a RenderTransform.

The rotation seems to occur fine when I combine it with a 30px translation but the actual content of the TextBlock is truncated at what appears to be 30px.

It seems like the Text is being rendered at the 30px width of the parent and then transformed.

<UserControl x:Class="Xyz.Controls.FooControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="300" d:DesignWidth="30">

    <Grid x:Name="LayoutRoot">
        <Grid Name="barGrid" Background="#BFFFFFFF">
            <Ellipse Width="30" Height="30" Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Top" />
            <TextBlock Name="barText" Text="88.8°" 
                       Width="50" 
                       Height="30" 
                       Foreground="#FF3535C4">
                <TextBlock.RenderTransform> 
                    <CompositeTransform Rotation="90" TranslateX="30"/> 
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>

    </Grid>
</UserControl>

In this screenshot from Visual Studio the expected text is only showing 29px.

The same issue appears in Expression Blend and the Emulator.

I've figured out one way to get the intended layout but it seems like a bit of a hack.

By setting a negative left margin on the TextBlock (-20px) equal to the difference of the TextBox width (50px) and the parents width (30px) the full text is displayed vertically.

E.g.

<TextBlock Name="barText" Text="88.8°" 
                   Width="50" 
                   Height="30" 
                   Foreground="#FF3535C4"
                   Margin="0,0,-20,0">
            <TextBlock.RenderTransform> 
                <CompositeTransform Rotation="90" TranslateX="30"/> 
            </TextBlock.RenderTransform>
        </TextBlock>