如何在 ScrollViewer 中旋转图像？ [复制]答案

【问题标题】：How to rotate an image inside ScrollViewer? [duplicate]如何在 ScrollViewer 中旋转图像？ [复制]
【发布时间】：2017-07-16 10:41:22
【问题描述】：

我尝试在 ScrollViewer (WPF) 中旋转图像，但整个图像需要保持可见。如果旋转角度例如为 45，图像的角被切断。我尝试通过计算旋转图像的周围矩形来设置图像的宽度和高度。它可以工作，但如果旋转角度超过 45，则不能。

<Grid>
    <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" Margin="0,0,0,0">
        <Image x:Name="image" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" MouseDown="image_MouseDown" MouseRightButtonDown="image_MouseRightButtonDown" MouseLeftButtonDown="image_MouseLeftButtonDown">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="scal"/>
                    <SkewTransform/>
                    <RotateTransform Angle="90" x:Name="rot"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </ScrollViewer>

</Grid>

【问题讨论】：

请添加您编写的 XAML 代码和 C# 代码。
你需要维护aspect ratio，才会出现这样的问题。
我使用 Image.LayoutTransform 而不是 Image.RenderTransform 并且它有效。

标签： wpf image image-rotation

【解决方案1】：

在以下结构中使用ViewBox：

<ScrollViewer Width="100" Height="100" Background="Black" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <Viewbox Width="100" Height="100">
        <Border Width="100" Height="100" Background="Red" >
            <Border.LayoutTransform>
                <RotateTransform Angle="30"   />
            </Border.LayoutTransform>
        </Border>
    </Viewbox>
</ScrollViewer>

请注意，您应该将ViewBox 和内部Control（在您的情况下为Image）的大小设置为等于ScrollViewer 的大小。 ViewBox 将调整内部Control 的大小，使滚动条永远不可见。

注意我用的是红色边框，你可以添加图片。

编辑

刚刚检查过了。您不需要设置宽度，只需设置内部控件的大小。换句话说，这也有效：

<ScrollViewer Background="Black" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <Viewbox>
        <Border Width="1" Height="1" Background="Red" >
            <Border.LayoutTransform>
                <RotateTransform Angle="30"   />
            </Border.LayoutTransform>
        </Border>
    </Viewbox>
</ScrollViewer>

【讨论】：