CODEWITHSUNDEEP
c#wpfwindowsxaml
grizzly
grizzly

Reputation: 1156

Limit rotated TextBlock size

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:

Actual output

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

Desired output

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.

Upvotes: 0

Views: 166

Answers (2)

Damascus
Damascus

Reputation: 6641

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 =)

Upvotes: 2

dowhilefor
dowhilefor

Reputation: 11051

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>

Upvotes: 1

Related Questions