HowTo: Microsoft Silverlight 1.0 (Bilder "kippen" samt Spiegeleffekte)

Gestern ging es ja um die ersten “dynamischen” Berührungspunkte mit Silverlight – das fetzt zwar ja – aber noch nicht richtig. Text zu spiegel ist natürlich klasse, aber was ist denn mit Bildern oder gar Videos? Da ich momentan keine Videos zur Verfügung habe, werde ich das einfach mal anhand eines Bildes machen.

Grundproblematik: Silverlight nutzt zwar Teile von WPF, aber eben nur Teile. Eine wichtige Funktionalität fehlt bislang vollkommen (traurigerweise) : 3D. Es gibt zwar “3D” Beispiele mit Silverlight (das Beispiel von Telerik), allerdings wenn man hinschaut, hat das nicht viel mit 3D zutun. Die Würfel werden nur verzerrt dargestellt, sodass es beinah aussieht wie 3D. Eigentlich müssten die Kanten nach hinten kürzer werden, bei dem Beispiel verändern sie sich aber kein Stück.

Es gibt noch eine kleine 3D Funktionalität, allerdings ist das eher schlecht als recht anzuprogrammieren. Auf Codeplex gibts eine 3D Engine namens Balder. Wer Interesse hat, sollte die mal anschauen, aber nicht zu viel erwarten.

Wir wollen am Ende sowas ähnliches (vom Effekt her – nicht die Funktionalität) wie dieser hier erreichen (der iTunes Silverlight Clone).

Schritt 1: Beliebiges Bild von Amazon holen

Ich glaub den Schritt brauch ich nicht weiter kommentieren – ich hab das Buchcover gewählt. Speichert es lokal auf eurer Festplatte – DragnDrop direkt ins Expression Blend ging bei mir nicht.

Schritt 2: Silverlight Projekt (es ist egal ob 1.0 oder 1.1 – ich mach es mit 1.0) in Expression Blend 2 August Preview erstellen

Müsste ebenfalls noch bekannt sein aus den vorherigen HowTos ;)

Schritt 3: Bild hinzufügen

image

Recht schwach ist noch das “Add Existing Item…” zu sehen – dort einfach das Bild hinzufügen und dannach kann man es per DragnDrop auf die Arbeitsfläche ziehen:

image

Schritt 4: Bild verzerren

Unter den “Properties” des Bildes findet man den Punkt “Transform”, dort einfach mal bei “Skew” mal klicken und in dem Y Wert -15 eintragen:

image

Da es meiner Meinung nach jetzt etwas zu “schräg”/”schief” aussieht hab ich die Sache bei “Rotate” noch ein Wert von 1,1 gegeben – muss aber nicht sein.

Schritt 5: Spiegeleffekt hinzufügen

Das gesamte Bild (was ich inzwischeneinfach verkleinert hab, weil es ansonsten nicht auf die Fläche passte) hab ich kopiert und einfach etwas nach unten gezogen. Damit das Spiegelbild erstellt wird, müssen folgende Einzelschritte erledigt werden:

Y-Achse kippen:

image

Verzerrung umstellen auf -15:

image

Damit die nun direkt aufeinander passen beim Spiegelbild das Rotate wieder auf 0 setzen und an das Original ansetzen:

image

Durchscheineffekt hinzufügen:

Der Anfangspunkt (die lange leiste unten mit dem schwarzen “Kästel”) war vorher direkt auf schwarz eingestellt, ich hab in dem Farbverlauf das auf fast weiß gesetzt undeinfach noch den AlphaKanal auf 41% gesetzt – ob das hinterher günstig ist, wird sich zeigen ;) – man kann den Wert aber auch auf 100% lassen. Selbst experimentieren ;)

image

Der Endpunkt wurde ebenso angesetzt nur dass er dort direkt auf 100% durchsichtig gesetzt wurde.

Die Verlaufsrichtung noch anpassen (auf das Pfeilsymbol klicken) :

image

Am Ende noch das etwas zurecht rücken und der Spiegeleffekt ist perfekt.

Schritt 6: Schatten beim Original hinzufügen

Um einen optischen Effekt noch hinzuzufügen, werd ich jetzt bei dem Originalbild noch ein leichten Schatten hinzufügen. Ich fands ganz schön ;)

Dafür legen wir ein Rectangle an dem Originalen an:

image

Hier muss jetzt leicht probiert werden – das Rectangle muss natürlich direkt an der Originalkante ran (d.h. etwas drehen) und ansonsten muss noch an der Größe rumgespielt werden. Der Farbverlauf muss angepasst werden und fertig.

image

Fertig: Ansicht im Browser

Direkt im Expression Blend können wir das nun testen – und das Ergebniss find ich erstmal recht ansprechend. Man kann es noch anpassen und insbesondere die Sache mit dem Setzen des Alphakanals macht mir jetzt Gedanken – aber für einen ersten Eindruck gehts und ist auch recht einfach.

image

Viel Spaß noch :)

Letzte Posts

  • image.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit veröffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, später lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zürich mit dem Titel “Open Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benötigen. Lösung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den “Terms of use” zustimmen. Völlig logisch dass da natürlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstößt hat das Unternehmen natürlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas ältere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natürlich auch auslesen möchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

  • image.png
    ASP.NET Bundling & Fontawesome

    Vor einer halben Ewigkeit hatte ich mal geschrieben wie man Fontawesome in ASP.NET nutzen kann. Aufgrund des Alters des Post und einem Kommentar ob man denn Fontawesome auch in das ASP.NET Bundling Framework integrieren kann möchte ich nur ein kurzes Update schreiben. TL;DR: NuGet Package “Fontawesome” runterladen und Pfad in der Bundleconfig angeben. Kurze Schritte […]

Support us!