Firemonkey Custom styly

vložil Radek Červinka 9. března 2012 21:50

FireMonkey umožňuje definovat upravený styl, který lze pak použít jen pro několik komponent, přičemž zbývající zůstanou v původním stylu.

Ukáži variantu příkladu co ukazoval Pawel, tj. upravené tlačítko. Pavel upravoval pouze barvy, já přidám ikonu. Doporučuji začít úvodem do Firemonkey co jsem napsat dříve (kde je patrné, že nic není pevně definované) a FireMonkey animacemi, případně článkem o efektech (ale to není až tak důležité) taktéž z minula.

Styl

Na obrázku je vidět tři tlačítka TButton, přičemž ty dvě s ikonou mají jen jiný styl.

Začneme vložením normálního tlačítka na formulář a přes popup menu vybereme položku Edit Custom Style….

Definice stylu

Po jeho stisku FireMonkey přidají komponentu TStyleBook, přiřadí ji formuláři a spustí jeho editor, ve kterém je předefinovaný styl tlačítka se jménem Button1Style1. Název stylu je předgenerován dle jména komponenty (s odstraněním T a přidáním Style).

Definice stylu

Ten Image1 jsem tam přidal až já. Ale pokud si to probereme, tak tlačítko se skládá z několika elementů (pod jménem Shapes na paletě komponent) a z efektů a nebo animací.

Shapes

Pokud se tedy podíváme na tlačítko, tak v první úrovni je to nějaký Rectangle (pozadí), Text a GlowEffect, který způsobuje to zvýraznění kolem při focusu (taky má nastaven Trigger na IsFocused=true). Tedy každý element má svoje property a ty se dají nějak nastavovat - napřiklad v případě Glow se nastavuje barva (může být i animací - viz. minule) a spouštěč (tj. uvedený Trigger). Pro zopakování: ta malá ikona filmu v Object Inspectoru naznačuje možnost použití animace.

Glow

Pozadí se dále skládá ze dvou Rectangle (obrysy - oddělená Padding), dvou TColorAnimation (zvýraznění při mouse over a zpět) a TInnerGlowEffect, který je aktivní, když je na tlačítko kliknuto (Trigger je IsPressed=true). Tím jsem doufám dostatečně vysvětlil proč efekty a animace. Je to takové LEGO. Např. lze pod přidaný TImage přidat TInnerGlowEffect (tj. Glow effect dovnitř) a při trigger IsMouseOver=true se tak pěkně "glowne" obrázek (viz. obrázek).

Glow

Tj. přidáme TImage, nastavíme mu Align (alLeft) a Bitmap na nějakou ikonu (v mém případě +) a jelikož má původní element text Align na alClient, tak se nám to pěkně urovná. Případně přidáme uvedený InnerGlowEffect a nezapomeneme styl uložit (tlačítka nahoře designeru).

Jelikož jsem na začátku vybral editaci Custom Style (tj. lokálního stylu) a ne Default Style (tj. stylu tlačítka), musíme styl aplikovat (při Default style měníme přímo styl všech tlačítek). Vybereme požadované tlačítko (tlačítka) a do property StyleLookup napíšeme jméno stylu, tj. Button1Style1 (pro všechny tlačítka, která mají styl používat).

Styl můžeme kdykoliv upravit přes uvedenou komponentu StyleBook.

Přiznám se, že se mi flexibilita FireMonkey moc líbí.


Nabízíme Delphi školení a konzultace na různá témata, primárně ve Vaší firmě.

Tagy:

Komentování ukončeno

Naše nabídka

Partial English version.

MVP
Ing. Radek Červinka - Embarcadero MVP
profil na linkedin, Twitter:@delphicz

Nabízím placené poradenství a konzultace v oblasti programování a vývoje SW.
Dále nabízíme i vývoj speciálního software na zakázku.

Neváhejte nás kontaktovat (i ohledně reklamy nebo burzy práce).

Pokud chcete podpořit tento server libovolnou částkou, můžete použít PayPal. Moc děkuji.

Delphi Certified Developer

O Delphi.cz

Delphi je jediný moderní RAD nástroj podporující tvorbu nativních aplikací pro platformu Win32, Win64 , Mac OSX a na iPhone a Android (s výhledem na další platformy díky FireMonkey) na současném trhu (včetně Windows 8.1).

V současnosti je světová komunita přes dva miliónů vývojářů.

Delphi.cz je nezávislý portál pro uživatele Delphi. Portál není koncipován pro úplné začátečníky, i když i ti se zde nebudou nudit, ale spíše na programátory, kteří již něco znají a chtějí své znalosti dále rozvíjet a sledovat novinky.

Anketa

Poslední komentáře

Comment RSS