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

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

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

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

Google       Google       23. 10. 2008       24 461×

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
Jakub studuje informatiku na FIT ČVUT, jeho oblíbenou platformou je .NET.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý