XAML UI 的 3D 透視效果

您可以使用透視轉換將 3D 效果套用到 Windows 執行階段應用程式中的內容。 例如，您可以建立物體朝向或遠離您旋轉的錯覺，如下所示。

透視轉換的另一種常見用法是排列物件的相互關係來建立 3D 效果，如下所示。

除了建立靜態 3D 效果之外，您還可以對透視轉換屬性進行動畫處理，以建立移動 3D 效果。

您剛剛看到的是套用至影像的透視轉換，但您也可以將這些效果套用至任何 UIElement，包括控制項。 例如，您可以將 3D 效果套用到整個控制項容器，如下所示：

以下是用於建立此範例的 XAML 程式碼：

<StackPanel Margin="35" Background="Gray">    
    <StackPanel.Projection>        
        <PlaneProjection RotationX="-35" RotationY="-35" RotationZ="15"  />    
    </StackPanel.Projection>    
    <TextBlock Margin="10">Type Something Below</TextBlock>    
    <TextBox Margin="10"></TextBox>    
    <Button Margin="10" Content="Click" Width="100" />
</StackPanel>

這裡，我們將重點放在 PlaneProjection 的屬性，它用於在 3D 空間中旋轉和移動物件。 下一個範例可讓您試驗這些屬性，並查看它們對物件的影響。

PlaneProjection 類別

您可以透過使用 PlaneProjection 設定 UIElement 的 Projection 屬性，將 3D 效果套用至任何 UIElement。 PlaneProjection 定義如何在空間中轉譯轉換。 下一個範例顯示了一種簡單的情況。

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35"   />
    </Image.Projection>
</Image>

下圖顯示了影像轉譯的內容。 x 軸、y 軸和 z 軸會顯示為紅線。 使用 RotationX 屬性將影像繞 x 軸向後旋轉 35 度。

RotationY 屬性會繞著旋轉中心的 y 軸旋轉。

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35"   />
    </Image.Projection>
</Image>

RotationZ 屬性會繞著旋轉中心的 z 軸 (垂直於物體平面的線) 旋轉。

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationZ="-45"/>
    </Image.Projection>
</Image>

旋轉屬性可以指定正值或負值，以沿任一方向旋轉。 絕對數可以大於 360，這會使物件旋轉一整圈以上。

您可以使用 CenterOfRotationX、CenterOfRotationY 和 CenterOfRotationZ 屬性來移動旋轉中心。 預設情況下，旋轉軸會直接穿過物件的中心，導致物件繞其中心旋轉。 但是，如果將旋轉中心移動到物件的外緣，它將圍繞該邊緣旋轉。 CenterOfRotationX 和 CenterOfRotationY 的預設值為 0.5，CenterOfRotationZ 的預設值為 0。 對於 CenterOfRotationX 和 CenterOfRotationY，0 到 1 之間的值會將樞軸點設定在物件內的某個位置。 0 值表示物件邊緣，1 表示相反的邊緣。 允許超出此範圍的值，並將相應地移動旋轉中心。 由於旋轉中心的 z 軸是透過物件平面繪製的，因此您可以使用負數將旋轉中心移動到物件後面，使用正數將旋轉中心移動到物件前面 (朝向您)。

CenterOfRotationX 會沿著與物件平行的 X 軸移動旋轉中心，而 CenterOfRotationY 則是沿著物件 Y 軸移動旋轉中心。 下圖示範如何使用 CenterOfRotationY 的不同值。

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35" CenterOfRotationY="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationY = "0.5" (預設值)

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35" CenterOfRotationY="0.1"/>
    </Image.Projection>
</Image>

CenterOfRotationY = "0.1"

請注意，當 CenterOfRotationY 屬性設定為預設值 0.5 時，影像如何圍繞中心旋轉; 當設定為 0.1 時，影像如何在上緣附近旋轉。 當變更 CenterOfRotationX 屬性以移動 RotationY 屬性旋轉物件的位置時，您會看到類似的行為。

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35" CenterOfRotationX="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationX = "0.5" (預設值)

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35" CenterOfRotationX="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationX = "0.9" (右側邊緣)

