Create 3D Effects in Windows Store Apps

Introduction

This article explains how to create 3D effects in Windows Store apps. In Windows Store apps you can apply 3D effects to content or control using perspective transforms. For example you can create the illusion that an object is rotated toward or away from you. Another common usage for perspective transforms is to arrange objects in relation to one another to create a 3D effect.

In this example we are using the "PlaneProjection" class to create a 3D effect. The PlaneProjection class can be used to apply a 3D effect to any UIElement by setting the UIElement's Projection property using a PlaneProjection. The PlaneProjection defines how the transform is rendered in space. Here is an example of 3D effects in Windows Store apps.

Start Visual Studio 2012 and start a new Windows Store apps project.

Go to Solution Explorer and click on "MainPage.xaml" to open it.

 RotationX

 The RotationX property rotates around the x-axis of the center of rotation.

<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.3" />

<Image Source="mywall.jpg" Height="250" Width="350">

    <Image.Projection>

    <PlaneProjection RotationX="-45"   />

    </Image.Projection>

</Image>

RotationY

The RotationY property rotates around the y-axis of the center of rotation.

<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.3" />

<Image Source="mywall.jpg" Height="250" Width="350">

    <Image.Projection>

    <PlaneProjection RotationY="-45"   />

    </Image.Projection>

</Image>

RotationZ

The RotationZ property rotates around the z-axis of the center of rotation.

<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.3" />

<Image Source="mywall.jpg" Height="250" Width="350">

    <Image.Projection>

    <PlaneProjection RotationZ="-45"   />

    </Image.Projection>

</Image>

CenterOfRotationX

The CenterOfRotationX properties moves the center of rotation along the x-axis parallel to the object.

<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.2" />

    <Image Source="mywall.jpg" Height="250" Width="350" >

    <Image.Projection>

    <PlaneProjection RotationY="-50" CenterOfRotationX="0.9" />

    </Image.Projection>

</Image>

CenterOfRotationY

The CenterOfRotationY properties moves the center or rotation along the y-axis of the object.

<Image Source="mywall.jpg" Height="250" Width="350" Opacity="0.3" />

<Image Source="mywall.jpg" Height="250" Width="350">

    <Image.Projection>

    <PlaneProjection RotationX="-45" CenterOfRotationY="0.6" />

    </Image.Projection>

</Image>

3D Effect on UIElement

In the above example we apply a 3D effect on the image. But you can also apply this effect on a UIElement, including a control.

<StackPanel Margin="35" Background="SteelBlue" Height="250" Width="450">

     <StackPanel.Projection>

          <PlaneProjection RotationX="-35" RotationY="-60" RotationZ="1"  />

     </StackPanel.Projection>

<TextBlock Margin="10">3D Effect on UIElement</TextBlock>

<TextBox Margin="10"></TextBox>

<Button Margin="10" Content="Click" Width="100" />

</StackPanel>