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
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
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 087×

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 V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

Už na konci měsíce může zůstat část Čechů bez televizního signálu. Vypínání stávající sítě začne již 27. listopadu v Praze a středních Čechách a do poloviny roku 2020 čeká přechod na nový standard pozemního digitálního televizního vysílání DVB-T2 celou republiku. K naladění nového televizního vysílání musí řada lidí nakoupit modernější zařízení, upravit antény nebo přejít na kabelové či internetové vysílání. 

Reklama
Reklama
Obrázek ke článku Zavádění Master Data Management v praxi

Zavádění Master Data Management v praxi

Předchozím článku jsme si vysvětlili, co jsou to Master Data, kdy je firma obvykle začíná řešit, v jakých krocích postupovat a jak nám může pomoci zvláštní nástroj pro evidenci Master dat. V tomto článku se podíváme na dvou příkladech, jak prakticky začít Master data řešit.

1. Nová Master Data, která potřebujeme někde spravovat
2. Zmapování existujících Master dat a určení jejich vlastníků

Obrázek ke článku 5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

Myslíte si, že máte skvělý nápad na byznys apku a znáte všechno, co potřebujete? Možná vám vývoj software na míru rozmluví Vláďa Skoumal, z firmy studio SKOUMAL vyvijející mobilní aplikace 5.11. 2019 v 18:00 v Impact Hub Praha nebo tento jeho článek.


 

Obrázek ke článku Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Celkem 66 % uživatelů zajímá rozšířená realita v oblasti gamingu. Mezi nimi je i 35 % těch, kteří jinak hry nehrají.
Pro téměř 50 % respondentů by bylo zajímavé zapojení virtuální objektů do reálného světa. Objekty by zůstaly tam, kde je při hře „umístili“.
Až 43 % uživatelů láká využití rozšířené reality ve sportu

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