Silverlight Snippet: Bild-Reflexion a la CoverFlow

Mit dem folgenden Trick können wir in Silverlight die Reflexion eines Bildes auf einer Glasoberfläche simulieren, wie es auch iTunes im CoverFlow-Modus tut. Kopiert dazu ersteinmal ein beliebiges Bild in euer Projekt und passt die beiden Bild-Pfade im folgenden Code entsprechend an:

<Grid x:Name="LayoutRoot">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="0.4" Color="Black" />
                <GradientStop Offset="0.5" Color="#181818" />
                <GradientStop Offset="0.6" Color="Black" />
                <GradientStop Offset="1" Color="Black" />
            </LinearGradientBrush>
        </Grid.Background>

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <!-- Original-Bild -->
            <Image Source="image.jpg" Width="320" Height="240"
                   Stretch="UniformToFill" Margin="0.5" />

            <!-- Reflexion -->
            <Image Source="image.jpg" Width="320" Height="240"
                   Stretch="UniformToFill" Margin="0.5"
                   RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <ScaleTransform ScaleY="-1" />
                </Image.RenderTransform>
                <Image.OpacityMask>
                    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                        <GradientStop Offset="0" Color="#60FFFFFF" />
                        <GradientStop Offset="0.9" Color="#00FFFFFF" />
                    </LinearGradientBrush>
                </Image.OpacityMask>
            </Image>
        </StackPanel>
    </Grid>

Ganz oben haben wir dem Grid einen leichten Gradienten verpasst, damit die Reflexion mehr zur Geltung kommt.

Der eigentliche Trick ist, zwei Image-Objekte mit demselben Bild untereinander in einem StackPanel zu verwenden. Wichtig ist dabei nur, dass die beiden Images exakt gleich groß sind. Während das obere Image ganz normal dargestellt wird, flippen wir das untere Image vertikal und lassen es langsam ausfaden.

Das Flippen bzw. Spiegeln erledigen wir mit einem ScaleTransform. Diese Transformation kann nicht nur Objekte skalieren, sondern bei der Verwendung von negativen Werten für ScaleX oder ScaleY auch horizontal oder vertikal spiegeln. Dabei darf man nicht vergessen, für das Zielobjekt RenderTransformOrigin auf den relativen Mittelpunkt des Objektes (0.5,0.5) zu setzen, da es sonst nicht wie gewünscht um dessen Mittelpunkt gespiegelt werden würde.

Für das Ausfaden verwenden wir die OpacityMask-Eigenschaft des unteren Images. Diese erwartet eine beliebige Brush, deren Alpha-Farbwerte die Opazität des Objektes an verschiedenen Stellen bestimmen. Wir geben hier eine LinearGradientBrush an, die zwischen den Farben #60FFFFFF und #00FFFFFF, also von oben angefangen vom Alpha Wert #60 bis nach unten zu #00, interpoliert und damit die Opazität des Images langsam bis zur vollständigen Transparenz verändert. Die OpacityMask ignoriert dabei die Rot-, Grün- und Blauwerte der Farben und verwendet ausschließlich den ersten Alpha-Wert.

Wenn ihr das Programm nun startet, sollte es etwa so aussehen:

snippet_reflection

Kommentare

2 Nachrichten zu “Silverlight Snippet: Bild-Reflexion a la CoverFlow”

  1. Sandy Boomer on 15. Februar 2011 06:02

    I’d have to accede with you here. Which is not something I typically do! I really like reading a post that will make people think. Also, thanks for allowing me to speak my mind!

  2. Irving Chugg on 16. Februar 2011 07:01

    bulky book you obtain