Windows Store App 旋轉中心

旋轉中心的位置能夠經過設置CenterOfRotationX、CenterOfRotationY和CenterOfRotationZ屬性來指定。CenterOfRotationX和CenterOfRotationY屬性的默認值都是0.5，表示旋轉軸正好位於旋轉對象的中心。當這兩個屬性值爲0和1時，表示旋轉中心處在旋轉對象的一組對邊上，即將旋轉中心移到旋轉對象的外邊沿，旋轉對象將會繞其外邊沿旋轉。當這兩個屬性值的範圍在0和1之間時，表示旋轉中心處於旋轉對象的特定位置，若超出這個範圍，則根據超出值大小相應的將旋轉中心移出旋轉對象。CenterOfRotationZ屬性的默認值是0，表示旋轉中心在旋轉對象的中心，能夠對其賦正值或負值，使旋轉中心移到旋轉對象的正面或背面。

經過設置CenterOfRotationX屬性值能夠將旋轉中心沿X軸並平行於Y軸移動，同理經過設置CenterOfRotationY屬性值能夠將旋轉中心沿Y軸並平行於X軸移動。下面看一下不一樣的CenterOfRotationY屬性值對3D效果的影響，如圖10-10所示。

 CenterOfRotationY = "0.5" (默認值)                        CenterOfRotationY = "0.1"

圖10-10 CenterOfRotationY屬性效果

接下來介紹如何改變CenterOfRotationX的屬性值移動旋轉中心，從而使界面元素繞着指定的旋轉中心進行旋轉。

啓動Visual Studio 2012，新建一個Windows應用商店的空白應用程序項目，將其命名爲3DCenterOfRotationApp，首先在項目的Assets文件夾下添加一個名爲「Windows 8.png」的圖片，雙擊打開此頁面的3DCenterOfRotationApp.xaml文件，使用以下代碼替換原有的Grid元素。

<Grid Background="Gray">

    <StackPanel  Width="240" Height="240" Background="White" >

        <Image  Width="240" Height="240" Source="/Assets/Windows 8.png">

            <Image.Projection>

                <PlaneProjection CenterOfRotationX="0.9" RotationY="45"/>

</Image.Projection>

        </Image>

    </StackPanel>

</Grid>

上面的代碼與以前介紹的示例代碼相似，不一樣的是本示例把PlaneProjection元素的CenterOfRotationX屬性值設置爲0.9，表示將旋轉中心沿X軸並平行於Y軸向右移動到圖片的右邊緣，接着將RotationY屬性值設置爲45度，這樣圖片將繞Y軸順時針旋轉45度。

按下F5運行程序，會產生如圖10-11所示的3D效果。

 

圖10-11 繞指定旋轉中心旋轉的3D效果圖

因爲旋轉中心的設置很相似這裏僅以CenterOfRotationX屬性爲例進行了講解，有興趣的讀者能夠在上面示例的基礎上修改PlaneProjection的屬性值，感覺不一樣的3D效果。