Images in Silverlight – Effects und Reflection

Seit heute steht meine neue Silverlight-Webseite online. Das Design ist ziemlich cool und hat auch ein bisschen Arbeit gemacht. Dabei sind ein paar Bilder, denen ich Effekte verpasst habe, hier mal zwei schöne Möglichkeiten das UI einer Silverlight-Webseite mit Images zu verschönern:

1. Einfache Effects definieren

Über die Effect Eigenschaft (die man natürlich auch auf anderen UI Elementen genauso definieren kann) ist es ganz einfach möglich einem Image zum Beispiel einen Schatten anzuhängen. Eine schöne dezente Konfiguration, die ich oft verwendet habe ist die:

 1: <Image Source="rss.png" Height="35" Margin="2">
 2:     <Image.Effect>
 3:         <DropShadowEffect Color="Gray" Opacity="0.6"/>
 4:     </Image.Effect>
 5: </Image>

Ohne Effect:

without

Mit Effect:

shadow

Je nach Anwendungsfall (und Größe vom Bild) macht es natürlich Sinn auch die anderen Eigenschaften von DropShadowEffect noch zu setzen (z.B. ShadowDepth um den Schatten weiter nach unten zu setzten usw.), ist aber in den meisten Fällen denke ich gar nicht nötig.

Der andere Effect, den Silverlight noch bereitstellt, ist der BlurEffect. Den finde ich allerdings nicht so hübsch und nur selten passend und hab ihn deshalb auch nicht eingesetzt. Man kann hier nur den Radius der Verwischung festlegen, für das gleiche Beispiel sähe das dann so aus:

 1: <Image Source="rss.png" Height="35" Margin="2">
 2:     <Image.Effect>
 3:         <BlurEffect Radius="5"/>
 4:     </Image.Effect>
 5: </Image>

Ohne Effect:

without

Mit Effect:

blur

2. Images spiegeln

Bis jetzt war der XAML Code ja eigentlich recht simpel, beim Spiegeln müssen wir uns jetzt schon ein paar mehr Gedanken machen. In WPF gibts für solche Fälle den VisualBrush, leider nicht in Silverlight, deshalb sind wir hier gezwungen zwei Bilder anzulegen, ein Originalbild und ein gespiegeltes, die wir dann zusammen in ein ItemsControl (z.B. StackPanel) packen:

 1: <StackPanel>
 2:     <Image Source="nn.png" Width="150"/>
 3:     <Image Source="nn.png" Width="150">
 4:         <Image.RenderTransform>
 5:             <TransformGroup>
 6:                 <ScaleTransform ScaleY="-1"/>
 7:                 <TranslateTransform Y="140"/>
 8:             </TransformGroup>
 9:         </Image.RenderTransform>
 10:         <Image.OpacityMask>
 11:             <LinearGradientBrush StartPoint="0.5, 1" EndPoint="0.5, 0">
 12:                 <GradientStop Offset="0" Color="#FFFFFFFF"/>
 13:                 <GradientStop Offset="0.5" Color="#22FFFFFF"/>
 14:                 <GradientStop Offset="0.65" Color="#00FFFFFF"/>
 15:             </LinearGradientBrush>
 16:         </Image.OpacityMask>
 17:     </Image>
 18: </StackPanel>

Das Originalbild ist natürlich ganz simpel, das gespiegelte Bild definiert 2 interessante Dinge:

  1. Eine RenderTransform: Verschiebt / Streckt / Zerrt … das Objekt ohne Rücksicht auf seine Umgebung (in WPF gibt es noch eine LayoutTransform, die vorher alles, was im Weg ist zur Seite schiebt). Die RenderTransform skaliert das Image erst einmal mit dem Faktor –1 (entspricht einer Spiegelung an der X-Achse), dann verschieben wir es mit Translate nach unten, damit es unser erstes Bild nicht überdeckt.
  2. Natürlich wollen wir, dass das ganze auch ein bisschen realistisch rüberkommt, das gespiegelte Bild soll also nach unten hin nach und nach immer mehr verschwinden. Das erreichen wir über eine OpacityMask, die über einen Farbverlauf definiert wird. Natürlich sind das hier keine wirklichen Farben, sondern es wird nur der Alpha-Wert (also der erste Wert) der Farbe verwendet, der die Durchsichtigkeit angibt. Bei mir variiert der hier von FF (voll sichtbar) bis 00 (voll durchsichtig).

Und hier das Resultat:

reflection