Wir wollen nun ein einfaches Beispiel erstellen, welches Bilder in einem 3D-Raum darstellen soll:
<Image.Projection>
<PlaneProjection RotationY="-65" />
Hierfür erstellen wir uns ein Grid, welches 5 Images als Inhalt haben soll. Jedes Image hat einen Margin von 118, damit nicht der gesamte Platz ausgefüllt wird.
Den 2 Äußeren Images (jene die am Rand erscheinen sollen) wird eine Rotation auf der Y Achse von jeweils -75 (links) und 75 (rechts) verpasst. Eine weitere wichtige Eigenschaft der Projektion ist der Lokale Offset - hier wird das Element auf der jeweiligen Achse verschoben, wobei die Rotation berücksichtigt wird. Für unser Beispiel brauchen wir hier für die zwei äußeren Elemente jeweils die X-Achse mit einem Offset von -350.
Die zwei mittleren Elemente (Also Bild 2 und 4) bekommen eine Rotation von -65 beziehungsweise 65 und einen Offset von -160 bzw. 160.
Das komplette Beispiel sieht so aus:
1: <UserControl x:Class="Projection.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="400" Height="300">
5: <Grid Background="Black" Name="Content">
6: <Image Margin="118" Source="http://localhost:1111/images02/IMG_3997.JPG">
7: <Image.Projection>
8: <PlaneProjection RotationY="-75"
9: LocalOffsetX="-350"/>
10: </Image.Projection>
11: </Image>
12:
13: <Image Margin="118" Source="http://localhost:1111/images02/IMG_4147.JPG">
14: <Image.Projection>
15: <PlaneProjection RotationY="-65"
16: LocalOffsetX="-160"/>
17: </Image.Projection>
18: </Image>
19:
20: <Image Margin="118" Source="http://localhost:1111/images02/IMG_4288.JPG">
21: </Image>
22:
23: <Image Margin="118" Source="http://localhost:1111/images02/IMG_4337.JPG">
24: <Image.Projection>
25: <PlaneProjection RotationY="65"
26: LocalOffsetX="160"/>
27: </Image.Projection>
28: </Image>
29:
30: <Image Margin="118" Source="http://localhost:1111/images02/IMG_4553.JPG">
31: <Image.Projection>
32: <PlaneProjection RotationY="75"
33: LocalOffsetX="350"/>
34: </Image.Projection>
35: </Image>
36:
37: </Grid>
38: </UserControl>
Nun gibt es auch noch die Möglichkeit, Shader Effekte hinzu zu fügen - Dies passiert mit der HLSL (High Level Shading Language, http://de.wikipedia.org/wiki/HLSL). Aber keine Angst, es ist nicht notwendig das man eine neue Sprache lernen muss. Silverlight hat nämlich bereits zwei vorgefertigte Shader: den BlurEffect und den DropShadowEffect. Diesen verwendet man einfach durch Zuweisung (in C#) oder im Effect-Tag (XAML). Ein BlurEffect (simuliert Bewegungsunschärfe) hat einen Radius, wo man die Stärke angibt. Dies sieht in der Startup-Funktion dann so aus:
Content ist in diesem Fall unser Grid. 0.0 bewirkt noch gar nichts - aber am besten Einfach mal mit den Werten spielen. Will man dies jetzt jedoch interessanter gestalten, so kann man den BlurEffect mit einem Storyboard kombinieren. Dies sieht dann so aus:
1: void OnMouseClick(object sender, MouseButtonEventArgs e)
2: {
3: Storyboard Story;
4: DoubleAnimation Animation;
5:
6: Story = new Storyboard();
7: Animation = new DoubleAnimation();
8: Story.Children.Add(Animation);
9:
10: Animation.To = 20.0;
11: Animation.Duration = TimeSpan.FromMilliseconds(250);
12: Animation.AutoReverse = true;
13:
14: Storyboard.SetTarget(Story, Content);
15: Storyboard.SetTargetProperty(Story, new PropertyPath("(UIElement.Effect).(BlurEffect.Radius)"));
16:
17: Story.Begin();
18: }
Die Funktion kann z.B. von einem Button Click oder aber durch einem Klick auf die Seite aufgerufen werden. Hier nun der Effekt an sich:
Wie man sieht ist die Seite schon sehr schwer lesbar ;)
Viel Spaß beim experimentieren mit Silverlight! Wer sich genauer über diese Dinge informieren will, kann am 26. März bei den Student Big>Days in Hagenberg meine Session zu Silverlight 3 besuchen.
Subscribe