WPF旋转图像并对齐它

Question

我想要旋转源的图像组件：

<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>

我从代码中设置了ImageTarget的来源。

在转换之前（RenderTransformOrigin和RotateTransform）我的窗口就像：

但轮换后：

因此，正如您所看到的，宽度和高度已经改变。

所以我的问题是：

• 为什么尺寸发生了变化？
• 如何对齐左上角的旋转图像（与之前相同）？

由于

编辑：尺寸没有改变，我采用了不同尺寸的两个截图，stackoverflow自动调整尺寸。

Answer 1

问题是在布局传递后应用了变换。在计算布局之前，您应该使用LayoutTransform执行转换：

<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>

Answer 2

我建议您使用CompositeTransform代替RotateTransform和ScaleTransform。然后，您可以在Rotate标记内调用TranslateX和TranslateY / CompositeTransform来移动您的对象。

由于ScaleX / ScaleY！

，代码维度已更改