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.
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….
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).
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í.
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.
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).
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í.
RSS