Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 1 - Úvod do WPF (Windows Presentation Foundation)

Vítejte u první lekce kurzu, 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 ovládacími prvky, které máme v těchto aplikacích k dispozici.

Kurz 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 ovládací prvky nebo někdy "kontrolky"). Nic nám samozřejmě nebrání v tvorbě vlastních ovládacích prvků, když by nám nějaká nestačila, ale to se nestává příliš často. Během kurzu si mnoho ovládacích prvků 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ého ovládacího prvku jeho 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 ovládací prvky 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 ovládacích prvků 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ář ve WPF. K jeho tvorbě byl použit nástroj Expression Blend.
WPF formulář v Expression Blend

Příprava Visual Studia

Pro vývoj formulářových aplikací je nutné mít ve Visual Studiu nainstalovanou sadu funkcí "Vývoj desktopových aplikací pomocí .NET". To ověříme kliknutím na položku Tools v aplikačním menu VS, poté zvolíme položku Get Tools and Features…. Otevře se nám Visual Studio Installer, pomocí kterého se instaluje VS a také pomocí něj můžeme doinstalovat sady funkcí. Ujistěte se, že máte zaškrtnutou sadu "Vývoj desktopových aplikací pomocí .NET", případně ji zaškrtněte a klikněte na Změnit.

Přidání sady Vývoj desktopových aplikací pomocí .NET do Visual Studio

První formulářová aplikace

O tom, co WPF umí oproti WF navíc a jak vnitřně funguje, by se jistě dal napsat samostatný kurz. 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 ovládací prvky na formuláři. U složitějších formulářů je někdy problém označit myší na návrháři nějaký prvek 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ého ovládacího prvku 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 ovládací prvky 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 ovládacích prvků, které můžeme tahem myši nebo poklepáním vložit na formulář. Vybereme prvek TextBlock, který slouží k zobrazení textu a přetáhneme jej 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!

V příští lekci, Jazyk XAML v C# .NET WPF, 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í.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Všechny články v sekci
WPF - Okenní aplikace v C# .NET
Přeskočit článek
(nedoporučujeme)
Jazyk XAML v C# .NET WPF
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
96 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

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

Avatar
Honza Rada
Člen
Avatar
Honza Rada:13.5.2017 21:45

Takže je lepší se naučit WPF ? A jinak super článek

Odpovědět
13.5.2017 21:45
#c#
Avatar
Odpovídá na Honza Rada
Libor Šimo (libcosenior):17.8.2017 8:19

Lepsie, je to novsia technologia a velmi dobre sa snou pracuje.

Odpovědět
17.8.2017 8:19
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
slezak-petr
Člen
Avatar
slezak-petr:23.8.2017 14:02

Ahoj prosím o nasměrování:
Chystám projekt C#, Entity Framework, líbí se mi platforma WPF, ale co s prezentací na webu, něco jako ASP.Net?

Chci na začátku dobře začít, abych měl co nejširší pokrytí koncových výstupů:

  • intranet
  • web
  • android?
Odpovědět
23.8.2017 14:02
Čím víc se učím, tím víc mi přijde, že toho ještě mnoho neumím
Avatar
Odpovídá na slezak-petr
Michal Štěpánek:23.8.2017 14:40

Ano, ASP.NET MVC je dle mého názoru jako webové rozšíření tvého "desktop" projektu ideální...

Odpovědět
23.8.2017 14:40
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
slezak-petr
Člen
Avatar
Odpovídá na Michal Štěpánek
slezak-petr:23.8.2017 14:44

OK v tuhle chvíli začínám, mám Entity a Console app, takže si mohu vybrat, proto se ptám zkušnějších

Odpovědět
23.8.2017 14:44
Čím víc se učím, tím víc mi přijde, že toho ještě mnoho neumím
Avatar
Neaktivní uživatel:3.5.2018 15:39

U projektů co zatím dělám jsou WinForms na vývoj daleko jednodušší a moc velký rozdíl ve výsledku nevidím. Properties WPF moc nechápu a pořád nikde nevidím něco jako MaximizeBox nebo MinimizeBox, prostě zmatený jak lesní včela :-). Nevíte někdo, kde to je?

Odpovědět
3.5.2018 15:39
Neaktivní uživatelský účet
Avatar
Lukáš Vejsada:28.3.2020 9:22

Díky moc. Nemám, co bych doplnil :)

 
Odpovědět
28.3.2020 9:22
Avatar
Alesh
Tvůrce
Avatar
Alesh:16.7.2020 11:40

Měl bych 2 dotazy:

  1. Když chci založit projekt dle návodu výše, tedy chci vybrat "WPF application", tak v nabídce vidím jen WPF App (.NET framework), resp. WPF App (.NET Core). Co z toho mám volit?
  2. Cvičnou aplikaci jsem udělal v tom "framework" a nevím, jestli to je tím nebo něčím jiným, ale pokud ji spustím, tak je ta horní lišta překrytá jakousi další lištou, kterou lze jen zmenšit kliknutím na ty dvě vodorovné čáry. V ukázce v lekci ale nic takového není. V čem je problém?
 
Odpovědět
16.7.2020 11:40
Avatar
Jiří Burda
Člen
Avatar
Odpovídá na Alesh
Jiří Burda:30.9.2020 13:55

Podle mě správně je .NET framework, .NET Core je pro webové aplikace. Ta lišta ti při výsledném programu zmizí.

 
Odpovědět
30.9.2020 13:55
Avatar
Katka
Tvůrce
Avatar
Katka:27.12.2020 13:53

Ahoj, pro ty, kdo chtějí pracovat s .NET Core, ale při vytváření projektu jim chybí: WPF App (.NET Core) – může to být tím, že od verze .NET (5) došlo k přejmenování na WPF App (.NET)
To jen abyste jako já zbytečně 2 hodiny nepřeinstalovávali s nulovým výsledkem... ;-)

Odpovědět
27.12.2020 13:53
Rozdíl mezi tím, kým jsme a tím, kým chceme být, je jen v tom, co děláme.
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 21. Zobrazit vše