Slevový týden - Srpen
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.

2. Diel WPF - Príbehy

V minulom dieli sme si vysvetlili ako dynamicky pridávať a odoberať elementy za behu programu, dnes sa vrhneme na príbehy. V príbehoch sa dajú vytvárať jednoduché aj zložitejšie animácie. Ja začnem jednoduchú průhlednostní animácií, ktorá nám bude meniť priehľadnosť tlačidla pri nabehnutí myši.

Vytvorím si na to nový projekt, meno nie je dôležité. Ešte by som dodal, že pre príbehy použijem CustomControl, pretože je to pre začiatok jednoduchšie ako vytvárať potomka elementu.

Do projektu si teda pridáme nový -> UserControl a pre príklad si ho pomenujeme UserButton. Vytvoril sa nám objekt ktorý vzdialene pripomína prázdne okno. Tomuto objektu môžeme priradiť len jeden element, rovnako ako u okna. Ak chceme pridať do objektu viacerých elementov, využijeme na to Grid. Visual Studio s tým tak nejako počíta, že nám jeden element stačiť nebude, a tak nám objekt vygeneruje is GRID.

Príbehy cez XAML

Príbehy alebo ak chcete storyboardy idú vytvárať hneď dvoma rôznymi spôsobmi. Teraz si preberieme prvý spôsob a to je spôsob vytvárania cez XAML kód.

Už máme vytvorený UserButton, pridáme si do gridu ešte pridáme nejakú farbu, aby bolo vidieť, či animácie funguje alebo nie. Ja v tomto príklade použijem modrú farbu. Takže si do kódu gridu pridáme Background asi takto:

<Grid Background="Blue" Name="basicGrid">

Vytvorenie príbehu

Začneme s vytváraním príbehu. Ako prvý si rozmyslíme kedy sa bude spúšťať a podľa toho si vyberieme príslušný Event. Pre začiatok budeme meniť priehľadnosť pri nabehnutí myši, takže budeme potrebovať hneď dva eventy a to: MouseEnter a MouseLeave, Na zisťovanie takýchto eventov priamo v XAML kóde slúži Triggers. Tie dokážu zisťovať buď nejakú vlastnosť alebo spomínaný event.

<Grid Background="Blue" Name="basicGrid">
    <Grid.Triggers></Grid.Triggers>
</Grid>

Takto vyzerá predloha pre naše Triggery. Ako prvý si do Grid.Triggers pridáme EventTrigger, ktorý nám bude zabezpečovať event, ktorý mu ale oznámime cez vlastnosť RoutedEvent, asi takto:

<EventTrigger RoutedEvent="MouseEnter"></EventTrigger>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Vnútro tohto triggeru sa bude spúšťať len pri nabehnutí myši nad grid. Do tohto EventTriggeru si však nemôžeme rovno pridať príbeh, najskôr musíme programu nejako vysvetliť, že má príbeh začať, takže si ešte do EventTriggeru pridáme

<BeginStoryboard></BeginStoryboard>

Animácie

Teraz si môžeme napísať príbeh s animáciou alebo i viac animáciami súčasne. Zatiaľ využijem len jednu animáciu a tou bude DoubleAnimation. Tá nám dokáže plynule meniť Double hodnotu akú ju zadáme. Vo WPF sa už totiž takmer nepoužívajú Integer, ale vo väčšine prípadov je tu double (veľkosť okna, pozície prvkov, vlastnosti prvkov, ktoré obsahujú číselnú hodnotu, ...).

Budeme si vytvárať animáciu, ktorá potrvá jednu sekundu. K tomu nám slúži vlastnosť duration, ktorá sa zadáva vo formáte hh: mm: ss. Tiež ju nastavíme do akej hodnoty sa má animavoat. Na to máme vlastnosť To a budeme ju chcieť pri nabehnutí myši na 1. Posledné, čo nám zostáva nastaviť, je cieľ. Animácia totiž sama nespozná, že má animovať vlastnosť Opacity v prvku basicGrid. To urobíme cez Storyboard.Tar­getName a Storyboard.Tar­getProperty. Tým by sme mali všetky dôležité vlastnosti animácie i príbehu nastavené.

Teraz sa celý EventTrigger skopírujeme a vložíme pod neho. Zmeníme RoutedEvent na MouseLeave au DoubleAnimation zmeníme To na 0.5. Tým si zaistíme, že pri odsunutí myši z prvku sa nám bude znižovať Opacity až na polovicu. Celý Grid.Triggers bude teda vyzerať takto:

<!-- Najetí myši -->
<EventTrigger RoutedEvent="MouseEnter">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation Duration="00:00:01" To="1"
Storyboard.TargetName="basicGrid" Storyboard.TargetProperty="Opacity" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

<!-- Odjetí myši -->
<EventTrigger RoutedEvent="MouseLeave">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation Duration="00:00:01" To="0.5"
Storyboard.TargetName="basicGrid" Storyboard.TargetProperty="Opacity" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

Pred vyskúšaním budeme musieť urobiť ešte jednu vec, pretože vlastný prvok ešte nenájdeme v ToolBox. Jedna možnosť je skompilovať program, ale ja dávam prednosť najskôr ho tam vložiť a potom až kompilovať. Nebudeme totiž musieť kompilovať dvakrát, aby sme sa pozreli, či naše "tlačidlo" funguje.

Pridanie UserControl

Prepneme sa do XAML kódu hlavného okna aplikácie a do tagu Window si pridáme odkaz na celý náš projekt tým, že priamo do tagu pridáme riadok:

xmlns:my="clr-namespace:_2_Ep_WPF_Storyboards"

Tým získame odkaz 'my', ktorý použijeme do gridu v hlavnom okne tak, že si tam pridáme riadok:

<my:UserButton VerticalAlignment="Top" HorizontalAlignment="Left" Width="300" Height="300" Margin="12,12,0,0" />

Zatiaľ sa nemôžeme pozrieť ako bude náš element v Designeri vyzerať, pretože Visual Studio zatiaľ nepozná odkaz 'my'. To sa dá jednoducho vyriešiť kompilácií projektu, ak ste niekde neurobili chybu, tak výsledkom bude form sa štvorčekom, ktorý mení priehľadnosť pri nabehnutí myši.

Príbehy cez C# kód

Druhým spôsobom pridanie príbehu je cez C# kód. Príbehy v kóde na pozadí elementu už budú mať trochu iný štýl ako v XAML. Ako prvý si pridáme meno Gridu, treba basicGrid, a hneď potom si pridáme do kódu eventy tým, že na ne vo vlastnostiach gridu dvakrát klikneme:

V metóde MouseEnter si vytvoríme novú DoubleAnimaci (budeme potrebovať nový using) a rovno ju nastavíme To a Duration:

DoubleAnimation opacityAnimation = new DoubleAnimation { To = 1, Duration = TimeSpan.FromSeconds(1) };

Teraz nám zostáva animáciu nastaviť na Opacity gridu a spustiť ju. To urobíme v druhom riadku:

basicGrid.BeginAnimation(Grid.OpacityProperty, opacityAnimation);

Prvý argument v metóde basicGrid.Begi­nAnimation nám hovorí akú vlastnosť budeme animovať a druhý argument čo túto vlastnosť bude animovať. Tieto dva riadky si rozkopírujeme aj do metódy MouseLeave, akurát upravíme To u DoubleAnimation na 0.5. Ešte si do basicGridu pridáme pozadia, tentoraz červené, aby sa štvorca dali ľahko rozlíšiť. Ešte prejdeme do XAML kódu hlavného okna a pridáme si nový riadok s druhým elementom

<my:UserButton2 VerticalAlignment="Top" HorizontalAlignment="Left" Width="300" Height="300" Margin="318,12,0,0" />

Týmto by sme mali prebranej základy animácií, opäť ak niečomu nerozumiete, tak buď napíšte do komentárov alebo sa pozrite do zdrojových kódov, ktoré sú priložené pod článkom.

Výsledná aplikácia vyzerá nasledovne:


 

Všechny články v sekci
Okenné aplikácie v C # .NET WPF
Článek pro vás napsal Theodor Johnson
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor má většinou na svědomí projekty v jazyce C#.
Aktivity (1)

 

 

Komentáře

Avatar
Kit
Redaktor
Avatar
Kit:2.1.2014 2:58

Prefixy jako takové neodsuzuji. Měl jsem výhradu jen k tomu, že tlačítko se jmenuje Button, a uživatel se jmenuje User. Neznám žádného člověka, který by se jmenoval Člověk a měl psa, který se jmenuje Pes.

Možná by se mohlo jmenovat "ucUserNew", pokud by kliknutí mělo znamenat založení nového uživatele nebo "ucAccountDelete", pokud by mělo být ke zrušení účtu.

Odpovědět
2.1.2014 2:58
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Neaktivní uživatel:2.1.2014 21:50

chlapi koukal jsem do xaml kodu toho usercontrolu a zjistil jsem že ani jedna z xmlns adres NEFUNGUJE ?! =proboha proč ?

xmlns="http:/­/schemas.micro­soft.com/winfx/2006/xam­l/presentation"
xmlns:x="http­://schemas.mi­crosoft.com/win­fx/2006/xaml"
xmlns:mc="htt­p://schemas.o­penxmlformats­.org/markup-compatibility/2006"
xmlns:d="http­://schemas.mi­crosoft.com/ex­pression/blen­d/2008"

Editováno 2.1.2014 21:53
Odpovědět
2.1.2014 21:50
Neaktivní uživatelský účet
Avatar
Kit
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Kit:2.1.2014 21:53

A měly by fungovat? Podle specifikace nemusí.

Odpovědět
2.1.2014 21:53
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Odpovídá na Kit
Neaktivní uživatel:2.1.2014 21:54

a k čemu tam potom jsou ? je to tedy jenom jakýsi pojmenovaný identifikátor ? nebo jak to chapat ?

Odpovědět
2.1.2014 21:54
Neaktivní uživatelský účet
Avatar
Kit
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Kit:2.1.2014 22:06

Ano, je to jen unikátní identifikátor, podle kterého si parser XML udělá názvový prostor. Obvykle se na ty adresy dávají stránky s popisem jazyka, ale nikde není psáno, že tam být musí.

Odpovědět
2.1.2014 22:06
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Petr Čech
Redaktor
Avatar
Petr Čech:28.1.2014 17:33

Název příběh je poněkud zavádějící.

Odpovědět
28.1.2014 17:33
the cake is a lie
Avatar
1254
Člen
Avatar
1254:27.7.2014 11:19

Ahoj, chcem sa spýtať čo znamená to "d" pri hodnote To = 0.5d
v zdrojáku UserButton2.xaml.cs
Je to tam potrebné?
Ďakujem.

 
Odpovědět
27.7.2014 11:19
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na 1254
Jan Vargovský:27.7.2014 16:02

Říkáš tomu, že je to typ double. Jestli je to potřebné si můžeš zkusit sám.

 
Odpovědět
27.7.2014 16:02
Avatar
redyder
Člen
Avatar
redyder:18.1.2019 12:03

Vytvořím si na to nový projekt, jméno není důležité.

Přepneme se do XAML kódu hlavního okna aplikace a do tagu Window si přidáme odkaz na celý náš projekt tím, že přímo do tagu přidáme řádek:
xmlns:my="clr-namespace:_2_Ep_WPF­_Storyboards"

Když si projekt pojmenuju "MůjNázev" musím vložit
xmlns:my="clr-namespace:Můj­Název"

 
Odpovědět
18.1.2019 12:03
Avatar
Theodor Johnson
Redaktor
Avatar
Odpovídá na redyder
Theodor Johnson:29.5.2019 16:56

Díky za upozornění, tutoriály jsem psal již dost dávno, když jsem ještě s WPF začínal, dělal jsem to stylem že jsem si našel anglický tutoriál (protože českých byl nedostatek) a byl jsem vždy o lekci napřed před tutoriálem co jsem psal sem. Pro aktuálnější tutoriály doporučuji od David Čápka který začal psát vlastní poté co mi na další díly nezbývalo moc času a nepokračoval jsem v nich.

Odpovědět
29.5.2019 16:56
Mo8ilε 15 Ѐλđ
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!