Site logo
Site logo
Programmieren aus Leidenschaft
Programmieren aus Leidenschaft

Brushes Teil 1


Mit Brushes, zu deutsch Pinsel, bezeichnet man Objekte, die benutzt werden können um andere Objekte und auch Steuerelemente mit Farben oder Farbverläufen zu füllen. Das funktioniert sowohl mit der Objektfläche, als auch mit dessen Umrahmung. Aus den vorherigen Beispielen kennen Sie die "Fill"-Eigenschaft, die auch nichts anderes als ein Brush ist.
<Rectangle Margin="15" Fill="Blue"></Rectangle>
Die Fill Eigengeschaft bestimmt einen SolidColorBrush, einen einfarbigen Pinsel. Eine alternative Schreibweise wäre in diesem Fall:
<Rectangle Margin="15">
<Rectangle.Fill>
   <SolidColorBrush Color="Blue"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
Das Resultat ist das Gleiche, nur etwas mehr Programmcode.

Der SolidColorBrush ist der einfachste der möglichen Pinsel. Das Objekt wird gleichmäßig mit einer Farbe gefüllt. Viel interessanter ist hingegen ein Farbverlauf mit zwei oder mehr Farben. So einen Pinsel kann man durch einen LinearGradientBrush deklarieren.
<Rectangle Margin="15">
   <Rectangle.Fill>
   <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
      <GradientStop Offset="0" Color="Blue"/>
      <GradientStop Offset="1" Color="LightBlue"/>
   </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
stacks_image_53870A62-8D61-4102-AA81-FA86579FBAB9
Sie müssen die Größe des Farbverlaufs weder in Pixel noch in logischen Einheiten festlegen, denn dies würde zur Folge haben, dass Sie bei jeder Größenänderung des Objektes auch den Farbverlauf neu berechnen müssten. WPF nimmt ihnen diese Arbeit ab, indem der Brush zwei Positionsangaben relativ zur Objektfläche erwartet. Dabei geht man der Einfachheit halber davon aus, dass ein Objekt genau eine Einheit hoch und eine Einheit breit ist. Der Punkt 0,0 ist die linke obere Ecke und der Punkt 1,1 die rechte untere Ecke. StartPoint und EndPoint definieren also die Endpunkte des Farbverlaufes und dadurch auch die Ausrichtung. StartPoint="0,0" und EndPoint="0,1" bewirken einen vertikalen Farbverlauf StartPoint="0,0" und EndPoint="1,0" einen horizontalen Farbverlauf. StartPoint="0,0" und EndPoint="1,1" erzeugen einen diagonalen Farbverlauf von der linken oberen Ecke in die rechte untere Ecke. Natürlich ist es auch möglich das ein Farbverlauf ausserhalb des sichtbaren Rechtecks beginnt, bzw. endet. Die nächsten beiden Beispiele werden das verdeutlichen.
<Rectangle Margin="15">
   <Rectangle.Fill>
   <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
      <GradientStop Offset="0" Color="Blue"/>
      <GradientStop Offset="0.5" Color="Green"/>
      <GradientStop Offset="1" Color="Red"/>
   </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
stacks_image_112876F8-FDD3-49B6-A3D7-A15A1E1D5966
Wie man hier sehr schön sehen kann befindet sich die grüne Farbe mit einem Offset von 0,5 genau in der Mitte des Rechtecks. Die Werte der GradientStop Offset bestimmen aber eine Position relativ im Farbverlauf und nicht relativ zur Rechteckfläche. Im diesem Beispiel macht das aber keinen Unterschied.

Jetzt wird dem Offset der blauen Farbe der Wert von -1 zugewiesen. Dies beeinflusst nur die Farbverteilung, Grün bleibt trotzdem weiterhin in der Mitte des Rechtecks, denn der Verlauf wird über StartPoint="0,0" und EndPoint="1,0" definiert.
<Rectangle Margin="15">
   <Rectangle.Fill>
   <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
      ;<GradientStop Offset="-1" Color="Blue"/>
      <GradientStop Offset="0.5" Color="Green"/>
      <GradientStop Offset="1" Color="Red"/>
   </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
stacks_image_9FBC5F61-BEC9-4190-A3C2-7905F49CAA2D
Will man den gesammten Farbverlauf verschieben, kann man dies durch Veränderung der StartPoint und EndPoint Werte erreichen.
<Rectangle Margin="15">
   <Rectangle.Fill>
   <LinearGradientBrush StartPoint="0.2,0" EndPoint="1.2,0">
      <GradientStop Offset="0" Color="Blue"/>
      <GradientStop Offset="0.5" Color="Green"/>
      <GradientStop Offset="1" Color="Red"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
stacks_image_15CF3E0F-E2BA-44A5-B99C-953893B0881D
Dabei darf man nicht den Fehler machen diese Werte als Endpunkte der Farbfüllung zu verstehen. Der Farbverlauf endet zwar an den angegebenen Werten, aber auch das restliche Rechteck wird eingefärbt. Sehr gut wird dies bei einer zweifarbigen Füllung mit einem sehr kleinen Verlauf deutlich.
<Rectangle Margin="15">
   <Rectangle.Fill>
   <LinearGradientBrush StartPoint="0.4,0" EndPoint="0.6,0">
      <GradientStop Offset="0" Color="Blue"/>
      <GradientStop Offset="1" Color="Green"/>
   </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
stacks_image_3C40D410-414E-41BD-B1C1-24FCED8AF357