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>

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: