mehrere Blend Effekte kombinieren

Viele Jahre war ich der Meinung, das sich Effekte (Effects) innerhalb eines XAML UI Elements nicht kombinieren lassen. Ein blöder Fehler in einer Blend Schulung belehrte mich eines Besseren.

Effekte, genauer gesagt Pixel Shader Effects, erlauben die Manipulation eines beliebigen Objektes auf der Grafikkarte. Diese werden in einer eigenen Programmiersprache HLSL geschrieben. In den Anfängen lieferte Microsoft nur zwei Effekte mit, Blur und Drop Shadow. In der Zwischenzeit sind es für WPF 15. Ein Effekt wird per Drag&Drop auf das UI Element gezogen und taucht dann im XAML als Unterelement auf.

   1:  <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100" Margin="250,90,0,0">
   2:              <Rectangle.Effect>
   3:                  <DropShadowEffect/>
   4:              </Rectangle.Effect>
   5:  </Rectangle>

Im Blend Editor ist dieser Effekt untergeordnet

image

Auch die Eigenschaften wie Schattenfarbe (color) oder die Richtung (Direction) sind per Property Dialog änderbar.

image

Das Ergebnis im Design View.

image

Problem ist, wenn man versucht einen weiteren und damit zweiten Effekt auf das Rechteck zu ziehen. Damit wird der Erste Effekt entfernt.

Durch Zufall habe ich einen Effect auf das Layoutroot Grid Container Control gezogen. Alle darunter liegenden Child Controls erbten diesen Effekt.

image

Damit lassen sich somit auch Effekte kombinieren. Hier der DropShadow Effect und der ColorToneEffect auf dem Rectangle.

image

Allerdings endet dieser XAML Trick jäh, wenn man dem Parent Container (hier Layoutroot) einen Background Brush verpasst. Dann wird der Effekt nur mehr auf das Parent Grid angewandt. Abhilfe schafft ein zusätzlicher Layout Container in der Hierarchie.

Übrigens Expression Blend ist seit der Version 5 gratis zum download und heißt nun Blend für Visual Studio.

Kommentare sind geschlossen