Question

How do you rotate one item in a StackPanel or other container and still keep the alignment?

What I’m trying to do is have a label with the name of the item with the text orientated up and down and a result value that will be unrotated directly underneath of it. The reason for this is that the name of items is quite long but the result is just a 1 or 2 digit number so I can squeeze more data on the screen if the labels are up and down.

It seems that items pivot around their original position (top left?) not about their center so an item that was centered below the items original position ends up off to the side but the difference between height and width of the rotated item.

Here is the code I’ve tried so far:

<StackPanel Orientation="Vertical" Margin="0, 0, 0, 0">
        <Label Name="x" Content="{Binding Path=SummarizedTestName}" Height="50" HorizontalAlignment="Center" FontSize="14">
            <Label.RenderTransform>
                <RotateTransform Angle="-90" />
            </Label.RenderTransform>
        </Label>
        <Label Content="{Binding Path=Count}" Width="50" HorizontalAlignment="Center" FontSize="14" />
</StackPanel>

I’ve thought of using a TransformGroup but the problem is that the length of the SummarizedTestName string isn’t known at compile time (being pulled using Entity Framework from a database). I’ve also tried variations of Horizontal and Vertical alignment but none of them seem to work nice because of the way that things rotate.

Answer 1

You might try using the LayoutTransform property instead of the RenderTransform. Since RenderTransform rotates the name label after the layout has been resolved, the count label is positioned as if the name label was still horizontal.

Using LayoutTransform would rotate the name label before the layout resolution and the count label should line up nicely.