TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Budeme pokračovat v tvorbě nového tlačítka; vzhled už máme, dnes doděláme reakce na události, animace a možnost přidání popisku na tlačítko.
Začneme tím, že si přejmenujeme prvky v šabloně z nejasných názvů „Border, Border, …“ na něco srozumitelnějšího. První Border v Gridu přejmenujeme třeba na záře (můžete s diakritikou nebo bez, jak chcete). Druhý Border přejmenujeme na lesk.
Pokud chcete navázat na minulý díl, ale nepostupovali jste podle něj, můžete si stáhnout kompletní řešení v takovém stavu, v jakém bylo na konci minulého dílu. Vše potřebné je na stažení na TÉTO adrese.
Záři chceme schovat, dokud přes tlačítko nepřejede myš, proto zvolíme Border s názvem záře a v Properties nastavíme Opacity na 0% (viditelnost na 0%). Později toho využijeme při animování.
Jednou z věcí, které naše tlačítko ale pořád nedělá, je zobrazování nějakého obsahu, tedy textu. Za tímto účelem nyní přidáme ContentPresenter, což je kontrola speciálně ve WPF na zobrazování obsahu. Otevřeme Asset Library (dvě vodorovné šipky úplně dole v panelu nástrojů) a najdeme ContentPresenter. Pokud nemáte, nastavte Grid jako vstupní bod (žlutý rámeček kolem něj…) a vložte do něj ContentPresenter.
Na tlačítku se objeví text Button, ale zarovnaný ne úplně podle našich představ – nastavíme jeho Properties podle obrázku (text bude přesně uprostřed tlačítka).
Nelekejte se malé velikosti ContentPresenteru, automaticky se přizpůsobuje velikosti svého obsahu (teď tedy těsně obepíná text Button).
Nakonec chceme text „posadit“ mezi záři a lesk. Stačí jen kliknout na ContentPresenter pravým tlačítkem, zvolit Order a pak Send Backward.
To bychom měli jednu věc hotovou, teď je čas na animace. Něco o nich už znáte z mého staršího článku, dnes ale využijeme několik událostí navíc. Nahoře v paletce Triggers zvolíme „+ Property“, což vytvoří nový spouštěč (trigger) při změně zadané vlastnosti. V současné verzi Blendu je výchozí hodnota „IsCancel = False“, ale je dost možné, že se časem bude měnit. Podmínku pro aktivaci nastavíme na „target-element.IsMouseOver=True“. Jinými slovy chceme vyvolat animaci, kterou za chvíli vytvoříme při najetí myší na tlačítko (tzv. hover efekt).
Když svisle roztáhneme Triggers paletku, objeví se před námi dvě položky, „Actions when activating“ a „Actions when deactivating“, tedy co se má stát při nastavení vlastnosti (v našem případě IsMouseOver) na True, respektive na False. Klikněte na ikonku „+“ vedle „Actions when activating“. Po provedení se objeví dialogové okno stejné jako na obrázku níže. Jelikož chceme vytvořit novou časovou osu, klikneme na OK a pokračujeme dále.
Objeví se známé prostředí pro tvorbu animací z článku o animacích, takže dnes už nebudu tento postup podrobně popisovat. Budeme chtít animovat přechod z 0% na 100% vlastnosti Opacity u objektu záře. Přesuňte se na čas zhruba 0,3 vteřiny, zvolte záři a nastavte její Opacity na 100%. To je u této animace vše, nyní potřebujeme nastavit opačnou animaci – ze 100% na 0%, když myš odjede z tlačítka.
Podle obrázku klikneme na šipečku vedle ikony „+“ a klikneme na Duplicate (vytvoří kopii naší animace).
Teď klikneme na tu samou šipku, ale zvolíme Reverse (obrátí animaci). Nahoře v Triggers zvolíme událost „IsMouseOver = True“, „Actions when activating“ už máme nastavené, takže klikneme na znak „+“ vedle „Actions when deactivating“ a nastavíme na „Storyboard1_Copy.Begin“ (pokud jste neměnili název animace).
Už chceme přidat jen jeden trigger, který bude řešit událost stisknutí tlačítka. V panelu Triggers opět klikneme na „+ Property“, výchozí „IsCancel“ změníme na „IsPressed=True“ (ke spuštění této události dojde po kliknutí uživatele na tlačítko). Nebudeme dělat žádnou animaci na časové ose - nastavíme jen, aby se při kliknutí v tu samou chvíli změnilo několik vlastností.
Jako první chceme, aby při kliknutí zmizela záře – zvolte ji a její vlastnost Visibility nastavte na Hidden (viditelnost - skrytá). Poté snížíme úroveň lesku – nastavíme jeho vlastnost Opacity na 40%. A nakonec nastavíme, aby pozadí tlačítka bylo méně průhledné. Zvolte druhý Border shora (je to ten, který má Alpha channel nastavený na 50%) a jeho Alpha channel nastavte na 80%.
A jsme téměř u konce! Zbývá jen kliknout na „Scope Up“ tlačítko (viz obrázek), které nás vezme zpět na úroveň návrhu celé aplikace.
Pokud napíšete nějaký popisek na tlačítko, bude špatně čitelný, protože výchozí barva textu je černá a tlačítko samo o sobě je dost tmavé. Pomocí nastavení vlastnosti Foreground na tlačítku na bílou barvu se tohoto neduhu zbavíme.
Nyní můžeme aplikovat šablonu na jakékoliv tlačítko, které přidáme na pracovní plochu. Umístěte na plochu nějaká tlačítka, na jedno klikněte pravým tlačítkem myši, zvolte Edit Control Parts (Template) > Apply Resource > MojeTlacitko.
Konečně máme hotovo. Gratuluji všem, kteří vydrželi až do konce a doufám, že se vám tento miniseriál líbil a přinesl něco málo nových znalostí. Na závěr malá ukázka toho, co jsme spolu stvořili, a pod ní odkaz na zazipovaný projekt.
Kompletní zdrojové kódy jsou ke stažení ZDE.
