WPF 旋转图片

旋转图片，要用到RenderTransform这个属性，RenderTransform这里面包含了RotateTransform、ScaleTransform、TranslateTransform这三个属性，

分别对应了旋转、缩放、移动的操作。比如，实现一个旋转图片，XAML代码如下

<Border Height="183"Name="border1" Width="200"BorderBrush="Blue" BorderThickness="1.5">

      <ImageName="image1" Stretch="Uniform"Source="/Desert.jpg" >

     </Image>

</Border>

图片的写完了，它被包在一个Border中。写一个Button来控制图片的旋转。下面是button的XAML代码：

<Button Name="rotateImage"Click="RotateImage" Content=" Rotate" />

在后台代码中实现button的Click事件，如下代码：

void rotateImage_Click(object sender, RoutedEventArgs e) 
       { 
            double width = image1.ActualWidth; 

           double height = image1.ActualHeight;

            m_Angle += 90;

           image1.RenderTransform = newRotateTransform(m_Angle,width / 2, height/ 2);

          m_Angle = m_Angle % 360;

        }

m_Angle作为一个局部变量，初始值为0，每次点击button后就给它增加90，从而使连续点击button时有连动效果。 这样就好了。 效果如下：

  
 

                   旋转前

     
 
 
 
 
 
 
 
 
                  旋转后

这时，大家就会发现，当转过之后，图片有一部分会超出Border边界，这不是我们想要的效果，我们希望的是不管图片怎么旋转，都在蓝色框内，那应该怎么办呢？
这时候，就要使用控件的LayoutTransform了，因为WPF元素使用RenderTransform时不改变元素布局，使用LayoutTransform时可以更改元素的布局，它会根据元素的布局自动调整。
 
这时修改代码如下：

void rotateImage_Click(object sender, RoutedEventArgs e)
         {
  
             double width = image1.ActualWidth;
             double height = image1.ActualHeight;
             m_Angle += 90;
             m_Angle = m_Angle% 360;
  
             image1.LayoutTransform = newRotateTransform(m_Angle,width / 2, height/ 2);
         }

效果如下：

 
                    旋转前 
   
 
 
 
 
 
 
 
 
 
 
 
                   旋转后

另外，旋转图片还可以通过Storyboard来实现，需要添加控件的LayoutTransform的xaml代码以及在Resource中添加storyboard的xaml代码，

如下所示:

<Window.Resources>
        <Storyboardx:Key="Rotateright">
            <DoubleAnimation
                Storyboard.TargetName="rotate"Storyboard.TargetProperty="Angle" Duration="00:00:0.1" By="90"/>
       </Storyboard>
</Window.Resources>

<Border Height="183"Name="border1" Width="200"BorderBrush="Blue" BorderThickness="1.5">
            <ImageName="image1" Stretch="Uniform"Source="/Desert.jpg" >
                <Image.LayoutTransform>
                    <RotateTransform x:Name="rotate" ></RotateTransform>
                </Image.LayoutTransform>
            </Image>
</Border>

最后在button的click事件中调用Storyboard的Begin方法就可以了。代码如下:

((Storyboard)this.FindResource("Rotateright")).Begin();

若对Storyboard感兴趣，可以进一步研究。