轉換概觀

發行項
08/21/2008

更新：2007 年 11 月

本主題說明如何使用 2DTransform 類別旋轉、縮放、移動 (轉換) 和傾斜 FrameworkElement 物件。

這個主題包含下列章節。

什麼是轉換
轉換類別
常見轉換屬性
轉換和座標系統
轉換 FrameworkElement
範例：旋轉 FrameworkElement 45 度角
將轉換顯示為動畫
Freezable 功能
相關主題

什麼是轉換

Transform 會定義如何將某個座標空間的點對應或轉換到另一個座標空間。此對應關係會由轉換 Matrix 描述，這是一個由三個資料列和三個資料行的 Double 值組成的集合。

注意事項：
如同 Microsoft，Windows Presentation Foundation (WPF) 也使用以資料列為主的矩陣。向量會以資料列向量表示，而非資料行向量。

下表顯示 WPF 矩陣的結構。

二維轉換矩陣

M11

預設：1.0

M12

預設：0.0

0.0

M21

預設：0.0

M22

預設：1.0

0.0

OffsetX

預設：0.0

OffsetY

預設：0.0

1.0

藉由操作矩陣值，您可以旋轉、縮放、傾斜和移動 (轉換) 物件。例如，如果您將第三列第一行的值 (OffsetX 值) 改成 100，就可以將物件沿著 X 軸移動 100 個單位。如果將第二列的第二行的值變更為 3，可以將物件放大成目前高度的三倍。如果同時變更這兩個值，則可以先沿著 X 軸移動物件 100 個單位，然後將高度拉長 3 倍。由於 Windows Presentation Foundation (WPF) 只支援仿射轉換，因此右邊資料行中的值永遠為 0, 0, 1。

雖然 Windows Presentation Foundation (WPF) 可讓您直接操作矩陣值，但它也提供多個 Transform 類別，無須知道基礎矩陣結構的設定方式，就可以轉換物件。例如，ScaleTransform 類別可讓您設定其 ScaleX 和 ScaleY 屬性來縮放物件，而無須操作轉換矩陣。同樣地，只要設定 RotateTransform 類別的 Angle 屬性，就可以旋轉物件。

轉換類別

Windows Presentation Foundation (WPF) 針對常見的轉換操作，提供下列 2DTransform 類別：

類別	說明	範例
RotateTransform	以指定的 Angle 旋轉項目。	HOW TO：旋轉物件
ScaleTransform	以指定的 ScaleX 和 ScaleY 大小縮放項目。	HOW TO：縮放項目
SkewTransform	以指定的 AngleX 和 AngleY 角度傾斜項目。	HOW TO：傾斜項目
TranslateTransform	以指定的 X 和 Y 單位移動 (轉換) 項目。	HOW TO：轉譯項目

如需建立更複雜的轉換，Windows Presentation Foundation (WPF) 則提供了下列兩個類別：

類別	說明	範例
TransformGroup	將多個 TransformGroup 物件組成單一 Transform，然後再套用轉換屬性。	HOW TO：套用多重轉換至物件
MatrixTransform	建立其他 Transform 類別沒有提供的自訂轉換。當您使用 MatrixTransform 時，是直接操作矩陣。	HOW TO：使用 MatrixTransform 建立自訂轉換

Windows Presentation Foundation (WPF) 也提供立體轉換。如需詳細資訊，請參閱 Transform3D 類別。

常見轉換屬性

轉換物件的一個方法就是宣告適當的 Transform 型別，然後將它套用到物件的轉換屬性。物件的型別不同，轉換屬性也不同。下表列出幾個常用的 Windows Presentation Foundation (WPF) 型別及其轉換屬性。

類型	轉換屬性
Brush	Transform, RelativeTransform
ContainerVisual	Transform
DrawingGroup	Transform
FrameworkElement	RenderTransform, LayoutTransform
Geometry	Transform
TextEffect	Transform
UIElement	RenderTransform

轉換和座標系統

當您轉換物件時，不只轉換物件本身，同時也轉換了物件所在的座標空間。根據預設，轉換會置於目標物件座標系統原點的中央：(0,0)。唯一的例外是 TranslateTransform，TranslateTransform 沒有置中屬性可設定，因為不論位於何處的中央，轉換效果都相同。

下列範例使用 RotateTransform，以預設中心 (0, 0) 為準，旋轉 Rectangle 項目 (FrameworkElement 的一種) 45 度角。下圖顯示旋轉的效果。

