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>
<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.
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>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Blue"/>
<GradientStop Offset="1" Color="LightBlue"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
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>
<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>
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.
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>
<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>
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>
<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>
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>
<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>
