7. díl - Programujeme pro Windows 8 - Vlastní styly v XAML

C# .NET Windows Store Aplikace Programujeme pro Windows 8 - Vlastní styly v XAML

V minulém díle jsme si popsali hlavní způsoby ukládání dat aplikace. Dnes se podíváme na vlastní stylování komponent.

V předešlích dílech jsme sem tam již nakousli vlastní stylování komponent. Pojďme si nyní podrobněji popsat jakým způsobem můžeme komponenty stylovat.

  • Lokálně
  • V Page.Resources
  • V externím souboru

Možnosti jsou tedy shodné s možnostmi stylování webů (CSS).

Co lze stylovat ?

To záleží na komponentě kterou používáme. Obecně platí že lze stylovat

  • Vlastnosti komponenty
  • Animace (Triggery)

V dnešním díle si probereme tři možnosti zápisu a ostylujeme si nějakou komponentu. Příště se podíváme na zajímavější část, kterou jsou Triggery.

Lokální zápis

Lokální zápis znamená přímý zápis v komponentě. Vezmeme si například komponentu Button. Otevřete si starý projekt nebo si založte nový. Máme úplně prázdnou stránku a tradičně přidáme Grid do druhého řádku hlavního Gridu. Do něj vložíme komponentu Button. Tlačítku dáme nějaký Content například Klik.

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

Nyní mu můžeme změnit například barvu textu (Foreground) či pozadí (Background) a velikost fontu (FontSize). Doporučuji pro lepší míchání barev využívat Designer.

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

a výsledek:

Stylování tlačítka ve Windows 8 aplikaci

Tímto už vlastně stylujeme. Ovšem lokální zápis může být dvojí. Tento (podle mého pojmenování) je přímý zápis. Můžeme ho také zapsat jinak.

<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 jsme museli zapsat jako párový tag. Do něj jsme přidali Button.Style a dále už přímý zápis stylu Style. Style má vlastnost TargetType. Tato vlastnost udává pro co je styl určený. Jednotlivé vlastnosti komponenty zapisujeme pomocí Setter. Setter má vlastnosti Property a Value, tedy v překladu Vlastnost a přiřazená hodnota.

Vidíme, že druhý zápis je v našem případě zbytečně dlouhý. K čemu použít tento styl zápisu? Pro Triggery! A vlastnosti, které se musí více rozepsat. Ovšem o těch někdy později.

Styl v Page.Resources

Nevýhoda lokálního zápisu je snad jasná. Styly tvoříme proto (ve většině případů), abychom mohli tento nový vzhled použít vícekrát v aplikaci. S lokálním stylem to moc nedokážeme.

Celý styl můžeme přesunout do PageResources. Vyjměte tedy 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>. Styl je nyní přístupný v rámci této stránky. Button.Style smažte. Pokud jste vše udělali správně, styl by měl fungovat. Přidejte si ještě jeden Button

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

Nyní si pusťte aplikaci. Styl se aplikoval i na druhý Button.

Stylování tlačítka ve Windows 8 aplikaci

Proč?

TargetType a Jméno stylu

Styl jsme nastavili na TargetType typu Button. Nyní se aplikuje na všechny komponenty na stránce. Pokud stylu přidáme jméno, styl se aplikuje pouze na ty komponenty typu Button, které se na styl odvolávají.

Opět úplně stejné jako v CSS.

Přidejme tedy stylu jméno (podle konvencí by měl styl začínat velkým písmenem, budu se jich držet)

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

Styl jsme pojmenovali ButtonDevbook­Style. Nyní to prvnímu tlačítku nalinkujeme.

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

Nalinkování jsme nastavili pomocí Style a StaticResource

Nyní víte jak tvořit různé styly a jak je linkovat. Určitě by bylo dobré, kdyby styly mohli dědit z jiných stylů. A ono to lze!

BasedOn aneb dědičnost

Styly mohou od sebe dědit. To znamená, že si můžeme nadefinovat základní styl, který pokryje hrubý vzhled a další styly od něj budou dědit. Výhoda dědičnosti je zabránění zbytečně duplikátních kódů. Navíc, pokud něco změníte v rodičovském stylu, projeví se to i ve stylech, které od něho dědí.

Mějme tento styl pro TextBlock

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

Styl udává velikost fontu a rodinu písma. Následující styl bude dědit

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

Styl přidává barvu textu a váhu písma. Důležitým prvkem je BasedOn, které udává styl, z kterého dědíme. Samozřejmě funguje přepisování. Můžeme jakoukoliv vlastnost z parent stylu přepsat.

