Silverlight 3 News Teil 1/4: 3D und Effekte


Gastbeitrag von Mario Mair-Huber zu Silverlight 3. Teil 1 von 4


Eine wichtige und interessante Neuerung in Silverlight 3 sind 3D und Effekte - vor allem für mich da ich sehr verspielt bin ;).


3D bedeutet in Silverlight eine Projektion - man kann also 3D Eindrücke in Silverlight erstellen, ohne die CPU zu sehr zu beanspruchen. Um dies zu erreichen gibt es eine neue Eigenschaft, nämlich "Projection" für die Elemente. Projection erlaubt beispielsweise, Elemente auf den 3 Achsen (X, Y und Z) zu verschieben oder zu rotieren. Für ein Bild würde dies dann folgendermaßen aussehen:




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>

silverlight 3


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:


silverlight 3 2


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.

Comments (2)
  1. ThomasGugler says:

    Ist PlaneProjection nur ein Silverlight Feature

    oder wird das auch in WPF(4?) verwendbar sein?

    Bis dato war Silverlight ja "nur" ein Subset von WPF,

    mit Silverlight3 wird aber kräftig aufgeholt.

    nur eben befürchte ich, dass plötzlich Silverlight einen eigenen Weg geht…ich hoffe nicht?

  2. mario_mh says:

    Hallo Thomas,

    PlaneProjection ist kein echtes 3D – es ist 2.5D. Mit den Visual State Manager gab es bereits signifikante Unterschiede zwischen SL2 und WPF.

    Jedoch sind diese wieder zurück in WPF 4 geflossen. Ich denke also auch das es sicher zurück in WPF kommen wird.

    Einen eigenen Weg wird es sicher nicht gehen, allerdings sind einige Änderungen da – Silverlight ist für Internet gedacht und sollte ‘schlank’ bleiben – daher ist es nicht möglich eine vollständige 3D API zu inkludieren. Da 3D jedoch wichtig ist wurde die PlaneProjection als "3D light" eingeführt.

    Viele Grüße,

    Mario

Comments are closed.

Skip to main content