在WPF開發中，經常會需要用到UI控制項的2D轉換（如：旋轉，縮放，移動，傾斜等功能），本文以一些簡單的小例子，簡述如何通過Transform類實現FrameworkElement對象的2D轉換，僅供學習分享使用，如有不足之處，還請指正。 ...

在WPF開發中，經常會需要用到UI控制項的2D轉換（如：旋轉，縮放，移動，傾斜等功能），本文以一些簡單的小例子，簡述如何通過Transform類實現FrameworkElement對象的2D轉換，僅供學習分享使用，如有不足之處，還請指正。

什麼是Transform?

轉換（Transform）定義如何將控制項從一個坐標空間映射或轉換到另一個坐標空間。2D轉換可以通過Matrix來實現，Matrix是一個3行3列的double值的集合。不過WPF還提供了多個Transform類，以便在不知道基礎矩陣結構配置的情況下轉換對象。

WPF提供了2D轉換（Transform）類，常見的有以下幾種：

RotateTransform，按指定的角度（Angle）旋轉元素。
ScaleTansform，按指定的坐標方向（ScaleX和ScaleY）縮放元素。
SkewTransform，按指定的角度（AngleX和AngleY）傾斜元素。
TranslateTransform，按指定的X軸和Y軸移動元素，不過這種移動並非是真實的移動，只是呈現上的移動。

為了創建更複雜的轉換（Transform），WPF還提供了組合轉換。如下所示：

TransformGroup，將多個TransformGroup對象組成單個Transform，然後就可以應該到一個UI元素的Transform屬性上。
MatrixTransform，創建自定義的轉換，使用MatrixTransform時，可以直接操作矩陣。

轉換和坐標系

轉換對象時，同時還會轉換對象所在的坐標空間。預設情況下，除TranslateTransform外，轉換基於目標對象的坐標系的左上角（0,0）進行轉換。如果想要修改轉換基點，可以通過CenterX，CenterY屬性進行修改。

以左上角（0,0）進行旋轉，如下所示：

以矩形中心進行旋轉，如下所示：

轉換元素

如果想要將轉換應用到控制項元素（FrameworkElement），需要創建Transform並應用到FramworkElement類所提供的兩個屬性之一。控制項所對應的兩個轉換屬性，分別如下所示：

LayoutTransform，在佈局之前應用轉換，佈局系統處理轉換之後的大小和定位。
RenderTransform，修改元素外觀的轉換，在佈局完成後應用。

將Transform應用到兩個屬性，都可以達到想要的效果，至於要使用哪個屬性，可以根據不同場景進行區分：

在對元素進行縮放，選擇，或傾斜，並且需要父級元素來對元素轉換後的大小進行調整是，可以使用LayoutTransform屬性。
如果使用動畫處理後的Transform對象時，可以使用RenderTransform。並且由於RenderTransform屬性提供性能優勢，所以應儘可能的使用此屬性。

旋轉RotateTransform

預設情況下，RotateTansform圍繞點（0,0）選擇，如下所示：

<Border Margin="30" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" >
    <StackPanel Orientation="Vertical">
        <Button Content="A Button" Opacity="1" />
        <Button Content="Rotated Button">
            <Button.RenderTransform>
                <RotateTransform Angle="45" />
            </Button.RenderTransform>
        </Button>
        <Button Content="A Button" Opacity="1" />
    </StackPanel>
</Border>

旋轉效果，如下所示：

通過RenderTransformOrigin屬性，可以設置應用旋轉變換的坐標。如下所示：

<Border Margin="30" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" >
    <StackPanel Orientation="Vertical">
        <Button Content="A Button" Opacity="1" />
        <Button Content="Rotated Button" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <RotateTransform Angle="45" />
            </Button.RenderTransform>
        </Button>
        <Button Content="A Button" Opacity="1" />
    </StackPanel>
</Border>

修改應用變換坐標後，如下所示：

上述RenderTransformOrigin是相對坐標，範圍從（0,0）到（1,1），同樣也可以通過RotateTransform的CenterX，CenterY屬性進行實現相同的效果。

如果將Transform應用到LayoutTransform，則將導致影響按鈕的佈局，從而觸發佈局系統的整個處理過程。如下所示：

<Border Margin="30" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1">
    <StackPanel Orientation="Vertical">
        <Button Content="A Button" Opacity="1" />
        <Button Content="Rotated Button">
            <Button.LayoutTransform>
                <RotateTransform Angle="45"  />
            </Button.LayoutTransform>
        </Button>
        <Button Content="A Button" Opacity="1" />
    </StackPanel>
</Border>

應用到LayoutTransform的選擇效果，如下所示：

縮放ScaleTransform

通過ScaleTransform可以對元素進行縮放，通過使用ScaleX，ScaleY屬性進行縮放。這兩個屬性是相對值，表示縮放的倍數，小於1表示縮小，大於1表示放大，等於1表示原始大小。使用CenterX，CenterY屬性指定縮放操作的中心點。

縮放示例如下所示：

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2" Canvas.Left="100" Canvas.Top="100">
    <Rectangle.RenderTransform>
        <ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2" />
    </Rectangle.RenderTransform>
</Rectangle>

通常，將 CenterX 和 CenterY 設置為縮放對象的中心：（Width/2、Height/2）。

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
    <Rectangle.RenderTransform>
        <ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2" />
    </Rectangle.RenderTransform>
</Rectangle>

下圖顯示了兩個 ScaleTransform 操作之間的差異。虛線顯示的是矩形在縮放之前的大小和位置。

傾斜扭曲SkewTransform

扭曲（也稱為修剪）是一種以非均勻方式拉伸坐標空間的轉換。 SkewTransform 的一種典型用途是在 2D 對象中模擬 3D 深度。

SkewTransform的主要特點如下所示：

使用 CenterX 和 CenterY 屬性指定 SkewTransform 的中心點。
使用 AngleX 和 AngleY 屬性指定 x 軸和 y 軸的扭曲角度，並沿這些軸扭曲當前坐標系統。

示例：如果 AngleX 為 30，則 y 軸繞原點旋轉 30 度，將 x 軸的值從該原點扭曲 30 度。同樣地，如果 AngleY 為 30，則將形狀的 y 值從原點扭曲 30 度。

以下示例向 Rectangle 應用自中心點 (0,0) 的 45 度水平扭曲。

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2" Canvas.Left="100" Canvas.Top="100">
    <Rectangle.RenderTransform>
        <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0" />
    </Rectangle.RenderTransform>
</Rectangle>

以下示例向 Rectangle 應用自中心點 (25,25) 的 45 度水平扭曲。

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
    <Rectangle.RenderTransform>
        <SkewTransform CenterX="25" CenterY="25" AngleX="45" AngleY="0" />
    </Rectangle.RenderTransform>
</Rectangle>

以下示例向 Rectangle 應用自中心點 (25,25) 的 45 度垂直扭曲。

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2" Canvas.Left="100" Canvas.Top="100">
    <Rectangle.RenderTransform>
        <SkewTransform CenterX="25" CenterY="25" AngleX="0" AngleY="45" />
    </Rectangle.RenderTransform>
</Rectangle>

上述三個示例的效果圖如下所示：

移動TranslateTransform

TranslateTransform主要用於元素的平移（移動），如將TranslateTransform應用於元素的RenderTransform屬性，可以在StackPanel或DockPanel內移動元素。可以使用TranslateTransform的X屬性和Y屬性指定按哪個軸進行移動（單位是像素）。

以下示例使用 TranslateTransform 將元素向右移動 50 個像素，向下移動 50 個像素。

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2" Canvas.Left="100" Canvas.Top="100">
    <Rectangle.RenderTransform>
        <TranslateTransform X="50" Y="50" />
    </Rectangle.RenderTransform>
</Rectangle>

組合轉換TransformGroup

通過TransformGroup可以將多個Transform對象合併成一個複合的Transform，並應用到元素的屬性。

下麵的示例使用 TransformGroup 將 ScaleTransform 和 RotateTransform 應用到 Button。

<Button RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" Content="Click">
    <Button.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleY="3" />
            <RotateTransform Angle="45" />
        </TransformGroup>
    </Button.RenderTransform>
</Button>

以上就是《不可不知的WPF轉換（Transform）》的全部內容，旨在拋磚引玉，一起學習，共同進步。

作者：老碼識途
出處：http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段聲明，且在文章頁面明顯位置給出原文連接，謝謝。
關註個人公眾號，定時同步更新技術及職場文章