Tutorial: GradientBrushs in WPF Styles einbinden

Über Styles könnt Ihr zentral das Erscheinungsbild Eurer Controls steuern beziehungsweise festlegen.

Hierbei könnt Ihr Properties einfache Werte oder auch komplexere Parameter zuweisen, die dann von den Controls umgesetzt werden.

So kann zum Beispiel auch ein Farbverlauf mit GradientBrushs in ein Style eingebunden werden, der für manch einen WPF-Beginner allerdings bereits schon eine kleine Hürde darstellen kann.

Wie dies geht will ich Euch in diesem Tutorial demonstrieren.

Mit Styles lassen sich wie bereits gesagt in WPF Property-Defintionen von Controls (genauer genommen Dependency Properties) bequem auslagern.

Dies könnt Ihr mit dem Auslagern von Designregeln mit CSS vergleichen, wobei die Styles nicht in einer externen Datei liegen sondern als logische Resource hinterlegt werden.

In dem folgenden XAML-Code-Beispiel definiere ich einen allgemeinen Style unter Window.Resources, damit mir der Style im gesamten Fenster zur Verfügung steht.

Damit ich den Style auch gezielt nutzen kann, gebe ich ihm einen Key.

<Style.Setters>
<Setter Property="Control.Foreground" Value="White"></Setter>
</Style.Setters>

Wollen wir diesen Style nun auf einen WPF-Button anwenden, dann gebe ich unter Style meine statische Resource „back“ als Quelle an.

<button style="{StaticResource back}">
Buttontext bla bla bla
</button>

Es ist auch möglich einen Style festzulegen, der nur auf bestimmte Controls angewendet werden darf.

Hierfür gibt man noch zusätzlich einen TargetType an.

<Style.Setters>
<Setter Property="Control.Foreground" Value="White"></Setter>
</Style.Setters>

Wenn Ihr in diesem Fall den Key weg lasst, dann wird der Style einfach auf alle Controls dieses Typs angewendet.

Kommen wir nun zu unserem Farbverlauf.

In meinem Beispiel erzeuge ich einen linearen Farbverlauf mit einem LinearGradientBrush, der einen Farbverlauf von oben (schwarz) nach unten (rot) zeichnet.

Wie Ihr seht stehen wir nun vor einem kleinen Problem: Bei der Styledefinition wird unter Setter Property immer ein Value zu einer Property angeben, aber bei einem Farbverlauf haben wir mehrere Values.

Damit wir nun unseren LinearGradientBrush in unseren Style einbinden können habe ich den GradientBrush einfach mit einem Key versehen, auf den wir dann in unserem Style anstelle eines echten Wertes verweisen können. Der ganze XAML-Code meiner rechten Abbildung sieht dann wie folgt aus:

<Style.Setters>
<Setter Property="Control.Background" Value="{StaticResource Verlauf}">
</Setter>
</Style.Setters>

<Style.Setters>
<Setter Property="Control.Background" Value="{StaticResource Verlauf}">
</Setter>
<Setter Property="Control.Foreground" Value="White"></Setter>
</Style.Setters>

Da der Style für Grid kein x:key hat, wird der Style automatisch auf alle Grids angewendet.


Button mit universellem Style x:key=back


Button ohne Style

Wie Ihr seht müsst Ihr einfach nur dem Verlauf einen Key zuweisen, den Ihr wiederum beim Style als Value nutzt.

Ich hoffe Euch hat dieses Beispiel gefallen:-)