Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
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.

Požadavky na znalosti

Pro dokončení celého kurzu se předpokládají znalosti v tomto rozsahu:

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 - WPF - Okenní aplikace v C# .NET

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.

instalace wpf v visual studiu - WPF - Okenní aplikace v C# .NET

Tutoriály jsou aktualizovány pro Visual Studio 2022 verze 17.8.3 a vyšší, .NET 8.0.

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žíme si nový projekt typu WPF application a potvrdíme tlačítkem Next:

výběr šablony wpf aplikace - WPF - Okenní aplikace v C# .NET

Jako název si zadáme HelloWPF a potvrdíme tlačítkem Next:

zadání názvu aplikace - WPF - Okenní aplikace v C# .NET

Zadáme verzi frameworku .NET 8.0 a potvrdíme tlačítkem Create:

výběr frameworku - WPF - Okenní aplikace v C# .NET

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

základní okno wpf - WPF - Okenní aplikace v C# .NET

Uprostřed vidíme náhled okna tak, jak nám jej zobrazuje grafický designer. Velikost zobrazení doporučujeme 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:

okno pro zadání title wpf - WPF - Okenní aplikace v C# .NET

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.

okno toolbox wpf - WPF - Okenní aplikace v C# .NET

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

Aplikaci spusťme, bude vypadat asi takto:

výstup aplikace wpf - WPF - Okenní aplikace v C# .NET

Pokud má okno jinou podobu, je to základním nastavením Visual Studia. Úpravy zobrazení budou předmětem dalších lekcí.

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 644x (323.98 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 Hartinger
Avatar
Uživatelské hodnocení:
169 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 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