7. diel - Programujeme pre Windows 8 - Vlastné štýly v XAML

V minulej lekcii, Programujeme pre Windows 8 - Práca so súbormi , sme si popísali hlavné spôsoby ukladania dát aplikácie. Dnes sa pozrieme na vlastné štýlovanie komponentov.

V predošlých dieloch sme sem tam už načali vlastné štýlovanie komponentov. Poďme si teraz podrobnejšie popísať akým spôsobom môžeme komponenty stylovať.

• lokálne
• V Page.Resources
• V externom súbore

Možnosti sú teda zhodné s možnosťami štýlovanie webov (CSS).

Čo možno stylovať?

To záleží na komponente ktorú používame. Všeobecne platí že možno stylovať

• vlastnosti komponenty
• Animácie (Triggery)

V dnešnom diele si preberieme tri možnosti zápisu a ostylujeme si nejakú komponent. Nabudúce sa pozrieme na zaujímavejšie časť, ktorú sú Triggery.

Lokálne zápis

Lokálne zápis znamená priamy zápis v komponente. Vezmeme si napríklad komponent Button. Otvorte si starý projekt alebo si založte nový. Máme úplne prázdnu stránku a tradične pridáme Grid do druhého riadku hlavného Gridu. Do neho vložíme komponent Button. Tlačidlu dáme nejaký Content napríklad Klik.

<Button Content="Klik" HorizontalAlignment="Center" VerticalAlignment="Center" />

Teraz mu môžeme zmeniť napríklad farbu textu (Foreground) či pozadia (Background) a veľkosť fontu (FontSize). Odporúčam pre lepšie miešanie farieb využívať Designer.

<Button Content="Klik" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Red" Background="#FF4FC9EE" FontSize="50" />

a výsledok:

Týmto už vlastne štýlom. Ovšem lokálne zápis môže byť dvojaký. Tento (podľa môjho pomenovania) je priamy zápis. Môžeme ho tiež zapísať inak.

<Button Content="Klik" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Foreground" Value="Red" />
                        <Setter Property="Background" Value="#FF4FC9EE" />
            <Setter Property="FontSize" Value="50" />
                    </Style>
                </Button.Style>
            </Button>

Button sme museli zapísať ako párový tag. Do neho sme pridali Button.Style a ďalej už priamy zápis štýlu Style. Style má vlastnosť TargetType. Táto vlastnosť udáva pre čo je štýl určený. Jednotlivé vlastnosti komponenty zapisujeme pomocou Setter. Setter má vlastnosti Property a Value, teda v preklade Vlastnosť a priradená hodnota.

Vidíme, že druhý zápis je v našom prípade zbytočne dlhý. Na čo použiť tento štýl zápisu? Pre Triggery! A vlastnosti, ktoré sa musia viac rozpísať. Avšak o tých niekedy neskôr.

Štýl v Page.Resources

Nevýhoda lokálneho zápisu je snáď jasné. Štýly tvoríme preto (vo väčšine prípadov), aby sme mohli tento nový vzhľad použiť viackrát v aplikácii. S lokálnym štýlom to moc nedokážeme.

Celý štýl môžeme presunúť do PageResources. Vyberte teda tento kód

<Style TargetType="Button">
                       <Setter Property="Foreground" Value="Red" />
                       <Setter Property="Background" Value="#FF4FC9EE" />
                       <Setter Property="FontSize" Value="50" />
                   </Style>

a vložte ho do <Page.Resources>. Štýl je teraz prístupný v rámci tejto stránky. Button.Style zmažte. Ak ste všetko urobili správne, štýl by mal fungovať. Pridajte si ešte jeden Button

<Button Content="Play" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,180,0,0"/>

Teraz si pustite aplikáciu. Štýl sa aplikoval aj na druhý Button.

Prečo?

TargetType a Meno štýlu

Štýl sme nastavili na TargetType typu Button. Teraz sa aplikuje na všetky komponenty na stránke. Ak štýlu pridáme meno, štýl sa aplikuje len na tie komponenty typu Button, ktoré sa na štýl odvolávajú.

Opäť úplne rovnaké ako v CSS.

Pridajme teda štýlu meno (podľa konvencií by mal štýl začínať veľkým písmenom, budem sa ich držať)

<Style TargetType="Button" x:Key="ButtonDevbookStyle">
     ...

