I want to make a set of buttons with 90 degree rotated text. I created the layout I wanted but found when I attached it to a button the layout clipped according to the button's (unrotated) layout. I haven't been able to figure out what's going on, but I created a simplified case without a button. Here's my XAML:

        <Border Height="100" Width="50" BorderThickness="1" BorderBrush="Black">
                <TextBlock>This is a test</TextBlock>
        </Border>

This produces a border with clipped text (as expected)

But if I rotate the text, resulting in this XAML:

        <Border Height="100" Width="50" BorderThickness="1" BorderBrush="Black">
            <TextBlock RenderTransformOrigin="0.5,0.5">
                <TextBlock.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </TextBlock.RenderTransform>This is a test</TextBlock>
        </Border>

the text still clips according to the ''width'' of the enclosing border, not the height.

I'm sure I could size the border to include the text and rotate the border instead, and likely I could do the same with the buttons I'm trying to create, but if I do I don't know that I'm not going to run into the same problem with whatever bounds the buttons, so I feel like I need to understand what I'm missing. Why would a rotated object be clipped as if it wasn't rotated?

CodePudding user response：

Set the LayoutTransform property, instead of RenderTransform:

<Border Height="100" Width="50" BorderThickness="1" BorderBrush="Black">
    <TextBlock Text="This is a test">
        <TextBlock.LayoutTransform>
            <RotateTransform Angle="90"/>
        </TextBlock.LayoutTransform>
    </TextBlock>
</Border>

If desired, also set HorizontalAlignment="Center" and VerticalAlignment="Center" on the TextBlock.