1. Diel WPF - Základné rozdiely oproti WF

V minulej lekcii, Hrianok notifikácia v C # .NET WPF , sme sa naučili tvoriť hrianok notifikácia.

Znovu ahoj, dúfam, že ste si prečítali predchádzajúci diel o základnom vykresľovanie WPF. Už tam by mal byť vidieť veľký rozdiel medzi WPF a WF.

Budem tu popisovať kontrolky vo WF a elementy vo WPF. Dôvod, prečo používam kontrolky a elementy si neskôr tiež vysvetlíme.

Najskôr sa pozrieme na designer. Keď sa pozrieme na Toolbox, tak si môžeme všimnúť, že tu sú podobné elementy ako vo WF. Zdanie však klame, tieto elementy majú odlišné vlastnosti než kontrolky vo WF. Medzi dôležito vlastnosti by som zaradil treba dať každému elementu priehľadnosť. S tým som stratil veľa času hľadania na Google a nie vždy to bolo možné, vo WPF to už možné je.

Podobne ako u WF sa nám pri zmene vlastnosti elementu zapíše zmena i do kódu, napr. Keď máme originálne veľkosť a nezmeníme ju, tak sa nám do programu nezapíše. Ale akonáhle ju zmeníme, tak sa nám zapíše do programu nová veľkosť. U WPF sa nám zapíše do XAML kódu kontrolky, takže miesto

<TextBlock Name="textBlock1" />

budemem mať

<TextBlock Name="textBlock1" Width="250" Height="100" />

Teraz späť k projektu. Vždy odporúčam dať základnému gridu nějáké meno, v XAML kóde to vyzerá pri prázdnom projektu asi takto:

<Window x:Class="_1_Ep_WPF_Designer_BasicControls_Adding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid></Grid>
</Window>

Máme tu jeden grid, ktorý sa nám vlastne stará o elementy vo formu. Bez tohto základného gridu by sa nedali do formu pridávať elementy. Odporúčam si ho prispôsobiť pre neskoršie použitie v kóde tým, že mu dáme meno, tzn. upravíme si

<Grid></Grid>

na

<Grid Name="basicGrid"></Grid>

Teraz sa už pozrieme na nejaké elementy vo WPF.

Elementy WPF

TextBlock

TextBlock je vlastne podobný labelu, ale má oproti nemu nejaké výhody. Základné vlastnosti sú vidieť na obrázku.

• V záložke Common je pre nás zatiaľ dôležitý iba Text
  • V záložke Layout si môžeme upravovať umiestnenie, veľkosť, vertikálne a horizontálne zarovnanie, minimálna veľkosť, maximálna veľkosť, apod.
  • V záložke Brushes si môžeme upraviť farbu popredia (farba textu), pozadia (farba za textom)
  • V záložke Text si môžeme prispôsobiť štýl písma, ako veľkosť, font, ...
  • V záložke Visibility si môžeme upraviť priehľadnosť elementu a či bude viditeľný alebo nie
  • K záložke Transform sa dostaneme neskôr
  • A nakoniec je tu záložka Other. Tu si môžeme upraviť ostatné vlastnosti elementu. Môžete si ich skúsiť, ale podrobne sa k nim dostaneme neskôr.

Teraz si niektoré vlastnosti vysvetlíme trochu podrobnejšie. Je dôležité vedieť, že elementy vo WPF už nemajú vlastnosť Location. Pozície sa určuje cez vlastnosť Margin, kde máme odsadenie zľava, zhora, sprava, zospodu. Toto odsadenie musíme určiť podľa toho aké máme vertikálne a horizontálne zarovnanie (vertical alignment, horizontal Alignment). Ak teda máme element napr. Vľavo hore, tak nám stačí do margin zapísať odsadenie zľava a zhora. Do ostatných napíšeme 0, pretože by sa tým aj tak nič nezmenilo. Ak budeme mať element vpravo dole, tak do Margin budeme musieť napísať odsadenie sprava a zospodu, zhora a zľava môžeme mať 0.

