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

Vitajte u prvej lekcie kurzu, v ktorom sa naučíme vytvárať okenné (formulárové) aplikácie v C# .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 ovládacími prvkami, ktoré máme v týchto aplikáciách k dispozícii.

Kurz 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 (W indows P resentation F oundation) 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 ovládacie prvky alebo niekedy "kontrolky"). Nič nám samozrejme nebráni v tvorbe vlastných ovládacích prvkov, keď by nám nejaká nestačila, ale to sa nestáva príliš často. Počas kurzu si veľa ovládacích prvkov 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í dobre.
• WF ukladá u každého ovládacieho prvku jeho absolútna 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. C# 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 ovládacie prvky 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 ovládacích prvkov 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 vo 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 určite dal napísať samostatný kurz. 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 ovládacie prvky na formulári. Pri zložitejších formulárov je niekedy problém označiť myšou na návrhári nejaký prvok 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ého ovládacieho prvku na formulári alebo celého formulára. V Document Outline označme Window a v oknu Properties mu nastavme 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 ovládacie prvky 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 ovládacích prvkov, ktoré môžeme ťahom myši alebo poklepaním vložiť na formulár. Vyberieme prvok TextBlock, ktorý slúži na zobrazenie textu a pretiahneme ho myšou na formulár v grafickom Designer.

Označenému TextBlock u nastavme v Properties vlastnosť Text na "Pozdrav z formuláře" (bez úvodzoviek).

Aplikácia spustí, bude vyzerať asi takto:

Máte teda svoju prvú WPF aplikáciu, gratulujem! V budúcej lekcii, Jazyk XAML v C # .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š.