TextBlock 90도 회전 후 텍스트 잘림

Question

30px 너비의 사용자 정의 컨트롤에 세로로 표시하려는 TextBlock이 있습니다. TextBlock 컨트롤은 RenderTransform을 사용하여 90 ° 회전되었습니다.

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의 스크린 샷에서 예상되는 텍스트는 29px로만 표시됩니다.

동일한 문제가 Expression Blend와 에뮬레이터에 나타납니다.

Answer 1

의도 한 레이아웃을 얻는 한 가지 방법을 알아 냈지만 해킹 비트처럼 보입니다.

텍스트 상자 너비 (50px)와 부모 너비 (30px)의 차이만큼 텍스트 블록 (-20px)의 왼쪽 여백을 음수로 설정하면 전체 텍스트가 세로로 표시됩니다.

예.

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