This is directly related to my previous post. I mentioned that I was using RenderTransform to turn some controls sideways. But when I did this is I had to readjust the margins to keep it on the edge of the screen. This works fine for one control I guess, well maybe, but I was rotating more than one control and there needed to be controls next to the controls I was rotating. If I turned a really wide control and a control that wasn’t so wide then there would be a gap between the adjacent controls since the original dimensions would remain.

 

I then remembered glancing over a transform that would rotate the controls and cause the adjacent controls to respect the boundaries of the rotated control. Instead of using RenderTransform I used LayoutTransform. To explain the difference, if I have two buttons on a page and the height of both is 30 and the width is 100 and I rotate the button on top, the button are in a vertically oriented stack panel by the way. If I used RenderTransform the top button 90 degrees the bottom button will still be where it normally would be but the top button will be under of the left side of the button. But if I used LayoutTransform the new width and height are respected by the other controls.

 

If you make and window like the one below you will see the difference.

 

<Window x:Class="RotateTransformTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <StackPanel Orientation="Horizontal">
        <StackPanel>
        <Button RenderTransformOrigin="0,0" Margin="20,0,0,0" Width="100">
            <Button.RenderTransform>
                <RotateTransform Angle="45" />
            </Button.RenderTransform>
            Button 1
        </Button>
        <Button Width="100">Button 2</Button>
        </StackPanel>
        <StackPanel>
            <Button Width="100">
                <Button.LayoutTransform>
                    <RotateTransform Angle="45" />
                </Button.LayoutTransform>
                Button 1
            </Button>
            <Button Width="100">Button 2</Button>
        </StackPanel>
    </StackPanel>
</Window>