1. díl - Úvod do WPF (Windows Presentation Foundation)

C# .NET WPF Úvod do WPF (Windows Presentation Foundation) American English version English version

Vítejte u prvního dílu seriálu, ve kterém se naučíme vytvářet okenní (formulářové) aplikace v C# .NET a vyzkoušíme si použití jednotlivých komponent. Budeme pracovat s tlačítky, textovými poli, tabulkami, ale i s obrázky, časovači a dalšími tzv. kontrolkami (anglicky control), které máme v těchto aplikacích k dispozici.

Seriál budu psát tak, abyste nepotřebovali žádné pokročilé znalosti. Předpokládám však, že znáte alespoň základy objektově orientovaného programování.

Windows Presentation Foundation

WPF (Windows Presentation Foundation) je framework pro komplexní tvorbu bohatých formulářových aplikací, který je součástí .NET frameworku od verze 3.0. Disponuje širokou paletou formulářových prvků a také umožňuje bohaté stylování vzhledu aplikace.

Komponentová architektura

Framework nám nabízí spoustu hotových komponent, ze kterých formulář jednoduše poskládáme. Jedná se tedy o různá tlačítka, pole, posuvníky, popisky a další komponenty, které Microsoft nazval controls (česky asi kontrolky). Nic nám samozřejmě nebrání v tvorbě vlastních kontrolek, když by nám nějaká nestačila, ale to se nestává příliš často. Během seriálu si mnoho kontrolek popíšeme a naučíme se s nimi pracovat.

WPF a Windows Forms

Kromě WPF je v .NET frameworku stále přítomný starší formulářový framework Windows Forms. Ačkoli Microsoft Windows Forms ještě neoznačil jako zastaralý a v současné době se paralelně používají oba frameworky, WPF je technologicky mnohem dále. I když mnoho existujících aplikací stále používá Windows Forms, nové aplikace již prakticky nemá smysl vyvíjet v ničem jiném, než právě ve WPF.

Proč WPF vzniklo

Technologie jdou dopředu a je tlak na stále graficky bohatší aplikace. Zde starší Windows Forms selhává zejména z těchto důvodů:

  • V posledních několika letech na trhu začaly dominovat mobilní zařízení, ale WF aplikaci je problém uzpůsobit jejich fyzické velikosti kvůli slabé podpoře DPI. Nelze jednoduše používat tu samou aplikaci např. na mobilu, tabletu a na stolním PC s fullHD rozlišením. Proto WPF zavádí jako jednotku délky tzv. DIP (Device Independent Pixel) a čistě vektorovou grafiku, aby výsledná aplikace vypadala vždy na každém zařízení dobře.
  • WF ukládá u každé kontrolky její absolutní pozici na formuláři, což se pro návrh složitějších formulářů nehodí. Na webu se pro tvorbu prezentační vrstvy (to je ta část aplikace, se kterou uživatel komunikuje) velmi osvědčil jazyk HTML. C# se zde stejně jako Java inspiruje a zavádí definici formulářů pomocí jazyka XML, v našem případě přesněji XAML. Kromě lepšího oddělení prezentace a logiky přináší jednoduchou podporu tzv. bindingů, které umožňují napojit vlastnosti objektů přímo na kontrolky formuláře. Daní za kvalitnější aplikaci je více práce s návrhem formuláře a nutnost ovládání dalšího jazyka, i když je velmi jednoduchý.
  • Používání původního vykreslovacího rozhraní Windows (GDI) je pomalé a přináší s sebou mnoho omezení. WPF používá k vykreslování formulářů Direct3D. To je rozhraní pro akcelerovanou grafiku, jehož plné využití poprvé přinesly Windows Vista. WPF aplikace jsou tedy svižnější a méně zatěžují procesor. Díky nezávislosti na GDI se je možné odpoutat od strohé palety základních kontrolek operačního systému a vytvářet graficky bohaté aplikace. Nemáme prakticky žádná omezení, můžeme např. vkládat obrázky do tlačítek, do položek comboboxu, cokoli zprůhlednit, naše aplikace skinovat nebo dokonce jednoduše animovat pomocí tzv. storyboardů. Sice rozhodně nebudeme vytvářet omalovánky a naše aplikace by měla vypadat stále jako aplikace, občas se však hodí ostylovat si nějakou část přesně jak to potřebujeme. Níže máte takovou extravagantní ukázku toho, jak může vypadat formulář v WPF. K jeho tvorbě byl použit nástroj Expression Blend.
WPF formulář v Expression Blend

První formulářová aplikace

O tom, co WPF umí oproti WF navíc a jak vnitřně funguje by se jistě dal napsat celý seriál. ITnetwork je však známý tím, že učí zejména praxi. Vytvoříme si klasickou "Hello world" aplikaci, to je jednoduchá aplikace, která se používá při výuce programování a jejím jediným účelem je vypsání textu.

Založte si nový projekt typu WPF application, jako název zadejte HelloWPF.

Nový projekt C# .NET WPF aplikace ve Visual Studio

Vaše Visual Studio vám nyní okno rozdělí do několika panelů, popišme si je. Kdyby vám kterýkoli chyběl nebo jste si ho omylem zavřeli, můžete si ho vyhledat v hlavním menu VIEW a znovu zapnout.

WPF aplikace ve Visual Studio

Veprostřed vidíme náhled okna tak, jak nám jej zobrazuje grafický designer. Velikost zobrazení doporučuji vždy nastavit na 100% pomocí pole vlevo dole od náhledu.

Dolní okno nám zobrazuje XAML kód, který popisuje to, co na formuláři je. Zatím zde vidíme elementy Window (to je samotné okno) a Grid, který slouží pro vkládání obsahu, zatím je prázdný. Všimněte si, že Window má kromě několika dalších atributů, které si vysvětlíme později, také atributy Title (titulek okna), Height (výška) a Width (šířka). XAML si blíže popíšeme příště.

Okno Document outline vlevo zobrazuje všechny kontrolky na formuláři. U složitějších formulářů je někdy problém označit myší na návrháři nějakou kontrolku a proto k tomu použijeme právě toto okno.

Formulářové prvky můžeme editovat buď přímo přes XAML kód nebo pomocí Properties okna vpravo dole, které zobrazuje vlastnosti aktuálně vybrané kontrolky na formuláři nebo celého formuláře. V Document Outline označme Window a v oknu Properties mu nastavme Title na "Pozdrav". Titulek je v záložce Common:

Nastavení titulku okna ve WPF aplikaci ve Visual Studio

Ačkoli by teoreticky bylo možné celou aplikaci jen naklikat pomocí grafického návrháře a okna properties, v praxi se budeme často uchylovat k psaní XAML kódu. Je to z důvodu, že návrhář se špatně ovládá a často generuje příliš složitý kód. Některé věci také nelze udělat jinak, než kódem. To není úplně chyba Visual Studia, je to známá vlastnost většiny grafických editorů (říká se jim WYSIWYG editory), co generují nějaké XML. Programu jednoduše nelze pouhým klikáním sdělit jak přesně chceme kontrolky umístit. Zde vycházejí lépe starší Windows Forms, které jdou opravdu jen naklikat, ale je to na úkor ergonomie a kvality výsledné aplikace.

Poslední okno, které jsme si nezmínili, je tzv. Toolbox (česky Panel nástrojů). Ten se zobrazí po kliknutí na záložku vlevo nahoře a obsahuje paletu kontrolek, které můžeme tahem myši nebo poklepáním vložit na formulář. Vybereme kontrolku TextBlock, která slouží k zobrazení textu a přetáhněme ji myší na formulář v grafickém designeru.

Toolbox ve Visual Studio WPF aplikaci

Označenému TextBlocku nastavme v Properties vlastnost Text na "Pozdrav z formuláře" (bez uvozovek).

Aplikaci spusťme, bude vypadat asi takto:

První C# .NET WPF Aplikace

Máte tedy svou první WPF aplikaci, gratuluji! Příště se blíže podíváme na XAML, jak jsem již sliboval. Zdrojové kódy dnešního příkladu máte níže ke stažení.


 

Stáhnout

Staženo 454x (53.66 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (3)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (19 hlasů) :
4.894744.894744.894744.894744.89474


 


Miniatura
Všechny články v sekci
Okenní aplikace v C# .NET WPF
Miniatura
Následující článek
Jazyk XAML v C# .NET WPF

 

 

Komentáře
Zobrazit starší komentáře (1)

Avatar
Jan Vargovský
Redaktor
Avatar
Jan Vargovský:

Vypadá, ale je to o dost těžší :) když to teda využíváš správně.

 
Odpovědět  +1 25.12.2013 14:55
Avatar
Michal Žůrek (misaz):

Controls bych spíš česky nazval ovládací prvky.

Odpovědět  ±0 18.1.2014 12:15
Nesnáším {}, proto se jim vyhýbám.
Avatar
RooBoo
Člen
Avatar
RooBoo:

Kde by som nasiel na stiahnutie Expression Blend ? Alebo nieco podobne ?

 
Odpovědět 8.2.2014 9:16
Avatar
Odpovídá na RooBoo
Michal Žůrek (misaz):

pro studenty je to na DreamSparku, je to tam i v té základní variantě. Pro ostatní to je v MSDN předplatném.

Odpovědět  -1 8.2.2014 10:51
Nesnáším {}, proto se jim vyhýbám.
Avatar
j.c
Člen
Avatar
j.c:

Vztah k anglické verzi je asi dost silný, a neudělal jsem dobře, když jsem si nainstaloval češtinu. Zde jsem pátral, co je to "Okno Document outline vlevo " ..v české verzi .. Osnova dokumentu.

 
Odpovědět 15.10.2014 11:06
Avatar
davidzita.wolf:

Vo visual studiu mi nezobrazuje Tabulku PROPORTIES pls kde si to mam nastavit?

 
Odpovědět 9.1.2015 18:31
Avatar
Odpovědět  ±0 9.1.2015 18:36
Nesnáším {}, proto se jim vyhýbám.
Avatar
Libor Šimo (libcosenior):

Mám jednu závažnú otázku.
V práci mame možnosť pracovať len na winxp. Chcem si jednu apku napísať do práce (doma na win7 VS express 2013) a potrebudem vedieť, či mi to pôjde na winxp alebo musím použiť WF.

Odpovědět 16.6.2015 15:00
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):

Sorry za otravovanie. Stiahol som si od Zdenka Pavlátku "Aplikace pro organizaci skupin lidí v C# .NET v 1.0.0.0" napísanú pomocou VPF a na xp funguje bez problémov.

Odpovědět 16.6.2015 15:25
Aj tisícmíľová cesta musí začať jednoduchým krokom.
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.

Zobrazeno 10 zpráv z 11. Zobrazit vše