矩形項目以點 (0,0) 為準旋轉 45 度角

對 (0,0) 旋轉 45 度的 FrameworkElement

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

根據預設，項目會以左上角 (0, 0) 為中心來旋轉。RotateTransform、ScaleTransform 和 SkewTransform 類別提供 CenterX 和 CenterY 屬性，可讓您設定套用轉換的點。

下面的範例也使用 RotateTransform 旋轉 Rectangle 項目 45 度角，不過，這次會設定 CenterX 和 CenterY 屬性，讓 RotateTransform 的中心成為 (25, 25)。下圖顯示旋轉的效果。

矩形項目以點 (25, 25) 為準旋轉 45 度角

對 (25, 25) 旋轉 45 度的幾何

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

轉換 FrameworkElement

若要將轉換套用到 FrameworkElement，請建立 Transform 並將它套用到 FrameworkElement 類別提供的兩個屬性的其中一個：

LayoutTransform：在配置傳遞前套用的轉換。套用轉換之後，版面配置系統會處理項目的轉換後大小和位置。
RenderTransform：修改項目外觀的轉換，但會在版面配置傳遞完成後套用。使用 RenderTransform 屬性代替 LayoutTransform 屬性有助於改善效能。

那麼應該使用哪個屬性？由於具備效能優點，請盡量使用 RenderTransform 屬性，特別是使用動畫 Transform 物件時。但若在縮放、旋轉或傾斜項目時，需要項目的父項調整成項目轉換後的大小，請使用 LayoutTransform 屬性。請注意，與 LayoutTransform 屬性一起使用時，TranslateTransform 物件看起來似乎對項目沒有作用。這是因為版面配置系統在處理時，會將轉換後的項目傳回原始位置。

如需 Windows Presentation Foundation (WPF) 版面配置的詳細資訊，請參閱配置系統概觀。

範例：旋轉 FrameworkElement 45 度角

下列範例會使用 RotateTransform 順時針旋轉按鈕 45 度。此按鈕包含在還有其他兩個按鈕的 StackPanel 中。

根據預設，RotateTransform 會以點 (0, 0) 為中心旋轉。由於範例沒有指定中心值，按鈕會以點 (0, 0)，也就是左上角為中心旋轉。RotateTransform 會套用到 RenderTransform 屬性。下圖顯示轉換的結果。

從左上角順時針旋轉 45 度

使用 RenderTransform 經過轉換的按鈕

<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>

下面範例也使用 RotateTransform 旋轉順時針旋轉按鈕 45 度，但同時也將按鈕的 RenderTransformOrigin 設為 (0.5, 0.5)。RenderTransformOrigin 屬性的值是與按鈕的大小相對的。因此，旋轉會套用到按鈕的中心，而非左上角。下圖顯示轉換的結果。

以中心為準順時針旋轉 45 度

對其中心轉換的按鈕

<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>

下列範例會使用 LayoutTransform 屬性 (而非 RenderTransform 屬性) 旋轉按鈕。這會使轉換影響按鈕的版面配置，觸發版面配置系統完全傳遞。因此，按鈕會旋轉再重新調整位置，因為其大小已經變更。下圖顯示轉換的結果。

用來旋轉按鈕的 LayoutTransform

使用 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>

將轉換顯示為動畫

Transform 類別繼承自 Animatable 類別，因此可以顯示為動畫。若要將 Transform 顯示為動畫，請將相容型別的動畫套用到要顯示為動畫的屬性。

下列範例將 Storyboard 和 DoubleAnimation 與 RotateTransform 一起使用，讓 Button 在按一下時就地旋轉。

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>



    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

如需完整範例，請參閱 2D 轉換範例。如需動畫的詳細資訊，請參閱動畫概觀。

Freezable 功能

Transform 類別繼承自 Freezable 類別，因此可以提供數項特殊功能：Transform 物件可以宣告為資源、供多個物件共用、設成唯讀以提升效能、複製以及設成安全執行緒 (Thread-Safe)。如需 Freezable 物件所提供不同功能的詳細資訊，請參閱 Freezable 物件概觀。

請參閱

共用方式為

轉換概觀

什麼是轉換

轉換類別

常見轉換屬性

轉換和座標系統

轉換 FrameworkElement

範例：旋轉 FrameworkElement 45 度角

將轉換顯示為動畫

Freezable 功能

請參閱

工作

參考

其他資源

其他資源