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的源代码。

在转换（RenderTransformorMorigin和RotateTransform）之前，我的窗口是这样的：

但在旋转之后：

所以，正如你所看到的，宽度和高度都发生了变化。

所以我的问题是：

• 为什么大小发生了变化？
• 如何将旋转后的图像对准左上角（与之前相同）？

谢谢

编辑：大小没有改变，我用不同的大小拍摄了两个不同的屏幕截图，stackoverflow会自动调整它们的大小。

Answer 1

我建议您使用复合翻译，而不是旋转翻译和缩放翻译。然后，您可以在复合Transform标记内调用旋转和平移来移动对象。

在您的代码中，由于ScaleX/ScaleY，维度发生了更改！

Answer 2

问题是转换是在布局传递之后应用的。您应该使用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>