Tutorial: 3D-Projektion mit Silverlight

Seit Silverlight 3 besitzt UIElement eine neue Eigenschaft namens Projection. Damit kann man mit wenig Aufwand einen 3D-ähnlichen Effekt erzeugen, der Elemente wie Images und Texte verschieben oder rotieren lassen kann. In meinem Beispiel  lasse ich das Bild einer Galaxie über die Bewegung der Maus um die eigene Achse rotieren. 

 [silverlight:http://www.developa.org/wp-content/plugins/GalaxyDemo.xap]

Um solch eine perspektivische Transformation zu ermöglichen, weist man dem Image der Galaxie einfach ein PlaneProjection Tag zu.

<Grid x:Name=“LayoutRoot“ Background=“Black“>
<Image Source=“Images/BlackBack.jpg“ Stretch=“Fill“/>
<Image Source=“Images/Galaxy.png“ Stretch=“Fill“>
<Image.Projection>
<PlaneProjection x:Name=“ProjectionTransformer“ RotationY=“0″ RotationX=“0″/>
</Image.Projection>
</Image>
</Grid>

Als nächstes implementiert man im Code-Behind einen Event-Handler, der die Bewegungen der Maus abfängt. Das PlaneProjection Objekt, das in XAML den Namen ProjectionTransformer bekommen hat, besitzt 12 Eigenschaften. Über die Veränderung der Werte von RotationX und RotationY kann dann die Rotation des Galaxie-Bildes gesteuert werden:

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove);
}

void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
Point mPoint = e.GetPosition(LayoutRoot);
ProjectionTransformer.RotationX =
((mPoint.Y – (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 160;
ProjectionTransformer.RotationY =
((mPoint.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 160;
}