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

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

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

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

Google       Google       3. 10. 2008       28 532×

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
Jakub studuje informatiku na FIT ČVUT, jeho oblíbenou platformou je .NET.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý