Úvod do WPF štýlov

Ak pochádzate z oblasti vývoja pre web, používaním HTML a CSS tak si skoro uvedomíte že XAML je ako HTML: Používaním tagov, definujete štruktúru rozloženia Vašej aplikácie. Môžete si jednotlivé elementy prispôsobiť podľa svojich predstáv, používaním nastavení prvku ako Popredie, veľkosť fontu a tak ďalej, tak ako viete lokálne nastaviť štýl Vaších HTML tagov.

Ale čo v prípade ak chcete použiť to isté nastavenie veľkosti fontu a farby na troch rôznych prvkoch TextBlock? Môžete nakopírovať potrebné nastavenia pre každé z nich, ale čo v prípade ak sa z troch prvkov stane 50, rozložených v niekoľkých oknách? A čo v prípade ak si uvedomíte že veľkosť fontu mala byť 14 namiesto 12?

WPF poskytuje štýly, čo je pre XAML to čo je CSS pre HTML. Používaním štýlov, môžete zoskupiť skupinu nastavení a prideliť ich špecifickým prvkom, alebo všetkým prvkom špecifického druhu, a ako v CSS, štýl môže dediť z iného štýlu.

Príklad základného štýlu

O všetkých detailoch sa budeme rozprávať o mnoho viac, ale pre túto úvodnú kapitolu, Vám chcem ukázať základný príklad ako používať štýly:

<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>

Pre resources môjho StackPanel, zadefinujem Style. Používam TargetType nastavenie aby som povedal WPF že tento štýl bude použitý od tohto momentu. Všetky prvky TextBlock v odstavci (StackPanel), a potom štýlu pridám dva Setter elementy. Elementy Setter sa používajú na nastavenie konkrétnych nastavení pre cieľové prvky, v tomto príklade Foreground a FontSize nastavenia. Property nastavenie povie WPF ktoré nastavenie chceme nastaviť, a Value (hodnota) nastavenie definuje požadovanú hodnotu.

Všimnite si že posledný TextBlock je modrý namiesto šedej. Urobil som to aby som Vám ukázal že aj keď prvok môže mať štýl z nastaveného štýlu, tak môžete lokálne tento štýl pozmeniť - hodnoty prvku zadefinované na priamo majú stále prednosť pred hodnotami štýlu.

Súhrn

WPF štýly umožňujú jednoducho vytvárať špecifický vzhľad a potom ho aplikovať na niekoľko prvkov, a aj keď tento prvý príklad bol lokálny, v ďalších kapitolách Vám ukázať ako vytvárať globálne štýly.