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.

Take a look at [TransformedBitmap](https://msdn.microsoft.com/en-us/library/system.windows.media.imaging.transformedbitmap.aspx). — Clemens, Jun 18 '15 at 07:55

score 4 · Accepted Answer · answered Jun 18 '15 at 07:50

4

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>

answered Jun 18 '15 at 07:50

Novitchi S

3,711
1
31
44

1

Please note that you don't need two ScaleTransforms. You can bind both ScaleX and ScaleY of a single ScaleTransform. – Clemens Jun 18 '15 at 07:56
Unfortunately, this solution doesn't seem to be relevant for UWP apps. Do you have any idea how to make it work properly? You can see more details in my question here: https://stackoverflow.com/q/53176985/997940 – Yoav Feuerstein Nov 06 '18 at 17:31

score -1 · Answer 2 · answered Jun 18 '15 at 07:37

-1

I suggest you to use CompositeTransform instead of RotateTransform and ScaleTransform. Then you can call Rotate and TranslateX/TranslateY inside of the CompositeTransform tag to move your object.

In your code dimensions was changed because of ScaleX/ScaleY!

answered Jun 18 '15 at 07:37

Mirko Bellabarba

562
2
13

1

Unfortunately, CompositeTransform is not available in WPF : http://stackoverflow.com/questions/5201675/is-compositetransform-used-only-in-silverlight – Titouan56 Jun 18 '15 at 07:43
Oh ok, sorry! Did you tried the TransformGroup then? – Mirko Bellabarba Jun 18 '15 at 07:52
no problem :) Novitchi S answer has solved this issue – Titouan56 Jun 18 '15 at 07:58

WPF Rotate an Image and align it

2 Answers2

Linked

Related