Vzhled aplikace mírně upravíme. Tlačítka přidáme do StackPanelu a dále přidáme dva TextBlocky. Po úpravě:

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

Spusťte si aplikaci. Měli by jste dosáhnout podobného výsledku

Ostylovaná Windows 8 aplikace

Externí zápis

Co když chceme styl používat po celé aplikaci ve všech stránkách ? Není problém, vytvoříme si externí slovník.

Do projektu si přidáme Resource Dictionary (Slovník zdrojů v překladu). Já si tyto styly vkládám do složky Common. Klikněte myší na složku Common pravým tlačítkem a zvolte Add->New Item->Resource Dictionary. Do tohoto slovníku si můžeme vkládat různé zdroje (Styly,DataTem­plate,...). My si tam přesuneme naše styly. Po přesunutí nám aplikace nepůjde zkompilovat. Stránky ještě neznají cestu k našemu novému slovníku.

Otevřete si App.xaml a k řádku

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

přidejte ještě náš slovník

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

Aplikaci spusťte. Vše funguje jak má. Zkuste si přidat druhou stránku a tam aplikujte naše nové styly. Jak je vidět, styly jsou přístupné globálně.

StandardStyles

Hned ze začátku seriálu jsme si popisovali soubory, které se nám připraví. Jedním z nich je soubor StandardStyles. Je to obří slovník stylů. Nabízí různé styly pro komponenty jako Button, TextBlock, TextBox,AppBar,... Spousta z toho je zakomentovaná.

Když si spustíte téměř jakoukoliv Windows 8 aplikaci, uvidíte, že tlačítka mají kulatý tvar se symbolem. Tento symbol je pomocí rodiny Segoe UI Symbol (seznam naleznete zde). Abychom si ušetřili práci se stylováním kulatého tlačítka, 90% těchto symbolů už je předpřipravených. Stačí odkomentovat a použít.

Přepisování

Ještě se hodí říct jednu věc na konec. Pokud aplikujeme styl na komponentu, libovolnou vlastnost můžeme lokálně přepsat.

Přátelé to by bylo pro dnešní díl vše. V příloze máte dnešní výsledek našich pokusů.

Budu se těšit na komentáře a dotazy.


 

Stáhnout

Staženo 183x (254.72 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal Petr Nymsa
Avatar
Autor se věnuje programování v C# a celkově se zajímá o .NET technologie. Působí jako Microsoft Student Partner.

Jak se ti líbí článek?
Celkem (4 hlasů) :
55555


 


Miniatura
Všechny články v sekci
C# Windows Store aplikace

 

 

Komentáře

Avatar
fidko.tomas
Člen
Avatar
fidko.tomas:

Clanok sa mi paci, ale uz by to chcelo clanok venovany teme async a await ... :) Inak palec hore ;)

 
Odpovědět 6.11.2013 9:51
Avatar
lazenska.wewerka:

Zdarec! Narazil jsem na takový problém.. Když vyrobím vlastní styl, kterému nastavím TargetType="Tex­tBlock", tento styl se mi aplikuje i na všechny Buttony. Neví někdo prosím proč a jak to napravit? Díky

 
Odpovědět 28. listopadu 20:45
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na lazenska.wewerka
Petr Nymsa:

Pošli prosím fragment kódu, takhle mě nenapadá chyba

Odpovědět 28. listopadu 22:49
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
lazenska.wewerka:

Je to zvláštní, včera se mi to ještě podařilo nasimulovat i u nového projektu, ale dneska to funguje korektně.
Nic méně u projektu, o který mi jde, mám styl definovaný takto:

<Application x:Class="Paludarko_1_1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Paludarko_1_1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Blue"/>
        </Style>
    </Application.Resources>
</Application>

A s textBlockama se mi nastavují i tlačítka. Divný taky je, že v disigneru to ještě vypadá ok, ale když pak projekt spustím, mám ostylovaný i tlačítka..

 
Odpovědět 29. listopadu 15:13
Avatar
Odpovídá na Petr Nymsa
lazenska.wewerka:

Tak jsem s tím ještě malinko pohnul. Zjistil jsem, že pokud styl vytvořím v Application.Re­sources, funguje to blbě, jak jsem popsal nahoře. Pokud ale styl vytvořím ve Window.Resources, je to oK..

 
Odpovědět 29. listopadu 16:06
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.