WPF 旋转图片

旋转图片,要用到RenderTransform这个属性,RenderTransform这里面包含了RotateTransformScaleTransformTranslateTransform这三个属性,

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

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

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

     

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

在后台代码中实现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来实现,需要添加控件的LayoutTransformxaml代码以及在Resource中添加storyboardxaml代码,

如下所示:


        "Rotateright">
            "rotate"Storyboard.TargetProperty="Angle" Duration="00:00:0.1" By="90"/>
       
"183"Name="border1" Width="200"BorderBrush="Blue" BorderThickness="1.5">
            "image1" Stretch="Uniform"Source="/Desert.jpg" >
                
                    "rotate" >
                
            

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

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

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

你可能感兴趣的:(C#开发)