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）之前，我的 window 就像：

但轮换后:

因此，如您所见，宽度和高度已更改。

所以我的问题是：

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

谢谢

编辑：大小没变，我截取了两个不同大小的屏幕截图，Whosebug 会自动调整它们的大小。

Answer 1

我建议您使用 CompositeTransform 而不是 RotateTransform 和 ScaleTransform。然后你可以在 CompositeTransform 标签内调用 Rotate 和 TranslateX/TranslateY 来移动你的对象。

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

WPF 旋转图像并对齐它

WPF Rotate an Image and align it

wpf

xaml

rotation

rendertransform