Expression Blend - Úprava šablony tlačítka, 2. díl
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
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       22 106×

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 NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

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ý