30.3 Brush-Objekte

Die grafischen Elemente, auf die wohl am häufigsten zugegriffen wird, sind die Brush-Elemente, zu Deutsch auch Pinsel genannt. Sie beschreiben die Darstellung von Hintergründen, Füllmustern und auch anderer grafischer Elemente.

Basis aller Füllmuster ist die Klasse Brush, die zum Namespace System.Windows.Media gehört. Die Klasse Brush ist abstrakt definiert und stellt neben anderen Eigenschaften auch die Möglichkeit zur Verfügung, mit der Eigenschaft Opacity die Transparenz einzustellen. Brush wird durch TileBrush, GradientBrush und SolidColorBrush abgeleitet. Die beiden erstgenannten Klassen sind ihrerseits selbst abstrakt und dienen nur der Bereitstellung weiterer Gemeinsamkeiten an deren Ableitungen. Die Hierarchie sehen Sie in Abbildung 30.7.

Abbildung 30.7 Die Hierarchie der »Brush«-Klassen

Eine Kurzbeschreibung der Klassen finden Sie in der folgenden Tabelle. Wir werden uns im Verlauf dieses Kapitels die Klassen noch etwas genauer ansehen.

30.3.1 SolidColorBrush

Möchten Sie eine Fläche mit einer Farbe füllen oder Linien in einer bestimmten Farbe zeichnen, verwenden Sie SolidColorBrush. Geben Sie die Farbe an, können Sie auf die vordefinierten Eigenschaften der Klasse Brushes zurückgreifen, beispielsweise:

<Rectangle Width="100" Height="60">
  <Rectangle.Fill>
    <SolidColorBrush Color="BlanchedAlmond" />
  </Rectangle.Fill>
</Rectangle>

Listing 30.9 Eine einfache Farbe festlegen

Der gewünschte Farbwert wird mit der Eigenschaft Color angegeben. Er kann auch ein Hexadezimalwert sein:

<SolidColorBrush Color="#AA8790" />

Bei der Angabe eines Hexadezimalwertes können Sie neben dem eigentlichen Wert des Farbtons auch eine Transparenz angeben. Beabsichtigen Sie, eine Farbe mit 50 % Transparenz anzuzeigen, würde der Farbton wie folgt beschrieben:

<SolidColorBrush Color="#80AA8790" />

Hier wird einfach vor der sechsstelligen Hexadezimalzahl der Farbe eine zweistellige Transparenz für den sogenannten Alphakanal angegeben.

Alternativ bietet sich auch die gleichwertige Übergabe der Transparenz an die Eigenschaft Opacity an:

<SolidColorBrush Opacity="0.5" Color="#AA8790" />

30.3.2 LinearGradientBrush

Die Klasse LinearGradientBrush beschreibt einen Farbverlauf zwischen zwei Punkten. Die Achse des Farbverlaufs wird als Verlaufslinie oder auch Gradientenachse bezeichnet. Diese Linie gibt die Richtung des Farbverlaufs an und wird durch die Eigenschaften StartPoint und EndPoint beschrieben. Die Definition des Koordinatensystems für den Gradienten sehen Sie in Abbildung 30.8.

Abbildung 30.8 Koordinatendefinition

Ein Gradient, der von links nach rechts verlaufen soll, beginnt im Punkt »0,0« und endet im Punkt »1,0«. Ein diagonaler Verlauf von rechts unten nach links oben beginnt im Punkt »1,1« und endet im Punkt »0,0«. Um den Effekt des Gradienten zu erfahren, betrachten Sie Abbildung 30.9, in der vier Rechtecke eine jeweils anders verlaufende Gradientenachse haben. Von links nach rechts sind die Farbverläufe wie folgt definiert:

<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<LinearGradientBrush StartPoint="0,1" EndPoint="0,0">

Listing 30.10 XAML-Code für Abbildung 30.9

Abbildung 30.9 Farbverläufe mit unterschiedlichen Gradientenachsen

Einen Farbverlauf zu produzieren bedeutet, mindestens zwei Farben anzugeben. Hierzu wird die Klasse GradientStop benötigt. Diese versetzt uns sogar in die Lage, beliebig viele Zwischenpunkte innerhalb des Farbverlaufs festzulegen. Der relative Punkt auf der Gradientenachse wird mit der Eigenschaft Offset angegeben, die zwischen dem Startpunkt »0« und dem Endpunkt »1« liegen muss. Für jedes GradientStop-Element wird mit Color die gewünschte Farbe in dem betreffenden Punkt beschrieben.

Sehen wir uns zuerst einen einfachen Farbverlauf von Weiß nach Grau an:

<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
  <GradientStop Offset="0.0" Color="White" />
  <GradientStop Offset="1.0" Color="Black" />
</LinearGradientBrush>

Listing 30.11 Einfacher Farbverlauf

Die Darstellung entspricht dann der des linken Quadrats in Abbildung 30.9.

Beeindruckender sind natürlich Farbverläufe mit mehreren Verlaufsänderungen. Dazu geben Sie die »Zwischenstopps« ebenfalls durch GradientStop-Elemente unter Nennung der Farbe an. Die Position des Zwischenstopps wird ebenfalls durch Offset beschrieben, was dann natürlich zwischen »0« (dem Startpunkt der Gradientenachse) und »1« (dem Endpunkt der Gradientenachse) liegen muss. Da Offset vom Typ Double ist, können Sie den Zwischenstopp sehr präzise festlegen.

Im folgenden Listing sind zwei Zwischenstopps in den Farben Grau und Blau in dem ansonsten von Weiß nach Schwarz definierten Farbverlauf enthalten.

<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
  <GradientStop Offset="0.0" Color="White" />
  <GradientStop Offset="0.4" Color="Gray" />
  <GradientStop Offset="0.6" Color="Blue" />
  <GradientStop Offset="1.0" Color="Black" />
</LinearGradientBrush>

Listing 30.12 Komplexer Farbverlauf

In Abbildung 30.10 sehen Sie den Farbverlauf.

Abbildung 30.10 Mehrstufiger Farbverlauf

30.3.3 RadialGradientBrush

Die Klasse RadialGradientBrush ähnelt der zuvor beschriebenen Klasse LinearGradientBrush mit dem Unterschied, dass keine rechteckigen Grundrisse gefüllt werden, sondern runde.

Für die Angabe des Farbverlaufs benutzt man erneut die Klasse GradientStop. Auch hier werden die Koordinaten zwischen »0,0« und »1,0« angegeben und beziehen sich (zunächst) auf den Mittelpunkt des zu füllenden Objekts. Sie können den Bezugspunkt aber auch mit GradientOrigin beliebig verschieben. Mit »0.0, 0.0« befindet er sich wie bei einem rechteckigen Umriss in der linken oberen Ecke. Folglich wird der Punkt »0.5, 0.5« dem Mittelpunkt der Ellipse entsprechen.

Zur Verdeutlichung der Eigenschaft GradientOrigin werden wieder Farbverläufe von Weiß nach Blau beschrieben. Die vier XAML-Zeilen beschreiben die Kreise (besser: Kugeln), die in Abbildung 30.11 von links nach rechts zu sehen sind.

<RadialGradientBrush>
<RadialGradientBrush GradientOrigin="0.3, 0.3">
<RadialGradientBrush GradientOrigin="0.5, 0.5">
<RadialGradientBrush GradientOrigin="0.8, 0.8">

Listing 30.13 Die Eigenschaft »GradientOrigin« des »RadialGradientBrush«-Elements

Abbildung 30.11 Die Auswirkungen von »GradientOrigin«

Optisch erinnert die Ausgabe an die Bestrahlung durch einen Scheinwerfer. Mit weiteren Eigenschaften von RadialGradientBrush lässt sich der Lichtkegel nahezu beliebig einstellen. Es handelt sich dabei um die Eigenschaften RadiusX/RadiusY sowie um Center. Ohne lange Worte zu verlieren über den damit zu erzielenden optischen Effekt, schauen Sie sich bitte die beiden folgenden Abbildungen an, in denen verschiedene Eigenschaftseinstellungen gezeigt werden.

Die Eigenschaften »RadiusX« und »RadiusY«

<RadialGradientBrush RadiusX="0" RadiusY="0">
<RadialGradientBrush RadiusX="0.3" RadiusY="0.3">
<RadialGradientBrush RadiusX="0.6" RadiusY="0.6">
<RadialGradientBrush RadiusX="1.0" RadiusY="1.0">

Listing 30.14 XAML-Code der Abbildung 30.12

Abbildung 30.12 Die Auswirkungen der Eigenschaften »RadiusX« und »RadiusY«

Die Eigenschaft »Center«

<RadialGradientBrush Center="0.0, 0.0">
<RadialGradientBrush Center="0.3, 0.3">
<RadialGradientBrush Center="0.6, 0.6">
<RadialGradientBrush Center="1.0, 1.0">

Listing 30.15 XAML-Code der Abbildung 30.13

Abbildung 30.13 Die Auswirkung der Eigenschaft »Center«

30.3.4 TileBrush

TileBrush ist die abstrakte Basisklasse der drei Klassen DrawingBrush, ImageBrush und VisualBrush. Es bietet sich an, zunächst die wesentlichsten Fähigkeiten der Klasse TileBrush zu betrachten, um nachher nur noch einen Blick auf die spezifischen Möglichkeiten der Ableitungen zu werfen.

Mit TileBrush werden Muster erzeugt, die wiederholt auf der Oberfläche angezeigt werden. Das erinnert an Kacheln, wodurch sich auch die Bezeichnung der Klasse erklärt (»Tile«, zu Deutsch »Kachel«). Zur Ausgabe mehrerer Kacheln ist zumindest die Angabe der Eigenschaften TileMode und Viewport notwendig. Mit TileMode geben Sie an, ob Sie überhaupt Kacheln anzeigen wollen und in welcher Richtung. Per Vorgabe ist TileMode=Tile eingestellt. Damit werden die Kacheln in horizontaler und vertikaler Richtung auf die Fläche verteilt, mit TileMode=None wird keine Wiederholung des Brushes durchgeführt. Darüber hinaus gibt es mit FlipX, FlipY und FlipXY noch drei weitere Einstellungen. Mit FlipX wird die Brushes-Vorlage entlang der X-Achse gespiegelt, mit FlipY um die Y-Achse. Dass FlipXY gleichzeitig um beide Achsen spiegelt, werden Sie sich nun schon denken können.

Viewport dient der Einstellung des Versatzes und der Wiederholungsrate in X- und Y-Richtung. Sehen wir uns das an einem Beispiel an.

<Canvas Margin="10">
  <Rectangle Height="300" Width="350">
    <Rectangle.Fill>
      <ImageBrush Stretch="Fill" TileMode="Tile" ImageSource="Woman.jpg" 
                  Viewport="0, 0, 0.333, 0.5" />
    </Rectangle.Fill>
  </Rectangle>
</Canvas>

Listing 30.16 Das Element »ImageBrush«

Beim Anwenden eines Brushes auf eine Fläche kann es passieren, dass die Fläche zu klein ist oder nicht ganz ausgefüllt werden kann. Über die Eigenschaft Stretch wird festgelegt, wie der Brush die Fläche ausfüllt.

Die TileMode-Eigenschaft ist hier auf Tile eingestellt, so dass Bildwiederholungen möglich sind. Der Eigenschaft Viewport werden vier Zahlen übergeben: Die ersten beiden beschreiben den Versatz, die beiden letzten die Anzahl der Wiederholungen. Letztere beziehen sich auf die Gesamtfläche. Dabei entspricht der Wert »1.0« der Gesamtbreite bzw. -höhe. Mit einer Breitenangabe von 0.333 beträgt die Gesamtbreite einer Kachel ein Drittel der zur Verfügung stehenden Gesamtbreite. Analog hat die Höhenangabe »0.5« zur Folge, dass die Höhe einer Kachel die Hälfte der Gesamthöhe der Fläche beträgt. Das Bild wird demnach in der Breite dreimal angezeigt, in der vertikalen Richtung bilden sich zwei Reihen (siehe Abbildung 30.14).

Abbildung 30.14 Gekacheltes Bild

Um den Einfluss des Versatzes zu testen, genügt eine geringe Änderung der an Viewport übermittelten Werte:

<ImageBrush Stretch="Fill" TileMode="Tile" ImageSource="Woman.jpg" 
            Viewport="0.5, 0.33, 0.333, 0.5" />

Die Auswirkungen können Sie in Abbildung 30.15 deutlich sehen.

Abbildung 30.15 Der Einfluss der Eigenschaft »Viewport«

In den Listings wurde die Abmessung einer Kachel abhängig von der Gesamtbreite oder Höhe festgelegt. Soll die einzelne Kachel unabhängig von der Fläche gezeichnet werden, kann die Eigenschaft ViewportUnits auf Absolute gesetzt werden (die Vorgabe ist RelativeToBoundingBox). Dadurch wird es möglich, für die Breite und Höhe einer Kachel absolute Zahlen zu verwenden. Im folgenden Beispiel sind diese auf 120 x 160 festgelegt.

ViewportUnits="Absolute" TileMode="Tile" ImageSource="Woman.jpg" Viewport="0, 0, 120, 160" />

Zwei letzte Eigenschaften sollten an dieser Stelle ebenfalls erwähnt werden. Mit AlignmentX und AlignmentY kann die Startposition der ersten Kachel festgelegt werden. Beide Eigenschaften lassen die Einstellungen Left, Center und Right zu.

30.3.5 ImageBrush

Die Klasse ImageBrush zur Anzeige eines beliebigen Bildes haben wir bereits im letzten Abschnitt benutzt. Der Eigenschaft ImageSource teilen wir die Quelle des Bildes mit. Die Darstellung des Bildes kann mit Stretch beeinflusst werden. Die Eigenschaft ist vom Typ der gleichnamigen Enumeration Stretch, die vier Werte beschreibt.

Wie sich die Einstellungen auf die Darstellung eines Bildes auswirken, zeigt Abbildung 30.16.

Abbildung 30.16 Der Einfluss der Eigenschaft »Stretch«

30.3.6 VisualBrush

VisualBrush dürfte wohl das leistungsfähigste aller Brush-Elemente sein. Zur Füllung dienen VisualBrush alle die Elemente, die von Visual abgeleitet sind. Dazu gehören demnach neben Buttons und TextBoxen auch Bilder vom Typ Image.

Prinzipiell können Sie auf zwei Weisen den Inhalt eines VisualBrush-Elements erstellen:

• Sie weisen der Eigenschaft Visual ein neues Element zu.
• Sie verwenden ein bereits vorhandenes Element.

Mit VisualBrush lassen sich tolle Effekte erzielen. Hierbei kommen Eigenschaften ins Spiel, die wir bereits vorher angesprochen haben: Stretch, Opacity, Viewport und TileMode. Sie werden aber auch Eigenschaften finden wie Transform und RelativeTransform. Transformationen sind ein mächtiges Werkzeug der WPF und werden dazu verwendet, geometrische Objekte und UI-Komponenten zu manipulieren. Darunter ist zu verstehen, geometrische Objekte zu drehen, sie rotieren zu lassen, zu skalieren oder gar zu scheren.

Das Zusammenspiel von VisualBrush und Transformationen soll das folgende Beispielprogramm demonstrieren. Bevor wir uns dem XAML-Code widmen, sehen wir uns die Ausgabe des Beispielprogramms an.

Abbildung 30.17 Ausgabe des Beispielprogramms »VisualBrushSample«

// Beispiel: ..\Kapitel 30\VisualBrushSample
<Window ...
        Title="VisualBrushSample" Height="300" Width="400">
  <Grid>
    <StackPanel>
      <StackPanel.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Offset="0.0" Color="Black" />
          <GradientStop Offset="1.0" Color="Gray" />
        </LinearGradientBrush>
      </StackPanel.Background>
      <Image Margin="0,10,0,0" Source="Jeepney.jpg" Name="Jeepney" 
             Height="150" Width="200" Stretch="Uniform" />
      <Rectangle Height="80">
        <Rectangle.Fill>
          <VisualBrush Visual="{Binding ElementName=Jeepney}" 
                       Stretch="None" Opacity="0.6">
            <VisualBrush.RelativeTransform>
              <TransformGroup>
                <ScaleTransform ScaleY="-1.5" />
                <TranslateTransform Y="1" />
                <SkewTransform AngleX="-12" />
              </TransformGroup>
            </VisualBrush.RelativeTransform>
          </VisualBrush>
        </Rectangle.Fill>
      </Rectangle>
    </StackPanel>
  </Grid>
</Window>

Listing 30.17 Das Beispielprogramm »VisualBrushSample«

Irgendwo im XAML-Code muss die Komponente, die mit Effekten versehen werden soll, bereits definiert sein. In unserem Beispiel handelt es sich um das durch ein Image-Element beschriebene Bildchen. Die Eigenschaft Visual des VisualBrush-Elements wird an das Image gebunden und steht somit für effektvolle Manipulationen zur Verfügung. Gleichzeitig wird die Transparenz mit der Eigenschaft Opacity auf 60 % festgelegt.

Mit RelativeTransform leiten wir die Transformation mit relativen Koordinaten ein. Eine Transformation kann sich aus mehreren Einzeleffekten zusammensetzen. Um diese zusammenzufassen, wird ein TransformGroup-Element benötigt. Dieses fasst mehrere Elemente zusammen, deren Basis die Klasse Transform ist. Dazu gehören auch die Elemente TranslateTransform, ScaleTransform und SkewTransform. ScaleTransform skaliert das visuelle Element, TranslateTransform verschiebt es und SkewTransform beschreibt einen Neigungswinkel.

30.3.7 DrawingBrush

Das letzte Brush-Objekt, über das ich noch Worte verlieren könnte, ist DrawingBrush. DrawingBrush verwendet zum Füllen der Kacheln Grafiken. Man kann erheblichen Einfluss auf die Zeichnung nehmen, es bleiben fast keine Wünsche offen.

Der Inhalt selbst wird durch ein Drawing-Objekt beschrieben, das der gleichnamigen Eigenschaft zugewiesen wird. Mit DrawingGroup, GeometryDrawing, GlyphRunDrawing, ImageDrawing und VideoDrawing stehen gleich fünf verschiedene Drawing-Objekte zur Verfügung.

Es sei an dieser Stelle nur so viel gesagt: Der Aufwand ist enorm. Deshalb werden solche Brush-Objekte auch eher mit Tools wie beispielsweise Expression Blend erstellt. Im Rahmen eines Buches, das nicht nur speziell auf WPF eingeht, belassen wir es hier dabei. Sollten Sie irgendwann einmal beabsichtigen, sich näher mit dem DrawingBrush beschäftigen zu wollen, steht Ihnen zahlreiche spezielle Literatur zur Verfügung.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.