HowTo: Microsoft Silverlight 1.0 (Spiegeleffekte erzeugen)

Heute geht es eher um das Expression Tool “Microsoft Blend 2 (August Preview)”. Gerne sieht man bei den tollen Silverlight Anwendungen Spiegeleffekt, aber wie erzeugt man diese? Hier in dem HowTo werde ich das kurz zeigen. Hier wird das “Hello World!” als Beispiel genutzt – die richtige Anwendung soll aber kreativer werden ;)

Schritt 1: Silverlight Projekt erstellen

Im Expression Blend 2 (August Preview) erstellen wir eine Silverlight 1.0 (mit Javascript) Anwendung.

image

Im Anschluss sieht man eine leere Seite.

Auf der linken Seite sieht man ein paar (wenige) Controls, z.B. das Canvas oder Text etc.. Auf der rechten Seite sieht man dann je nachdem was man anklickt die Eigenschaften des jeweiligen Objektes.

Es gibt auch die Möglichkeit direkt in den XAML Modus zu wechseln, sodass ihr euch anschauen könnt, was direkt im Markup sich verändert.

Schritt 2: Erste Begegnungen mit Expression Blend

Als erstes ändern wir die Hintergrundfarbe des gesamten Bildes von weiß zu schwarz, dazu gehen wir in die Eigenschaften des Canvas Objektes:

image

Auf der rechten Seite kann man nun unter dem Reiter “Properties” die Eigenschaften des Objektes direkt verändern:

image

Ändert hier nun die Farbe von weiß auf schwarz.

Schritt 3: “Hello World!” erstellen

Im Anschluss wird ein “TextBlock” erstellt – dieser befindet sich bei den Controls:

image

Damit nun ein “Hello World!” auf dem schwarzen Hintergrund erstellen und dannach die Textfarbe von schwarz auf weiß umstellen und die Schriftgröße unter “Text” ändern.

Schritt 4: Den Spiegeleffekt erstellen

Der Spiegeleffekt wird nur mittels eines kleinen Tricks erstellt – man muss den TextBlock komplett kopieren und die Kopie etwas nach unten ziehen.

image

Nun muss bei dieser Kopie noch der “Spiegeleffekt” eingestellt werden: Unter “Transform” bei den “Properties” auf “Flip” gehen und dort die Y-Achse “flippen”:

image

Schritt 5: Farbverlauf erstellen

Jetzt haben wir die Schrift zwar gespiegelt, aber irgendwie fetzt es noch nicht, daher muss noch ein Farbverlauf rein.

Das ist eigentlich jetzt der kniffligste Moment: Leider hat wohl das Tool eine Macke, wenn es darum geht, Farbverläufe auf Texte zu setzen. Man muss den Text markieren um den Farbverlauf einzustellen, kann dort aber nur einen horizontalen Farbverlauf bekommen:

image

Eigentlich gibts dann noch diesen kleinen Pfeil um die Richtung zu bestimmen:

image

Allerdings verschwindet dann wieder die Markierung – ärgerlich wie ich finde (oder es lag doch an mir). Das macht aber nix, denn obwohl das Tool die gespiegelte und mit farbverlaufversehenene Fassung anzeigt, bekommt man einen Fehler wenn man es ausführt. Grund ist (laut Errormessage), dass das TextElement eigentlich nix ausser den eigentlichen Text enthalten darf (-> scheinbar, ansonsten würde es ja gehen).

Nun müssen wir ins XAML:

Vorher -

image

Beachtet die Attribute “EndPoint” und “StartPoint”. Hier müsst ihr den Farbverlauf nun manuell einstellen, ich hab es auf so eingestellt: EndPoint=”1,1″ StartPoint=”1,0.2″. Damit erhält man einen leichten Farbverlauf nach unten. Nun müssen wir noch das TextElement “Run” leer machen-  die untere Variante hat bei mir geklappt. Den LinearGradientBrush hab ich einfach in den Textblock geschoben:

image

Endresultat:

image

(ich hab noch ein kleine Ellipse eingefügt – sah cool aus fand ich ;) )

Soviel erstmal dazu – heute ging es eher um Expression Blend – beim nächsten HowTo werde ich die Einbindung in unser ASP.NET AJAX Projekt zeigen und das ganze etwas dynamisieren ;)

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!