TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Dnes nás čeká další z funkcí Blendu, které využijete téměř vždy při tvorbě kterékoliv aplikace. Tou je možnost úpravy výchozí šablony ovládacích prvků, nás bude zajímat konkrétně tlačítko. V první části uděláme kompletní vzhled tlačítka.
Každý ovládací prvek ve WPF má svojí šablonu neboli svůj výchozí vzhled. Šablonu můžeme upravit doslova jak se nám zachce, z obyčejného obdélníkového tlačítka můžeme udělat „něco“ ve tvaru hvězdy, nebo čehokoliv jiného – fantazii se meze nekladou. Šablona zároveň obsahuje i animace přiřazené k jednotlivým událostem (jak bude tlačítko vypadat, když na něj najedeme myší, nebo na něj klikneme). Díky tomu můžeme vytvořit naprosto originální ovládací prvky se vším všudy. Kdo je bude chtít využít, jen si je stáhne z internetu, importuje do projektu a bude je moct použít stejně jednoduše jako obyčejné tlačítko.
Dost bylo úvodních řečí, jdeme na to! Vytvoříme si nový projekt (WPF), kterému uděláme na pozadí nějaký hezký přechod (černá→bílá bude stačit). Jak se to dělá, byste měli vědět z článku o Hello World v Blendu. Pokud se nám gradient vytvořil zleva doprava, vezmeme nástroj Brush Transform (G) a s přechodem otočíme o 90 ° (držte klávesu Shift pro 15° skoky, však už to znáte).
Ještě si přechod trochu ozvláštníme přidáním několika jezdců v panelu barev (stačí kliknout někam do té lišty a jezdec se nám vytvoří, pro smazání jezdce ho uchopte a odtáhněte pryč). Nastavíme to podobně jako na obrázku:
To, co jsme teď udělali, bude tvořit jen pozadí okna, aby tam nebyla ta nudná bílá. Nyní přijde na řadu slibovaná úprava šablony. Někde v okně si vytvoříme tlačítko, pomocí nástroje Selection (V) na něj klikneme pravým tlačítkem myši, zvolíme Edit Control Parts (Template) → Create Empty.
Tato volba slouží k vytvoření úplně nové šablony tlačítka (za chvíli uvidíte, že jako základ dostaneme doslova „nic“). Kdybychom zvolili Edit a Copy, vzala by se nynější šablona a upravovali bychom tu.
Po kliknutí na Create Empty se před námi objeví toto okno:
Tím, že děláme šablonu, ve skutečnosti děláme nový resource soubor, který můžeme aplikovat na ostatní tlačítka. Položka Name je jasná, tam zadáme název resource souboru. Zajímavější část je „Define in“, máme na výběr „Application“ (resource bude dostupná v celé aplikaci, ve všech jejích souborech), „This document“ (bude dostupná jen ve vybraných částech programu) a nakonec máme možnost vytvořit i nový „Resource dictionary“ – tím by se nám šablona vytvořila v samostatném souboru, který pak můžeme šířit mezi ostatní lidi. Vyberte si, co vás momentálně zajímá, pro naše účely bude bohatě stačit volba „This document – Window: Window“.
Před námi se objevilo zmiňované „nic“ – jen prázdná mřížka (Grid). Všimněte si, že se změnilo i okýnko Objects and Timeline. Teď se totiž nacházíme ve stavu, kdy upravujeme jen samotné tlačítko, ke zbytku okna nemáme přístup. Do okna se zase vrátíme pomocí šipky vedle názvu šablony (viz obrázek) a z okna do úpravy tlačítka zase pravým kliknutím → Edit Control Parts → Edit Template (tentokrát nechceme už vytvářet novou, ale upravovat tu, kterou máme vytvořenou).
My zrovna ten výchozí Grid nechceme, takže ho smažeme a místo něj umístíme Border (také kontejner pro ovládací prvky, jen navíc okolo „nic“ dokáže nakreslit rámeček, navíc se do Borderu vejde jen jeden prvek!). Pokud tak není, nastavíme Width a Height v Properties na Auto, aby nám Border vyplňoval vždy celou plochu tlačítka. Kolem našeho tlačítka budeme chtít bílý rámeček, takže se zvoleným Borderem nastavte vlastnost BorderBrush na bílou. Aby byl ale vůbec vidět, musí mít nějakou tloušťku (výchozí stav je 0), proto nastavíme BorderThickness pro všechny 4 strany na 1. Hned o položku míň se nachází CornerRadius neboli zakulacení rohů, tam vyplníme 4,4,4,4 (stačí napsat jen jednou 4 a stisknout Enter).
Dvojím kliknutím aktivujeme náš Border (v Objects and Timeline bude kolem sebe mít žlutý rámeček), aby se další prvek vložil do něj. To, co do něj vložíme, bude další Border. První, co s ním uděláme, bude, že mu nastavíme částečně průhledné černé pozadí (zhruba 50%). Díky tomu dosáhneme takového „skleněného efektu“. Průhlednost se nastavuje pomocí položky A (Alpha Channel) u výběru barev.
Ještě nastavíme okraj tohoto Borderu, úplně stejně, jako jsme to udělali u toho prvního (tloušťka 1, zakulacení rohu na 4), jen ho uděláme černý.
Aktivujeme ten novější Border (dvakrát kliknout…), vložíme do něj Grid a uděláme ho aktivním.
V článku o animacích jsem řekl, že v Gridu můžeme udělat tabulku pomocí řádků a sloupců, tuhle možnost právě teď využijeme. Chceme totiž udělat do horní poloviny tlačítka přechod a díky Gridu si ho můžeme rozdělit na dva „řádky“. Zvolíme nástroj Selection (V), kolem tlačítka máme takové modré pruhy (jeden vlevo, jeden nahoře) a když do jednoho z nich najedeme se zvoleným Selection nástrojem, budeme moci vytvářet řádky a sloupce. Zhruba v polovině tlačítka vytvoříme hraniční čáru pomocí levého modrého pruhu.
Vezmeme opět nástroj Border a v horní polovině jeden uděláme, rozměrově jako je na obrázku:
Blend automaticky nastavil nějaké hodnoty odsazení (Margin) od okrajů Gridu, my ale chceme, aby Border vyplňoval celý horní řádek Gridu, proto je nastavíme na 0:
Border vyplníme barevným přechodem (vlastnost Background nastavíme na Gradient Brush) z černé do bílé. Pokud není, nástrojem Brush Transform ho nastavte tak, aby šel odshora dolů. Teď zvolíme levý jezdec přechodu (měla by to být černá), nastavíme ho na bílou a jeho Alpha hodnotu nastavíme na 60 %. Nakonec musíme nastavit zakulacení levého a pravého horního rohu Borderu, aby nám nepřesahoval (vlastnost CornerRadius nastavíme na 4,4,0,0).
Podobný zákrok uděláme i s pravým jezdcem – necháme mu bílou barvu a nastavíme jeho Alpha hodnotu na 20 %. Pozadí Borderu byste měli mít nastavené stejně jako na obrázku:
Když přejedete myší přes tlačítko na taskbaru ve Windows Vista, objeví se na něm taková modrá záře – tohoto efektu budeme chtít docílit teď.
Do posledního (také jediného) Gridu umístíme další Border. Chceme, aby vyplňoval celou plochu tlačítka, takže ho nastavíme podle obrázku:
Vyplníme ho přechodem, ale místo klasického lineárního použijeme kruhový (radiální). Na následujícím obrázku najdete, kde je a jak ho nastavit:
Oba jezdce jsou nastavené na barvu #FF7FCBFF (světlá modrá), jen levý má nastavený Alpha Channel na 70 % a pravý na 0 %.
Zvolíme nástroj Brush transform (G) a přechod roztáhneme, podobně jako na obrázku:
Opět nastavíme CornerRadius tohoto Borderu na 4,4,4,4, aby na sebe vše pasovalo. Chceme ale, aby se modrá záře objevila i za leskem na tlačítku. Proto klikneme pravým tlačítkem na nejnovější Border v Objects and Timeline, zvolíme Order → Send to Back.
Můžete stisknout F5 a podívat se, co jsme zatím udělali. Líbí? :-)
To je pro dnešek vše, provedl jsem vás celou tvorbou zbrusu nového Vista-like tlačítka, přičemž jsme si ukázali několik nových funkcí Blendu. Příště doděláme animace, reakce na události a přidáme možnost vůbec něco na tlačítko napsat.
