Raj
Raj

Reputation:

Why is my text cropped?

When i try to add a text block to a border element, i only see part of the text. I rotate the text after adding it to the border and that is causing the problem. Increasing the width of the border fixes this issue. But, my border needs to be only 20 units wide.

alt text http://img257.imageshack.us/img257/1702/textcrop.jpg

What am i missing here?

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

Upvotes: 3

Views: 730

Answers (2)

bendewey
bendewey

Reputation: 40235

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

Upvotes: 7

Soviut
Soviut

Reputation: 91545

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.

Upvotes: 0

Related Questions