wpf - 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在计算布局之前使用 a 执行转换：

<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而不是RotateTransformand ScaleTransform。然后你可以在标签内调用Rotateand TranslateX/来移动你的对象。TranslateYCompositeTransform

在您的代码尺寸中，由于ScaleX/ ScaleY！