Windows 应用商店应用中的 3D 效果

引言

可以使用变换为 Windows Store 应用应用 3D 效果。 对象可以在三个轴上旋转：X、Y 和 Z。 对象会根据施加给它的变换旋转相应的角度。

背景 

本文旨在帮助您熟悉可以对 XAML 对象执行的各种旋转。

使用代码

在本示例中，我们将研究平面投影 (PlaneProjection)、其旋转角度和旋转中心。 这三个要素在 XAML 中的 3D 设计中都起着至关重要的作用。
平面投影公开了各种可用于产生 3D 效果的属性。 其中，RotationAngle 帮助我们确定对象要旋转的角度。
CenterOfRotation 属性决定了对象要围绕哪个点旋转。
我们将看到一个角度的旋转以及 CenterOfRotation 的变化，以及它与默认旋转点有何不同。 

 以下图像供参考，以便更好地理解整个代码

 

第一行显示带有旋转和默认旋转中心（即 0.5）的图像，这意味着图像将以指定的角度旋转，旋转点将是图像的中心。 CenterOfRotation 的定义范围为 0 到 1，0.5 为中心。
在第二行中，我们有相同的图像，将以相同的旋转角度旋转，但旋转中心不同。 因此，在某些情况下，它们看起来更倾斜。

如何指定旋转中心

从示例中可以看出，如果旋转沿 X 轴，则旋转中心被提及为 Y 轴，反之亦然。 这是因为当图像沿 X 轴旋转时，可以发生旋转的受影响点位于 Y 轴上，反之亦然。 类似地，在沿 Z 轴旋转的情况下，点位于 X 和 Y 轴上，因此都提及了。 

 

以下是代码片段： 

<Grid>
        <Grid.Background>
            <ImageBrush ImageSource="Your BackGround" />
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
<!--Start of Rotation without specifying the center of rotation : By Default 0.5-->
        <StackPanel>
            <Image Source="Path to your own Image" Height="350" Width="350">
                <Image.Projection>
                    <PlaneProjection RotationY="-60" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along Y axis -60 Degrees and Default CenterOfRotation</TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="0" Grid.Column="1">
            <Image Source="Path to your own Image" Height="350" Width="350" >
                <Image.Projection>
                    <PlaneProjection RotationX="60" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along X axis 60 Degrees and Default CenterOfRotation</TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="0" Grid.Column="2">
            <Image Source="Path to your own Image" Height="300" Width="300" >
                <Image.Projection>
                    <PlaneProjection RotationZ="-50" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along Z axis -50 Degrees and Default CenterOfRotation</TextBlock>
        </StackPanel>
<!--Start of Rotation by specifying the center of rotation : Rotation about a point-->
        <StackPanel Grid.Row="1" Grid.Column="0">
            <Image Source="Path to your own Image" Height="350" Width="350" >
                <Image.Projection>
                    <PlaneProjection RotationY="-60" CenterOfRotationX="1" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along Y axis -60 Degrees and CenterOfRotation on X= 1</TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="1">
            <Image Source="Path to your own Image" Height="350" Width="350" >
                <Image.Projection>
                    <PlaneProjection RotationX="60" CenterOfRotationY="1" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along X axis 60 Degrees and CenterOfRotation on Y= 1</TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="2">
            <Image Source="Path to your own Image" Height="300" Width="300" >
                <Image.Projection>
                    <PlaneProjection RotationZ="-50" CenterOfRotationX="0.7" CenterOfRotationY="0.7" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along Z axis -50 Degrees and Default CenterOfRotation on X and Y= .7</TextBlock>
        </StackPanel>
</Grid> 

关注点 

使用平面投影和相应的控件，可以为 Windows Store 应用中的控件形成 3D 效果。 3D 效果的主要作用由 RotationX、RotationY 和 RotationZ 属性发挥，这些属性用于指定旋转角度。