Limit rotated TextBlock size

Question

I am trying to limit the first column height to match the second one's after rotating the TextBlock.

I have the following XAML:

<Viewbox>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <TextBlock
            Grid.Column='1'
            Text='Ubuntu'
            FontFamily='Ubuntu'
            FontSize='36' />

        <TextBlock
            Grid.Column='0'
            Text='Linux'
            FontFamily='Ubuntu'
            FontSize='36'>
            <TextBlock.LayoutTransform>
                <RotateTransform
                    Angle='-90' />
            </TextBlock.LayoutTransform>
        </TextBlock>

    </Grid>
</Viewbox>

Which will render the following:

However, I'm trying to get this output, so that the height of the left column will adapt to that of the second:

Have you got any idea how to do that purely with declarative XAML? Ie. no binding to heights or code-behind. I also do not want to specify any margins of the controls.

Thanks.

Answer 1

Slight modifications in your code can give you what you want:

First: your updated code

<Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <TextBlock x:Name="UbuntuBox"
            Grid.Column='1'
            Text='Ubuntu'
            FontFamily='Ubuntu'
            FontSize='36' />

            <TextBlock Width="{Binding ElementName=UbuntuBox, Path=Height}"
            Grid.Column='0'
            Text='Linux'
            FontFamily='Ubuntu'
            >
            <TextBlock.LayoutTransform>
                <RotateTransform
                    Angle='-90' />
            </TextBlock.LayoutTransform>
            </TextBlock>

        </Grid>

Second: Explanations

• Your TextBlock displaying "Linux" has to be linked to the Ubuntu TextBlock . In this case, its Width must be the same as Ubuntu's Height , so I added the following: Width="{Binding ElementName=UbuntuBox, Path=Height}"
• You can't have a TextBlock with a 36 FontSize fitting this given width. Removing it will keep it to default, then you can play with it if you want

And that's all you need! No hardcoded added stuff there =)

Answer 2

This is the best i could come up with. The bad part is the hardcoded row definition, but because you already have the root grid inside a viewbox, its relative, so it shouldn't be a big problem.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="36"/>
    </Grid.RowDefinitions>
    <TextBlock
        Grid.Column='1'
        Text='Ubuntu'
        FontFamily='Ubuntu'
        FontSize='36' />

    <Viewbox Grid.Column='0'>
        <TextBlock
            Text='Linux'
            FontFamily='Ubuntu'
            FontSize='36'>
            <TextBlock.LayoutTransform>
                <RotateTransform
                    Angle='-90' />
            </TextBlock.LayoutTransform>
        </TextBlock>
    </Viewbox>
</Grid>