WPF Rotate an Image and align it

问题

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 :

But after the rotation :

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.

回答1:

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>

回答2:

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!

来源：https://stackoverflow.com/questions/30908996/wpf-rotate-an-image-and-align-it

标签

wpf

xaml

rotation

rendertransform