TextBlock Текст обрезается после поворота на 90 градусов

Question

У меня есть TextBlock, который я хочу отображать вертикально в пользовательском элементе управления шириной 30 пикселей. Элемент управления TextBlock был повернут на 90 ° с использованием RenderTransform.

Вращение, кажется, происходит нормально, когда я объединяю его с переводом 30px, но фактическое содержимое TextBlock усекается до 30px.

Кажется, что текст визуализируется с шириной 30px родительского элемента, а затем преобразуется.

<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>

На этом скриншоте из Visual Studio ожидаемый текст показывает только 29 пикселей.

Та же проблема возникает в Expression Blend и в эмуляторе.

Answer 1

Я нашел один способ получить намеченный макет, но это похоже на хак.

При установке отрицательного левого поля в TextBlock (-20px), равного разнице ширины TextBox (50px) и родительской ширины (30px), полный текст отображается вертикально.

* 1005 Е.Г. *

<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>