wpf的幾種縮放變換詳解

在WPF有五種基本變換，分別是RotateTransform:旋轉變換、ScaleTransform：縮放變換、SkewTransform：傾斜變換、TranslateTransform：移動變換、TransformGroup：變換組，在這里我們分別講解這五種變換的使用方法以便在實際中更好的應用。

        RotateTransform:旋轉變換

        使用方法：設置Angle屬性為需要轉換的角度，設置其中心點為CenterX、CentyY，這個是X、Y軸的二維平面旋轉。

        下面我們來看一個Demo實例，可以設置讓圖標按照某一個角度旋轉，其代碼如下：

<!--RotateTransform變換-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image11"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_001.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image1"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_001.png" >
 <Image.RenderTransform>
 <RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform>
 </Image.RenderTransform>
</Image>

        ScaleTransform：縮放變換

        使用方法：使用CenterX 和 CenterY屬性指定一個中心點，然后設置ScaleX讓對象在X軸進行縮放，設置ScaleY屬性讓對象在Y軸進行縮放。

        下面我們來看一個Demo實例，可以設置讓圖標按照某點縮放，其代碼如下：

<!--ScaleTransform變換-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image21"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image2"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png">
 <Image.RenderTransform>
 <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.6" ScaleY="0.6"></ScaleTransform>
 </Image.RenderTransform>
</Image>

        SkewTransform：傾斜變換

        使用方法：使用AngleX讓元素相對X軸傾斜角度，AngleY是讓元素圍繞Y軸的傾斜角度。同樣CenterX和CenterY是中心點位置。

        下面我們來看一個Demo實例，可以設置讓圖標按照某點傾斜，其代碼如下：

<!--SkewTransform變換-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image31"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image3"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" >
 <Image.RenderTransform>
 <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0"></SkewTransform>
 </Image.RenderTransform>
</Image>

        TranslateTransform：移動變換

        使用方法：X屬性定義元素相對其原來位置偏移的X軸像素量。Y屬性也是讓元素相對原來位置偏移的Y軸像素量。

        下面我們來看一個Demo實例，可以設置讓圖標移動變換，其代碼如下：

<!--TranslateTransform變換-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image41"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image4"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" >
 <Image.RenderTransform>
 <TranslateTransform X="10" Y="50"></TranslateTransform>
 </Image.RenderTransform>
</Image>

        TransformGroup：變換組

        使用方法：在其內部可以應用多種變換規則，直接在其內添加其他變換方式即可。

        下面我們來看一個Demo實例，可以設置讓圖標變換多個組，其代碼如下：

<!--TransformGroup變換-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image51"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image5"
 Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" >
 <Image.RenderTransform>
 <TransformGroup>
 <ScaleTransform ScaleY="-1"/>
 <TranslateTransform Y="100"/>
 </TransformGroup>
 </Image.RenderTransform>
</Image>

 

博客來源:http://www.cnblogs.com/chengxingliang/archive/2011/08/15/2137377.html