WPF Rotate an Image and align it

Question

I've an Image component where I want to rotate the source :

<Image Name="ImageTarget" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Uniform" RenderTransformOrigin=".5,.5">
    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="{Binding Main.BindedViewMode, Converter={StaticResource ImageSizeConverter}}" />
            <ScaleTransform ScaleY="{Binding Main.BindedViewMode, Converter={StaticResource ImageSizeConverter}}" />
            <RotateTransform Angle="-90" />
        </TransformGroup>
    </Image.RenderTransform>
</Image>

I set the source of ImageTarget from the code.

Before the transformation (RenderTransformOrigin and RotateTransform) my window was like :

enter image description here

But after the rotation :

enter image description here

So, as you can see, the Width and Height has changed.

So my questions are:

Why the size has changed ?
How to align the rotated image on the top left corner (same as before) ?

Thanks

Edit: Size hasn't changed, I have taken the two different screenshots with a different size, and stackoverflow automatically resize them.

Novitchi S Novitchi S · Accepted Answer · 2015-06-18T07:50:35

The problem is that the Transforms were applied after the layout pass. You should use a LayoutTransform to perform the transformation before the layout is calculated:

<Image Name="ImageTarget" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Uniform" RenderTransformOrigin=".5,.5">
<Image.LayoutTransform>
    <TransformGroup>
        <ScaleTransform ScaleX="{Binding Main.BindedViewMode, Converter={StaticResource ImageSizeConverter}}" />
        <ScaleTransform ScaleY="{Binding Main.BindedViewMode, Converter={StaticResource ImageSizeConverter}}" />
        <RotateTransform Angle="-90" />
    </TransformGroup>
</Image.LayoutTransform>

WPF Rotate an Image and align it

2 Answers