Silverlight 3 3D Effect
With the release of Silverlight 3 which includes support for 3D rendering, here we show an example of using the new Projection property of all UI Elements to apply 3D transformations.
You need to login to Download this Projection example, If you do not have a login you can register for free!
In the XAML we have a single Image with a PlaneProjection property. We have three buttons, each will rotate the image on a different axis:
<UserControl x:Class="Rotation3D.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="600">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<Storyboard x:Name="RotateZStoryBoard">
<DoubleAnimation Storyboard.TargetName="rotation" Storyboard.TargetProperty="RotationZ" From="0.0" To="360.0" Duration="0:0:10" RepeatBehavior="Forever" />
</Storyboard>
<Storyboard x:Name="RotateYStoryBoard">
<DoubleAnimation Storyboard.TargetName="rotation" Storyboard.TargetProperty="RotationY" From="0.0" To="360.0" Duration="0:0:10" RepeatBehavior="Forever" />
</Storyboard>
<Storyboard x:Name="RotateXStoryBoard">
<DoubleAnimation Storyboard.TargetName="rotation" Storyboard.TargetProperty="RotationX" From="0.0" To="360.0" Duration="0:0:10" RepeatBehavior="Forever" />
</Storyboard>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<ToggleButton x:Name="rotateX" Width="90" Content="Rotate X-Axis" Click="rotateX_Click" />
<ToggleButton x:Name="rotateY" Width="90" Content="Rotate Y-Axis" Click="rotateY_Click" />
<ToggleButton x:Name="rotateZ" Width="90" Content="Rotate Z-Axis" Click="rotateZ_Click" />
</StackPanel>
<Image Grid.Row="1" Margin="0 50 0 0" Source="Sydney.JPG" Stretch="None">
<Image.Projection>
<PlaneProjection x:Name="rotation" />
</Image.Projection>
</Image>
</Grid>
</UserControl>
The C# simply contains the Click event handlers to begin/stop the rotation animations:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace Rotation3D
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void rotateX_Click(object sender, RoutedEventArgs e)
{
if (rotateX.IsChecked.Value)
{
RotateXStoryBoard.Begin();
}
else
{
RotateXStoryBoard.Stop();
}
}
private void rotateY_Click(object sender, RoutedEventArgs e)
{
if (rotateY.IsChecked.Value)
{
RotateYStoryBoard.Begin();
}
else
{
RotateYStoryBoard.Stop();
}
}
private void rotateZ_Click(object sender, RoutedEventArgs e)
{
if (rotateZ.IsChecked.Value)
{
RotateZStoryBoard.Begin();
}
else
{
RotateZStoryBoard.Stop();
}
}
}
}
In the code we respond to the mouse events and calculate the position of the zoomed in area. The magnified area is only visible when the mouse button is pressed.