使用 CenterOfRotationZ 將旋轉中心放置在物件平面的上方或下方。 這樣，您就可以圍繞該點旋轉物體，類似於行星繞著恆星運轉。

放置物件

現在，您已了解如何在空間中旋轉物件。 您可以使用下列屬性，將這些旋轉的物件放置在空間中相對於彼此的位置：

• LocalOffsetX 使物件沿著旋轉物件平面的 x 軸移動。
• LocalOffsetY 使物件沿著旋轉物件平面的 y 軸移動。
• LocalOffsetZ 使物件沿著旋轉物件平面的 z 軸移動。
• GlobalOffsetX 使物件沿著與螢幕對齊的 x 軸移動。
• GlobalOffsetY 使物件沿著與螢幕對齊的 y 軸移動。
• GlobalOffsetZ 使物件沿著與螢幕對齊的 z 軸移動。

區域位移

LocalOffsetX、LocalOffsetY 和 LocalOffsetZ 屬性會在旋轉物件後沿著物件平面的對應軸平移物件。 因此，物體的旋轉會決定物體平移的方向。 為了示範這個概念，下一個範例會將 LocalOffsetX 從 0 度設定為 400 度，將 RotationY 從 0 度設定為 65 度。

請注意，在上述範例中，物件正沿著自己的 x 軸移動。 在動畫的一開始，當 RotationY 值接近零 (與螢幕平行) 時，物件會沿著螢幕的 x 方向移動，但當物件向您旋轉時，物件會沿著 x 軸移動物體朝向您的平面。 另一方面，如果您將 RotationY 屬性動畫化為 -65 度，物件會偏離您的曲線。

LocalOffsetY 的運作方式與 LocalOffsetX 類似，不過是沿著垂直軸移動，因此，變更 RotationX 會影響 LocalOffsetY 移動物件的方向。 在下一個範例中，LocalOffsetY 的動畫範圍為 0 到 400，RotationX 的動畫範圍為 0 到 65 度。

LocalOffsetZ 可平移與物件平面呈直角的物件，就像從物件背面直接穿透中心朝向您繪製一個向量。 為了示範 LocalOffsetZ 的運作原理，下一個範例會將 LocalOffsetZ 從 0 度設定為 400 度，將 RotationX 從 0 度設定為 65 度。

在動畫開始時，當 RotationX 值接近零 (與螢幕平行) 時，物件會直接向您移動，但當物件的面向下旋轉時，物件會向下移動。

全域位移

GlobalOffsetX、GlobalOffsetY 和 GlobalOffsetZ 屬性沿著相對於螢幕的軸平移物件。 也就是說，與本機位移屬性不同，物件沿著移動的軸獨立於套用至物件的任何旋轉。 當您只想沿著螢幕的 x、y 或 z 軸移動物件，而不用擔心套用至物件的旋轉時，這些屬性會非常有用。

下一個範例將 GlobalOffsetX 從 0 度設定為 400 度，將 RotationY 從 0 度設定為 65 度。

請注意，在此範例中，物件在旋轉時不會改變路線。 這是因為物件沿著螢幕的 x 軸移動，而不考慮其旋轉。

更複雜的半 3D 案例

您可以使用 Matrix3DProjection 和 Matrix3D 類型來實現比 PlaneProjection 更複雜的半 3D 場景。 Matrix3DProjection 提供了一個完整的 3D 轉換矩陣，可以套用至任何 UIElement，以便您可以將任意模型轉換矩陣和透視矩陣套用至元素。 請記住，這些 API 很少，因此如果您使用它們，您將需要編寫正確建立 3D 轉換矩陣的程式碼。 因此，在簡單的 3D 場景中使用 PlaneProjection 會比較輕鬆。