1. diel - Úvod do WPF (Windows Presentation Foundation)

Vitajte u prvého dielu seriálu, v ktorom sa naučíme vytvárať okenné (formulárové) aplikácie v VB.NET a vyskúšame si použitia jednotlivých komponentov. Budeme pracovať s tlačidlami, textovými poľami, tabuľkami, ale aj s obrázkami, časovačmi a ďalšími tzv. Kontrolkami (anglicky control), ktoré máme v týchto aplikáciách k dispozícii.

Seriál budem písať tak, aby ste nepotrebovali žiadne pokročilé znalosti. Predpokladám však, že poznáte aspoň základy objektovo orientovaného programovania.

Windows Presentation Foundation

WPF (Windows Presentation Foundation) je framework pre komplexné tvorbu bohatých formulárových aplikácií, ktorý je súčasťou .NET frameworku od verzie 3.0. Disponuje širokou paletou formulárových prvkov a tiež umožňuje bohaté štýlovanie vzhľadu aplikácie.

Komponentová architektúra

Framework nám ponúka veľa hotových komponentov, z ktorých formulár jednoducho poskladáme. Jedná sa teda o rôzne tlačidlá, pole, posuvníky, popisky a ďalšie komponenty, ktoré Microsoft nazval controls (slovensky asi kontrolky). Nič nám samozrejme nebráni v tvorbe vlastných kontroliek, keď by nám nejaká nestačila, ale to sa nestáva príliš často. Počas seriálu si veľa kontroliek popíšeme a naučíme sa s nimi pracovať.

WPF a Windows Forms

Okrem WPF je v .NET frameworku stále prítomný staršie formulárový framework Windows Forms. Hoci Microsoft Windows Forms ešte neoznačil ako zastaraný a v súčasnej dobe sa paralelne používajú oba frameworky, WPF je technologicky oveľa ďalej. Aj keď mnoho existujúcich aplikácií stále používa Windows Forms, nové aplikácie už prakticky nemá zmysel vyvíjať v ničom inom, než práve vo WPF.

Prečo WPF vzniklo

Technológie idú dopredu a je tlak na stále graficky bohatší aplikácie. Tu staršie Windows Forms zlyháva najmä z týchto dôvodov:

• V posledných niekoľkých rokoch na trhu začali dominovať mobilné zariadenia, ale WF aplikácii je problém prispôsobiť ich fyzické veľkosti kvôli slabej podpore DPI. Nemožno jednoducho používať tú istú aplikáciu napr. Na mobile, tabletu a na stolnom PC s fullHD rozlíšením. Preto WPF zavádza ako jednotku dĺžky tzv. DIP (Device Independent Pixel) a čisto vektorovú grafiku, aby výsledná aplikácia vyzerala vždy na každom zariadení rovnako.
• WF ukladá pri každej kontrolky jej absolútnu pozíciu na formulári, čo sa pre návrh zložitejších formulárov nehodí. Na webe sa pre tvorbu prezentačnej vrstvy (to je tá časť aplikácie, s ktorou užívateľ komunikuje) veľmi osvedčil jazyk HTML. Visual Basic sa tu rovnako ako Java inšpiruje a zavádza definíciu formulárov pomocou jazyka XML, v našom prípade presnejšie XAML. Okrem lepšieho oddelenia prezentácie a logiky prináša jednoduchú podporu tzv. Binding, ktoré umožňujú napojiť vlastnosti objektov priamo na kontrolky formulára. Daňou za kvalitnejší aplikácii je viac práce s návrhom formulára a nutnosť ovládanie ďalšieho jazyka, aj keď je veľmi jednoduchý.
• Používanie pôvodného vykreslovacího rozhranie Windows (GDI) je pomalé a prináša so sebou veľa obmedzení. WPF používa na vykresľovanie formulárov Direct3D. To je rozhranie pre akcelerovanú grafiku, ktorého plné využitie prvýkrát priniesli Windows Vista. WPF aplikácie sú teda svižnejšie a menej zaťažujú procesor. Vďaka nezávislosti na GDI sa je možné odpútať od strohé palety základných kontroliek operačného systému a vytvárať graficky bohaté aplikácie. Nemáme prakticky žiadne obmedzenia, môžeme napr. Vkladať obrázky do tlačidiel, do položiek comboboxu, čokoľvek spriehľadniť, naše aplikácie skinovat alebo dokonca jednoducho animovať pomocou tzv. Storyboardov. Síce rozhodne nebudeme vytvárať maľovanky a naše aplikácie by mala vyzerať stále ako aplikácie, občas sa však hodí ostylovat si nejakú časť presne ako to potrebujeme. Nižšie máte takú extravagantné ukážku toho, ako môže vyzerať formulár v WPF. K jeho tvorbe bol použitý nástroj Expression Blend.

Prvý formulárové aplikácie

O tom, čo WPF vie oproti WF navyše a ako vnútorne funguje by sa iste dal napísať celý seriál. ITnetwork je však známy tým, že učí najmä praxi. Vytvoríme si klasickú "Hello world" aplikáciu, to je jednoduchá aplikácia, ktorá sa používa pri výučbe programovania a jej jediným účelom je vypísanie textu.

Založte si nový projekt typu WPF application, ako názov zadajte HelloWPF.

Vaša Visual Studio vám teraz okno rozdelí do niekoľkých panelov, popíšme si ich. Keby vám ktorýkoľvek chýbal alebo ste si ho omylom zatvorili, môžete si ho vyhľadať v hlavnom menu VIEW a znova zapnúť.

Veprostřed vidíme náhľad okna tak, ako nám ho zobrazuje grafický designer. Veľkosť zobrazenie odporúčam vždy nastaviť na 100% pomocou poľa vľavo dole od náhľadu.

Dolné okno nám zobrazuje XAML kód, ktorý opisuje to, čo na formulári je. Zatiaľ tu vidíme elementy Window (to je samotné okno) a Grid, ktorý slúži pre vkladanie obsahu, zatiaľ je prázdny. Všimnite si, že Window má okrem niekoľkých ďalších atribútov, ktoré si vysvetlíme neskôr, tiež atribúty Title (titulok okna), Height (výška) a Width (šírka). XAML si bližšie popíšeme nabudúce.

Okno Document outline vľavo zobrazuje všetky kontrolky na formulári. Pri zložitejších formulárov je niekedy problém označiť myšou na návrhári nejakú kontrolku a preto k tomu použijeme práve toto okno.

Formulárové prvky môžeme editovať buď priamo cez XAML kód alebo pomocou Properties okna vpravo dole, ktoré zobrazuje vlastnosti aktuálne vybrané kontrolky na formulári alebo celého formulára. V Document Outline označte Window a v oknu Properties mu nastavte Title na Pozdrav. Titulok je v záložke Common:

Hoci by teoreticky bolo možné celú aplikáciu len naklikať pomocou grafického návrhára a okná properties, v praxi sa budeme často uchyľovať k písania XAML kódu. Je to z dôvodu, že návrhár sa zle ovláda a často generuje príliš zložitý kód. Niektoré veci tiež nemožno urobiť inak, než kódom. To nie je úplne chyba Visual Studia, je to známa vlastnosť väčšiny grafických editorov (hovorí sa im WYSIWYG editory), čo generujú nejaké XML. Programu jednoducho nedá jednoduchým klikaním oznámiť ako presne chceme kontrolky umiestniť. Tu vychádzajú lepšie staršie Windows Forms, ktoré idú naozaj len naklikať, ale je to na úkor ergonómie a kvality výslednej aplikácie.

Posledné okno, ktoré sme si nespomenuli, je tzv. Toolbox (slovensky Panel nástrojov). Ten sa zobrazí po kliknutí na záložku vľavo hore a obsahuje paletu kontroliek, ktoré môžeme ťahom myši alebo poklepaním vložiť na formulár. Vyberte kontrolku TextBlock, ktorá slúži na zobrazenie textu a presuňte ju myšou na formulár v grafickom Designer.

Označenému TextBlocku nastavte v Properties vlastnosť Text na "Pozdrav z formulára" (bez úvodzoviek).

Aplikáciu spustite, bude vyzerať asi takto:

Máte teda svoju prvú WPF aplikáciu, gratulujem!

Nabudúce, Jazyk XAML v VB.NET WPF , sa bližšie pozrieme na XAML, ako som už sľuboval. Zdrojové kódy dnešného príklade máte nižšie k stiahnutiu.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.