Introduction to WPF styles

Falls Sie aus der Welt der Web-Entwicklung kommen und schon einmal mit HTML und CSS gearbeitet haben, werden Sie schnell merken, dass XAML HTML sehr ähnlich ist: Es werden Tags benutzt um das strukturelle Layout der Applikation zu definieren. Sie können Ihren Elementen auch ein gewisses Aussehen über inline properties wie Foreground, Fontsize und so weiter, geben. Genauso wie Sie einen Style lokal in HTML setzen können.

Aber was passiert, wenn Sie die gleiche Schriftgröße und Farbe in 3 verschiedenen TextBlock Controls haben möchten? Sie können die gewünschten Eigenschaften kopieren und einfügen, aber was passiert wenn aus 3 Controls 50 werden, die sich über mehrere Fenster strecken? Und was passiert wenn Sie feststellen, dass es doch Schriftgröße 14, statt 12 sein soll?

WPF führt styling ein, welches für XAML wie CSS für HTML ist. Wenn Sie Styles benutzen können Sie Eigenschaften gruppieren und diese, spezifischen Controls oder allen Controls eines bestimmten Typs zuweisen und genauso wie in CSS kann ein Style von einem anderen Style erben.

Einfaches Style Beispiel

Wir werden noch viel mehr über all die Details reden, aber für dieses Einführungskapitel will ich Ihnen nur ein einfaches Beispiel zur Verwendung von Stilen zeigen:

<Window x:Class="WpfTutorialSamples.Styles.SimpleStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SimpleStyleSample" Height="200" Width="250">
    <StackPanel Margin="10">
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Gray" />
                <Setter Property="FontSize" Value="24" />
            </Style>
        </StackPanel.Resources>
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

In den Ressourcen zu meinem StackPanel wurde ein Style definiert. Die Eigenschaft TargetType sagt WPF, dass der festgelegte Stil auf ALLE TextBlock Controls im Bereich (StackPanel) angewendet werden soll. Weiterhin wurden zwei Setter Elemente im Stil genutzt. Die Setter Elemente werden genutzt um bestimmte Eigenschaften auf die Zielelemente zu übertragen. In diesem Fall die Foreground und FontSize Eigenschaften. Durch die Property Eigenschaft wird WPF mitgeteilt welche Eigenschaft verändert werden soll und die Value Eigenschaft legt den gewünschten Wert fest.

Beachte hier, dass der letzte TextBlock blau statt grau ist. Dies wurde mit Absicht gemacht um zu zeigen, dass obwohl ein zentral zugewiesener Stil benutzt wird, man die Möglichkeit hat den Stil lokal zu überschreiben. Werte die direkt auf einem Control definiert werden haben immer eine höhere Gewichtung als zentral bereitgestellte Stile.

Zusammenfassung

WPF Styles machen es sehr einfach ein spezifisches Aussehen zu kreieren und es für mehrere Controls zu verwenden. Zwar war dieses erste Beispiel sehr lokal, aber in den nächsten Kapiteln werde ich Ihnen zeigen, wie Sie einen globalen Style erstellen.