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_thumb.png
    NuGet Package Restore & Build Server wie z.B. AppVeyor

    NuGet ist ja mittlerweile weit verbreitet, aber eine Frage stellt sich natürlich immer noch: Checkt man die NuGet Packages ein oder nicht? In meinem kleinen Side-Projekt, welches auf GitHub liegt und ich über AppVeyor auch bauen lasse nutze ich das Package Restore Feature von NuGet, d.h. in meinem Repository befindet sich kein NuGet Package mehr, […]

  • image.png
    Microsoft Account Login via ASP.NET Identity

    Der Microsoft Account ist die zentrale Identifikationsstelle in der “Consumer-Microsoft-Welt”, allerdings ist das Einbinden eben dieser in die eigene Applikation eher schwierig. Das “Live SDK” ist nun unter dem OneDrive Dev Center zu finden und ganz professionell wurden auch alle Links zum alten Live SDK damit unbrauchbar gemacht. Beim Microsoft Account ist es auch unmöglich […]

  • image.png
    Zeitgesteuerte Azure WebJobs – so einfach kann Azure sein

    Das noch in Entwicklung befindliche Azure WebJob SDK bietet einige coole Features zum Verarbeiten und Bereitstellen von Daten. Bekanntes Beispiel ist das Sample welches auf eine Azure Queue lauscht und sobald ein Item da vorhanden ist anfängt dies zu verarbeiten. Szenario: Zeitgesteuerte Aktivitäten – ohne Queue und co. Mein Szenario war allerdings wesentlich trivialer: Ich […]

  • image.png
    Get Involved in OSS! Ja, aber wie geht das denn mit GitHub?

    Auch im .NET Lager gibt es Bewegung im OSS Bereich und es gibt verschiedene Arten wie man bei einem Open Source Projekt “Contributed”. Was zählt alles zu “Contribution”? Unter “Contribution” läuft eigentlich alles – ob es Fragen/Probleme zu dem Projekt via Issues ist oder Dokumentation nachreicht oder ob man darüber bloggt oder das Projekt vorstellt. […]

  • HowTo: Web.config samt eigener ConfigSection zur Laufzeit ändern

    In dem HowTo geht es darum wie man die Web.config zur Laufzeit ändert und was es dabei zu beachten gilt. Das ganze klappt auch mit komplexeren ConfigSections. Eigene ConfigSection? Vor einer ganzen Weile habe ich mal über das Erstellen einer eigenen ConfigSection geschrieben – im Grunde nutzen wir jetzt fast dieselbe Config. Zur Laufzeit? Startet […]

Support us!