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

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

 

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

Google       Google       23. 10. 2008       21 949×

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.

Reklama
Reklama

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.

×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.

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 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.

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

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ý