在UWP可以通過 Matrix3DProjection 讓元素顯示出來的介面進行 3d 變換

在所有的 UIElement 都可以通過 Projection 屬性，設定元素的投影，可以讓 2d 的元素看起來和 在 3d 上的一樣

例如在介面新增一個圖片

	       <Image x:Name="Image" Source="Assets/Square150x150Logo.png" HorizontalAlignment="Center" VerticalAlignment=
 
"Center"></Image>

在後臺程式碼讓圖片點選的時候，先下和向右移動 100 畫素

       public MainPage()
        {
            this.InitializeComponent();
            Image.PointerPressed += Image_PointerPressed;
        }

        private void Image_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
 

            Matrix3D m = new Matrix3D();

            // This matrix simply translates the image 100 pixels
            // down and 100 pixels right.
            m.M11 = 1.0; m.M12 = 0.0; m.M13 = 0.0; m.M14 = 0.0;
            m.M21 = 0.0; m.M22 = 1.0; m.M23 = 0.0; m.M24 = 0.0;
            m.M31 = 0.0; m.M32 = 0.0; m.
 
M33 = 1.0; m.M34 = 0.0;
            m.M44 = 1.0;
            m.OffsetX = 100;
            m.OffsetY = 100;
            m.OffsetZ = 0;

            var m3dProjection = new Matrix3DProjection {ProjectionMatrix = m};

            Image.Projection = m3dProjection;
        }

從上面可以看到，在後臺程式碼寫的很多，如果在 xaml 寫的程式碼就很少

       <Image x:Name="Image" Source="Assets/Square150x150Logo.png" HorizontalAlignment="Center"
               VerticalAlignment="Center">
            <Image.Projection>
                <Matrix3DProjection
                    ProjectionMatrix="001, 000, 0, 0,
                                      000, 001, 0, 0,
                                      000, 000, 1, 0,
                                      100, 100, 0, 1" />
            </Image.Projection>
        </Image>

這裡的程式碼和上面的後臺程式碼點選的時候是一樣的

現在來模仿做一個微軟的圖示，通過介面畫出 2d 的微軟圖示

        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <StackPanel>
                <StackPanel.Resources>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="Transparent" />
                        <Setter Property="BorderThickness" Value="5" />
                        <Setter Property="Background" Value="#0173d0" />
                        <Setter Property="Width" Value="100" />
                        <Setter Property="Height" Value="100" />
                    </Style>
                </StackPanel.Resources>
                <StackPanel Orientation="Horizontal">
                    <Border />
                    <Border />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Border />
                    <Border />
                </StackPanel>
            </StackPanel>
        </Grid>

想要做到下圖的效果，只需要修改一點程式碼

在 Grid 新增 RotationY="20" 請看程式碼

        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.Projection>
                <PlaneProjection RotationY="20" />
            </Grid.Projection>
            <StackPanel>
                <StackPanel.Resources>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="Transparent" />
                        <Setter Property="BorderThickness" Value="5" />
                        <Setter Property="Background" Value="#0173d0" />
                        <Setter Property="Width" Value="100" />
                        <Setter Property="Height" Value="100" />
                    </Style>
                </StackPanel.Resources>
                <StackPanel Orientation="Horizontal">
                    <Border />
                    <Border />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Border />
                    <Border />
                </StackPanel>
            </StackPanel>
        </Grid>

這個方法使用的是比較簡單的 PlaneProjection 方法，對於大部分開發已經滿足，只有在複雜的需要，如矩陣變換的時候才需要使用 Matrix3DProjection 的方法

參見 3-D perspective effects for XAML UI - UWP app developer

我搭建了自己的部落格 https://lindexi.gitee.io/ 歡迎大家訪問，裡面有很多新的部落格。只有在我看到部落格寫成熟之後才會放在csdn或部落格園，但是一旦釋出了就不再更新

如果在部落格看到有任何不懂的，歡迎交流，我搭建了 dotnet 職業技術學院 歡迎大家加入

本作品採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名林德熙(包含連結:http://blog.csdn.net/lindexi_gd )，不得用於商業目的，基於本文修改後的作品務必以相同的許可釋出。如有任何疑問，請與我聯絡。