Why is my text cropped?

Answer 1

It appears as though the text is inheriting the <border> transformations before the rotation transform has a chance to rotate it. This means that the text first gets cropped to 20 units wide, and then gets rotated -90 degrees.

While I don't have an actual solution, I can confirm that its order of transformations that's causing the issue.

Answer 2

Try using LayoutTransform

    <Border
      Name="BranchBorder"
      CornerRadius="0"
      HorizontalAlignment="Left"
      Width="20">
      <TextBlock
         Name="Branch"
         FontSize="14"
        FontWeight="Bold"
        VerticalAlignment="Center">
       <TextBlock.LayoutTransform>
         <RotateTransform
            Angle="-90"/>
       </TextBlock.LayoutTransform>
        Branch
      </TextBlock>
    </Border>

There are bunch of blog entries describing the difference between RenderTransform and LayoutTransform and here is a cool visual demo from Charles Petzold RenderTransformVersusLayoutTransform.xaml