WPF clipping layout transform

Question

I'm seeing a rotation issue that I have demonstrated in the code below.

Whilst the TextBlock is being rendered correctly, the ContentControl is being clipped.

It looks like it is clipping it to the width of the columndefinition and then applying the rotation?

I can get around the issue in the example by setting a width on the ContentControl, but in practise, I don't want to do that as I need it to automatically size to the width of its content.

 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackPanel>
        <TextBlock Text="Some long text">
            <TextBlock.LayoutTransform>
                <RotateTransform Angle="90" />
            </TextBlock.LayoutTransform>
        </TextBlock>

        <ContentControl>
            <ContentControl.LayoutTransform>
                <RotateTransform Angle="90" />
            </ContentControl.LayoutTransform>

            <Button Content="Some Long Text..." />
        </ContentControl>
    </StackPanel>

    <Button Content="Button"
            Grid.Column="1" />
</Grid>

Answer 1

The Button is clipped even if remove the RotateTransform from the ContentControl, isn't it?

It's because of the StackPanel. Replace it with a Panel that doesn't measures its children with an infinite height or width:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Text="Some long text">
        <TextBlock.LayoutTransform>
            <RotateTransform Angle="90" />
        </TextBlock.LayoutTransform>
    </TextBlock>

    <ContentControl Grid.Row="1">
        <ContentControl.LayoutTransform>
            <RotateTransform Angle="90" />
        </ContentControl.LayoutTransform>

        <Button Content="Some Long Text..." />
    </ContentControl>

    <Button Content="Button"
            Grid.Column="1" Grid.RowSpan="2" />
</Grid>