Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 7 - Programujeme pro Windows 8 - Vlastní styly v XAML

V minulé lekci, Programujeme pro Windows 8 - Práce se soubory, 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 - Windows 10 aplikace v C# .NET

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 - Windows 10 aplikace v C# .NET

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 - Windows 10 aplikace v C# .NET

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.

V příštím díle, Základní kontrolky UWP, se vrhneme na popis XAML kontrolek univerzálních Windows aplikací.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Předchozí článek
Programujeme pro Windows 8 - Práce se soubory
Všechny články v sekci
Windows 10 aplikace v C# .NET
Přeskočit článek
(nedoporučujeme)
Základní kontrolky UWP
Článek pro vás napsal Petr Nymsa
Avatar
Uživatelské hodnocení:
8 hlasů
Autor se věnuje programování v C# a celkově se zajímá o .NET technologie. Působí jako Microsoft Student Partner.
Aktivity