Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

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

C# .NET Formuláře WPF Úvod do WPF (Windows Presentation Foundation)

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

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í.


 

Stáhnout

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

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
27 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
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
Aktivity (6)

 

 

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

Avatar
Michal Žůrek - misaz:9.1.2015 18:36

V nabídce View -> Properties.

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

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):16.6.2015 15:25

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.
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  +1 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
Andy Scheuchzer:3. května 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. května 15:39
Od ASM úroveň jazyků pouze klesá…
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 17. Zobrazit vše