Úvod do stylů WPF

Pokud pocházíte ze světa vývoje webových aplikací, a pracujete s HTML a CSS, rychle pochopíte, že XAML je velmi podobný HTML: Strukturální rozložení aplikace definujete pomocí značek. Můžete dokonce vytvořit své vlastní prvky vypadající určitým způsobem, pomocí vestavěných vlastností, jako jsou Foreground, FontSize a tak dále, a stejně tak můžete místně měnit styl pomocí značek HTML.

Ale co se stane, když chcete použít přesně stejnou velikost písma a barvu na třech různých ovládacích prvcích TextBlock? Můžete zkopírovat / vložit požadované vlastnosti pro každý z nich, ale co se stane, když tři ovládací prvky se změní na 50 ovládacích prvků, rozprostřené přes několik oken? A co se stane, když si uvědomíte, že velikost písma by měla být 14 místo 12?

WPF zavádí styling, což je v XAML to, co CSS v HTML. Pomocí stylů můžete seskupit sadu vlastností a přiřadit je ke konkrétním ovládacím prvkům nebo všem ovládacím prvkům určitého typu stejně, jako v CSS může dědit styl z jiného stylu.

Jednoduchý, základní příklad

Jistě, o všech podrobnostech budeme hovořit mnohem více, ale pro tuto úvodní kapitolu, vám chci ukázat velmi jednoduchý příklad, který používá styling:

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

Pro zdroje mého StackPanelu si vytvořím styl. Používám vlastnost TargetType, který WPF říká, že tento styl by měl být aplikován na všechny ovládací prvky TextBlock v daném rámci (StackPanel), a pak přidám do stylu dva Setter prvky. Prvky Setter se používají k nastavení specifických vlastností pro cílové ovládací prvky, v tomto případě Vlastnosti Foreground a FontSize. Vlastnost Property říká WPF, na které vlastnosti chceme cílit a vlastnost Value definuje jejich požadovanou hodnotu.

Všimněte si, že poslední TextBlock je modrý namísto šedého. Udělal jsem to, abych vám ukázal, že i když může ovládací prvek získat stylování z určeného stylu, máte úplnou svobodu tento styl lokálně na ovládacím prvku přepsat - hodnoty definované přímo na ovládacím prvku mají vždy přednost před hodnotami stylu.

Shrnutí

Díky WPF stylům je velice jednoduché vytvořit specifický vzhled a pak ho používat v několika prvcích, a zatímco tento první příklad byl pouze lokální, v dalších kapitolách vám ukážu jak vytvořit globální styly.