Expression Blend - Úprava šablony tlačítka, 1. díl
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Expression Blend - Úprava šablony tlačítka, 1. dílExpression Blend - Úprava šablony tlačítka, 1. díl

 

Expression Blend - Úprava šablony tlačítka, 1. díl

Google       Google       3. 10. 2008       25 571×

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.

Reklama
Reklama

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.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

3 názory  —  3 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Jakub KottnauerJakub studuje informatiku na FIT ČVUT, jeho oblíbenou platformou je .NET.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý