In this article we will be seeing how to create Silverlight Plane Projection using Visual studio 2010.
Plane projection is used to create a perspective transform or 3-D effect of an UI element. Perspective transform can be applied to any UI element, including the controls. The default value is null.
Namespace: System.Windows.Media
Assembly: System.Windows
Plane Projection:
It is used to represent the perspective transform on an object. Perspective transform is applied to the UI element, including the controls in the one below.
In the above example, the RotationX, RotationY, and RotationZ properties are used to specify the number of degrees to rotate the Canvas around a center of rotation point. The RotationX property is used to specify a rotation around the horizontal axis of the object, RotationY is used to specify a rotation around the vertical axis, and RotationZ is used to specify a rotation around the z-axis. These are the three rotation properties which can be set on a PlaneProjection object which affect how the object is rendered in 3D space. The other properties are:
CenterOfRotationX:
It is used to specify the x-coordinate of the center of rotation of the object you rotate.
CenterOfRotationY:
It is used to specify the y-coordinate of the center of rotation of the object you rotate.
CenterOfRotationZ:
It is used to specify the z-coordinate of the center of rotation of the object you rotate.
LocalOffsetX:
It is used to specify the distance the object is translated along the x-axis of the plane of the object.
LocalOffsetY:
It is used to specify the distance the object is translated along the y-axis of the plane of the object.
LocalOffsetZ:
It is used to specify the distance the object is translated along the z-axis of the plane of the object.
GlobalOffsetX:
It is used to specify the distance the object is translated along the x-axis of the screen.
GlobalOffsetY:
It is used to specify the distance the object is translated along the y-axis of the screen.
GlobalOffsetZ:
It is used to specify the distance the object is translated along the z-axis of the screen.
Steps Involved:
Creating a Silverlight Application:
- Open Visual Studio 2010.
- Go to File => New => Project.
- Select Silverlight from the Installed templates and choose the Silverlight Application template.
- Enter the Name and choose the location.
- Click OK.
- In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site".
- Click OK.
Creating the UI:
- Open MainPage.xaml file and replace the code with the below one.
<UserControl x:Class="PlaneProjectionExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">
<Canvas Height="300" Width="300" Background="White">
<Canvas.Projection>
<PlaneProjection RotationX="-25" RotationY="-25" RotationZ="15"></PlaneProjection>
</Canvas.Projection>
<Rectangle Height="200" Width="200" Canvas.Left="50" Canvas.Top="50" Fill="Gray" Opacity="0.1" />
<Rectangle Height="180" Width="180" Canvas.Left="60" Canvas.Top="60" Fill="Gray" Opacity="0.2" />
<Rectangle Height="160" Width="160" Canvas.Left="70" Canvas.Top="70" Fill="Gray" Opacity="0.3" />
<Rectangle Height="140" Width="140" Canvas.Left="80" Canvas.Top="80" Fill="Gray" Opacity="0.4" />
<Rectangle Height="120" Width="120" Canvas.Left="90" Canvas.Top="90" Fill="Gray" Opacity="0.5" />
<Rectangle Height="100" Width="100" Canvas.Left="100" Canvas.Top="100" Fill="Gray" Opacity="0.6" />
<Rectangle Height="80" Width="80" Canvas.Left="110" Canvas.Top="110" Fill="Black" Opacity="0.3" />
<Rectangle Height="60" Width="60" Canvas.Left="120" Canvas.Top="120" Fill="Black" Opacity="0.4" />
<Rectangle Height="40" Width="40" Canvas.Left="130" Canvas.Top="130" Fill="Black" Opacity="0.5" />
<Rectangle Height="20" Width="20" Canvas.Left="140" Canvas.Top="140" Fill="Black" Opacity="0.6" />
</Canvas>
</UserControl>
Testing the solution:
- Build the solution.
- Hit ctrl+F5.