Avšak naše možnosti nebudú obmedzené len na WPF elementy. Je tu totiž možnosť pridať si aj kontrolky z WF tým, že si niekam do programu pridáme WindowsFormsHost. Tým sa nám možnosti rozšíri na všetky WPF elementy a všetky WF kontrolky.

S ostatnými elementy sa pracuje podobne ako s už vysvetleným TextBlockem. Veľa vlastnosťou je u všetkých elementov zhodná, je tu síce aj pár rozdielnych, ktoré závisia od druhu elementu, ale na to sa môžete pozrieť aj sami.

Pridanie elementu

Teraz si budeme chcieť pridať vlastné element vo chvíli, keď používateľ klikne na tlačidlo. Aby sa nám nehromadili na jednom mieste, tak si ich pridáme do wrap panelu, ktorý nám ich bude automaticky zarovnávať.

V Designeri si pridáme ScrollViewer a upravíme si ho tak, aby bol ako pravá postranné lišta.

Šírku si nastavíme napríklad na 175, a výšku si restujeme.

Tým sa nám nastaví automatická výška podľa nastaveného margine a vertical Alignment.

Ďalšie vlastnosti rozloženie si nastavíme podľa ďalšieho obrázku.

Horizontálne zarovnanie je tu vpravo a vertikálne je nastavené na roztiahnutie, ktoré sa nám vďaka resetované výške nastaví na celú výšku gridu. Margin si tiež resetujeme, takže tu nebude ani žiadne odsadenie od strán.

Teraz si do scrollVieweru môžeme pridať wrapPanel, ktorý si z toolbox presunieme priamo do scrollVieweru. Bude to vlastne fungovať tak, že vďaka scrollVieweru sa nám pri roztiahnutí wrapPanelu až nad medze výšky scrollVieweru zobrazí posúvač. Tým budeme môcť scrollovať wrapPanel hore a dole.

WrapPanel si upravíme tak, aby nám zaberal celú vnútornú veľkosť scrollieweru. Dosiahneme toho tým, že mu resetujeme veľkostné vlastnosti:

Ešte si pridáme jedno tlačidlo, ktoré nám bude pridávať elementy do wrapPanelu. Na tlačidlo si dvakrát klikneme a presunie nás to rovno do kódu, kde nám aj vytvoria metódu pre stlačenie tlačidla. U tejto metódy zostaneme a napíšeme si tu pridávanie elementu, konkrétne si budeme pridávať TextBlock.

TextBlock tb = new TextBlock();

tb.VerticalAlignment = System.Windows.VerticalAlignment.Top;
tb.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;

Text budeme nastavovať podľa počtu elementov v paneli, pretože v paneli budeme mať len tieto textBlocky:

tb.Text = String.Format("TextBlock číslo {0}", wrapPanel1.Children.Count.ToString());

A ešte si pridáme tento textBlock do panelu. Tu vidíme hlavný rozdiel v pridávaní elementov vo WPF oproti WF. Zatiaľ čo vo WF použijeme kód

this.Controls.Add(tb);

Vo WPF už nemáme kontrolky, ale zastupujú je UIElements. Tieto elementy sa dajú pridávať do gridu alebo rôznych druhov panelov, ale nemôžeme ich už pridať do samotného formu. Priamo do formu môžeme pridať iba jeden element a tým je už spomínaný grid, ktorý sme si premenovali na baseGrid.

WPF už teda nemá Controls, ale Children. Deti sa dajú pridávať rovnako ako vo WF, teda použijeme kód:

wrapPanel1.Children.Add(tb);

Teraz si môžeme projekt skompilovať a keď budeme klikať na tlačidlo, tak sa nám budú pridávať TextBlocky. Po chvíli počet TextBlocků presiahne výšku okna a zafunguje náš ScrollViewer.

Na obrázku sa môžete pozrieť ako by aplikáciu mala na konci vyzerať (po pár kliknutí na tlačidlo)

Dúfam, že ste aspoň niečo z tutoriálu pochytia. Ak budete mať s niečím problém, tak sa môžete pozrieť do zdrojových kódov, ktoré prikladám k tutoriálu.