Štýl sme pomenovali ButtonDevbook­Style. Teraz to prvému tlačidlu nalinkuje.

<Button Content="Klik" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource ButtonDevbookStyle}" />

Pridanie odkazu sme nastavili pomocou Style a StaticResource

Teraz viete ako tvoriť rôzne štýly a ako ich linkovať. Určite by bolo dobré, keby štýly mohli dediť z iných štýlov. A ono to dá!

BasedOn aneb dedičnosť

Štýly môžu od seba dediť. To znamená, že si môžeme nadefinovať základné štýl, ktorý pokryje hrubý vzhľad a ďalšie štýly od neho budú dediť. Výhoda dedičnosti je zabránenie zbytočne paralelných kódov. Navyše, ak niečo zmeníte v rodičovskom štýle, prejaví sa to aj v štýloch, ktoré od neho dedia.

Majme tento štýl pre TextBlock

<Style TargetType="TextBlock" x:Key="TextBlockStyle">
     <Setter Property="FontSize" Value="50" />
     <Setter Property="FontFamily" Value="Segoe UI Print" />
</Style>

Štýl udáva veľkosť fontu a rodinu písma. Nasledujúci štýl bude dediť

 <Style TargetType="TextBlock" x:Key="RedBoldTextBlockStyle" BasedOn="{StaticResource TextBlockStyle}">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="FontWeight" Value="Bold" />
</Style>

Štýl pridáva farbu textu a váhu písma. Dôležitým prvkom je BasedOn, ktoré udáva štýl, z ktorého dedíme. Samozrejme funguje prepisovanie. Môžeme akúkoľvek vlastnosť z parent štýlu prepísať.

Vzhľad aplikácie mierne upravíme. Tlačidlá pridáme do StackPanelu a ďalej pridáme dva TextBlocky. Po úprave:

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
                <Button Content="Klik" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource ButtonDevbookStyle}" />
                <Button Content="Play" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <TextBlock Text="Devbook.cz" Style="{StaticResource TextBlockStyle}" />
                <TextBlock Text="Windows Store" Style="{StaticResource RedBoldTextBlockStyle}" />
 </StackPanel>

Spustite si aplikáciu. Mali by ste dosiahnuť podobného výsledku

Externé zápis

Čo keď chceme štýl používať po celej aplikácii vo všetkých stránkach? Nie je problém, vytvoríme si externý slovník.

Do projektu si pridáme Resource Dictionary (Slovník zdrojov v preklade). Ja si tieto štýly vkladám do zložky Common. Kliknite myšou na priečinok Common pravým tlačidlom a vyberte Add-> New Item-> Resource Dictionary. Do tohto slovníka si môžeme vkladať rôzne zdroje (Štýly, DataTemplate, ...). My si tam presunieme naše štýly. Po presunutí nám aplikácie nepôjde skompilovať. Stránky ešte nepoznajú cestu k nášmu novému slovníka.

Otvorte si App.xaml ak riadku

<ResourceDictionary Source="Common/StandardStyles.xaml"/>

pridajte ešte náš slovník

<ResourceDictionary Source="Common/OwnStyles.xaml"/>

Aplikáciu spustite. Všetko funguje ako má. Skúste si pridať druhú stránku a tam aplikujte naše nové štýly. Ako je vidieť, štýly sú prístupné globálne.

StandardStyles

Hneď zo začiatku seriálu sme si opisovali súbory, ktoré sa nám pripravia. Jedným z nich je súbor StandardStyles. Je to obrie slovník štýlov. Ponúka rôzne štýly pre komponenty ako Button, TextBlock, TextBox, AppBar, ... Veľa z toho je zakomentovaná.

Keď si spustíte takmer akúkoľvek Windows 8 aplikáciu, uvidíte, že tlačidlá majú guľatý tvar so symbolom. Tento symbol je pomocou rodiny Sego UI Symbol (zoznam nájdete tu). Aby sme si ušetrili prácu so stylovaním okrúhleho tlačidla, 90% týchto symbolov už je predpripravených. Stačí odkomentovať a použiť.

Prepisovanie

Ešte sa hodí povedať jednu vec na koniec. Ak aplikujeme štýl na komponent, ľubovoľnú vlastnosť môžeme lokálne prepísať.

Priatelia to by bolo pre dnešné diel všetko. V prílohe máte dnešnej výsledok našich pokusov.

Budem sa tešiť na komentáre a otázky.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.