Für das aktuelle Projekt in dem ich gerade arbeite, brauchen wir für die Oberfläche, die komplett in Silverlight erstellt wird, PopUp Fenster. Diese zusätzlichen Fenster müssen mit einem Schatten versehen werden. Zusätzlich müssen diese Schatten transparent sein, so dass man die darunter liegende Objekte verdunkelt sieht. Weiter muss das Fenster skalierbar sein, da es in verschiedenen Grössen verwendet wird.

Hier das fertige Resultat im Browser. (Das rote Rechteck unter dem Fenster ist nur zur Kontrolle, ob der Schatten auch transparent wirkt.)

Um ein solches Fenster-Template zu bauen hat man in Silverlight und speziell in Expression Blend zwei Probleme.

1: Der Schlagschatten der rechten unteren Ecke. Dieser muss rund verlaufen und nahtlos an den horizontalen und vertikalen Schatten angepasst sein.

2. Der Schatten muss mit dem Fenster mit skalieren.

Hier der Weg wie ich dieses Problem gelöst habe. Als erstes habe ich auf einem Grid drei weitere Grids, die gleich gross sind, positioniert:

• Schatten-Grid (enthält den Schatten)
• Inhalt-Grid (enthält den Inhalt Kopfzeile und Tasten)
• Fenster-Grid (enthält den Rahmen des Fensters)

Beim Inhalt- und Schatten-Grid werden der Kopfbreich und der Tastenbereich gesperrt, so dass sie nicht mit skalieren. Da diese ja gleich gross bleiben und nur der Inhalt (weisse Fläche) grösser wird.

Schatten Grid
Der Schatten-Grid enthält fünf Felder. Die horizontalen und vertikalen Felder mit dem verlaufenden Schatten und die drei quadratischen Felder der Abschlüsse und der Ecke. Diese Bereiche werden nur auf dem Schatten-Grid gesperrt, so dass die Abschlüsse der Schatten nicht skalieren, sondern nur die entsprechenden horizontalen und vertikalen Schatten.

Das Problem der abschliessenden Schatten habe ich folgendermassen gelöst. In die Ecke (und die Abschlüsse) platziert man ein Quadrat, das die gleiche Dimension wie die Rechtecke mit den Schatten hat. Dort platziert man einen radialen Verlauf und verschiebt das Zentrum des Verlaufs in die entsprechende Ecke. Ebenfalls muss man alle Verläufe mit der Alphamaske entsprechend nachbearbeiten, so dass sie auch wirklich transparent werden.

Der Inhalt-Grid
Der Inhalt-Grid wird, im Gegensatz zum Schatten-Grid, nur im Kopf- und  Tastenbereich gesperrt.

Fenster-Grid
Der Fenster-Grid  enthält den Rahmen des Fensters und wird überhaupt nicht gesperrt.

Da diese drei Grids nun alle auf einem übergeordneten Grid liegen kann nun das ganze Fenster inklusive Schatten skaliert werden.