WPF 旋转图像并对齐 [英] 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>

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

I set the source of ImageTarget from the code.

在转换(RenderTransformOrigin 和 RotateTransform)之前，我的窗口是这样的:

Before the transformation (RenderTransformOrigin and RotateTransform) my window was like :

但是在轮换之后:

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

So, as you can see, the Width and Height has changed.

所以我的问题是:

• 为什么尺寸变了?
• 如何在左上角对齐旋转后的图片(和之前一样)?

谢谢

大小没有改变，我截取了两个不同大小的不同屏幕截图，stackoverflow 会自动调整它们的大小.

Size hasn't changed, I have taken the two different screenshots with a different size, and stackoverflow automatically resize them.

推荐答案

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

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>

这篇关于WPF 旋转图像并对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！