使用變換旋轉時防止圖像裁剪

Question

我將XAML綁定到RotateAngle屬性，它對於一個「but」非常有用。圖像顯示裁剪。旋轉後圖像控制似乎不會刷新/調整大小。有沒有辦法強制調整圖像和scrollviewer的大小？

<ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" BorderThickness="0" HorizontalScrollBarVisibility="Auto"> 
      <Image 
       VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
       Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}" 
       RenderTransformOrigin="0.5,0.5"> 
       <Image.RenderTransform> 
        <RotateTransform Angle="{Binding RotateAngle}"></RotateTransform> 
       </Image.RenderTransform> 
      </Image> 
     </ScrollViewer> 

Answer 1

http://www.silverlight.net/content/samples/sl3/toolkitcontrolsamples/run/default.html

到這個頁，有一個名爲LayoutTransformer控制。查看該控件的示例。它處理圖像，文本框，列表框等的旋轉，縮放和傾斜。 您將在那裏獲得代碼。 希望有所幫助。

Answer 2

你可以試試：

<Image x:name="ctrl" 
       VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
       Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}" 
       RenderTransformOrigin="0.5,0.5"> 
       <Image.RenderTransform> 
        <RotateTransform Angle="{Binding DataContext.RotateAngle, ElementName=ctrl}"></RotateTransform> 
       </Image.RenderTransform> 
      </Image> 

Answer 3

或者你可以使用：

<Image 
       VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
       Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}" 
       RenderTransformOrigin="0.5,0.5"> 
       <Image.RenderTransform> 
        <RotateTransform Angle="{Binding DataContext.RotateAngle, RelativeSource={RelativeSource Self}}"></RotateTransform> 
       </Image.RenderTransform> 
      </Image> 

Answer 4

假設你想擴展您的圖像縮小以適合原始圖像的空間，你可以用我的CalculateConstraintScale方法從這裏： Silverlight Rotate & Scale a bitmap image to fit within rectangle without cropping根據旋轉縮小圖像。

Click here for a working testbed app created for that answer（看起來像下面的圖片）：