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

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>