Úvod do WinForms - praxe

Windows Forms

Windows Forms je prvním frameworkem z .NETu, který umožňuje jednoduchou tvorbu formulářových aplikací pomocí grafického designeru. Nalezneme zde plnou sadu připravených ovládacích prvků (někdy označovaných jako komponenty) pro většinu situací. A pokud nám nebudou stačit, můžeme si samozřejmě vytvořit vlastní nebo upravit nějakou existující. Právě Windows Forms se budeme v tomto kurzu věnovat.

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.

První formulářová aplikace

Nezačneme jinak, než klasickou aplikací Hello World, tentokrát formulářovou Pokud jste nečetli zdejší kurz, tak zopakuji, že je to jednoduchá aplikace, která nedělá nic jiného, než že vypíše nějaký text.

Vytvořte si nový projekt, jako typ projektu vyberte Windows Forms Application. Jako název zvolíme HelloForms.

Okno vizuálů by mělo vypadat takto:

Důležité části jsou na obrázku výše zvýrazněné červeně.

• Designer (Grafický návrhář) - V Designeru vidíme, jak formulář vypadá. Zatím je to jen prázdné okno.

• Properties (Vlastnosti) - V okně Properties vidíme vlastnosti aktuálně označeného prvku na formuláři. Pokud okno nevidíte, zapněte si ho v menu View -> Properties Window.

• Toolbox (Panel nástrojů) - Toolbox je vyjížděcí okno, které slouží jako paleta s jednotlivými ovládacími prvky, které můžeme na formulář vložit.

Nastavení vlastností ovládacích prvků

Když označíme nějaký prvek na formuláři nebo formulář samotný, můžeme v okně Properties měnit jednotlivé vlastnosti tohoto prvku.

Jelikož na formuláři žádný prvek nemáme, je označený právě formulář. Formuláři změníme titulek na "Pozdrav". Vyhledejte si vlastnost Text a do ní vložte hodnotu "Pozdrav" (bez uvozovek). Výsledek se hned projeví v návrháři. Tímto způsobem budeme nastavovat vlastnosti všech prvků na formuláři.

Vložení ovládacích prvků na formulář

Nyní otevřeme Toolbox a vybereme ovládací prvek Label, což je textový popisek. Vložíme jej do formuláře buď dvojklikem nebo přesunutím myší. Formulář si zmenšete a label myší jednoduše přesuňte doprostřed. Označenému labelu v oknu Properties nastavte text na "Pozdrav z formuláře".

Vaši první okenní aplikaci můžete spustit jako vždy zeleným tlačítkem Play nebo klávesou F5. Měli byste dostat podobný výsledek:

Vysvětlení:

Vysvětleme si, jak aplikace funguje uvnitř. Samotný formulář je samozřejmě objekt (jak jinak ). Je definován třídou Form1, kterou nalezneme v souboru Form1.cs. Soubor si samozřejmě můžete přejmenovat v Solution Exploreru, přejmenuje se i třída. Pro naší aplikaci by se formulář mohl jmenovat např. PozdravForm, přejmenujte si ho tak, jelikož se v aplikaci poté budete lépe orientovat.

Visual Studio zobrazuje buď grafický náhled formuláře nebo jeho zdrojový kód. Mezi těmito režimy můžeme přepínat buď pravým kliknutím na formulář (resp. na kód) a výběrem možnosti View Code (resp. View Designer). Užitečné je znát klávesové zkratky Shift + F7 k přesunu do návrháře a Ctrl + Alt + 0 k přesunu do kódu. Musí se jednat o nulu na alfanumerické klávesnici (tu vlevo).

Přesuňte se do kódu formuláře, který vypadá asi takto (Jsou vynechány počáteční usingy):

Vidíme, že formulář je třída dědící z třídy Form. Nikde zde není ani památky po tom, co jsme naklikali, pouze v konstruktoru se volá podivná metoda InitializeComponent().

Třída je označená jako partial, což znamená, že je definována ve více souborech. Konkrétně existuje ještě souborPozdravForm.Designer.cs, který obsahuje již méně přehledný kód, který se automaticky generuje tím, jak v návrháři klikáme.

Tento kód je schválně oddělen do dalšího souboru, aby nedělal zdrojový kód formuláře nepřehledným. Do souboru Designer.cs nikdy ručně nezasahujte a vlastně byste o jeho existenci ani nemuseli vědět. Ukažme si ale jeho obsah, abychom pochopili, jak aplikace funguje:

V kódu vidíme onu skrytou metodu InitializeComponent(), která nedělá nic jiného, než že vytvoří postupně všechny prvky na formuláři a nastaví jim patřičné vlastnosti, které jsme zvolili. Vidíme zde, jak se tvoří náš label a nastavují se mu vlastnosti. Metoda se poté volá v konstruktoru, čímž se formulář inicializuje. Nezasvěcený programátor je tedy úplně odstíněn od kódu, co generuje návrhář. Je to samozřejmě hlavně proto, aby ho nemohl rozbít Nicméně je důležité vědět, jak to funguje, abyste byli schopni např. přidávat ovládací prvky za běhu aplikace nebo opravit chyby v souboru, co designer generuje.

Jednoduchá kalkulačka

Příprava formuláře

Založte si nový Windows Forms projekt s názvem Kalkulacka. Formulář přejmenujeme na KalkulackaForm. U aplikací se většinou začíná právě návrhem formuláře. Z Toolboxu na něj natáhneme několik ovládacích prvků. Budeme potřebovat:

• 2x Label

• 1x Button

• 2x NumericUpDown

• 1x ComboBox

Label

Label již známe, jedná se jednoduše o textový popisek.

Pokud ovládací prvky nepoužíváme z kódu, nemusíme je pojmenovávat. Pokud ano, měli bychom jim nastavit vlastnost Name (v oknu Properties je název vlastnosti v závorce (Name)) a přes toto jméno k prvku poté z kódu přistoupíme. Doporučuji si přepnout zobrazení vlastností z kategorizovaného na abecední (první 2 ikonky v Properties oknu), vlastnosti najdete rychleji. Name je tedy jméno objektu, Text je to, co je na objektu napsáno.

Z toho logicky vyplývá, že na formuláři můžeme mít více prvků se stejným textem, ale jen jeden s určitým jménem.

Jeden label bude sloužit jen jako popisek s textem "=", nastavte mu ho. Druhý Label bude sloužit pro výpis výsledku a jelikož do něj budeme programově vkládat hodnotu, nastavíme jeho vlastnost Name na vysledekLabel. Text nastavíme na hodnotu "0". Font výsledku můžeme zvětšit na velikost 10.

Button

Button je jednoduše tlačítko, které v případě stisku zavolá nějakou metodu (přesněji vyvolá událost). V našem případě se bude tlačítko jmenovat vypocitejButton a jeho Text bude nastaven na "Vypočítej". Událost tlačítku přiřadíme později.

NumericUpDown

NumericUpDown je první ovládací prvek k zadávání hodnoty, který si uvedeme. Ve výchozím nastavení do něj můžeme zadat jen celé číslo. Toto chování lze změnit nastavením vlastnosti DecimalPlaces, která udává počet desetinných míst. Tuto hodnotu nastavme na 2 oběma ovládacím prvkům.

Také nastavíme vlastnosti Minimum a Maximum, v našem případě minimum na nějakou nízkou hodnotu a maximum na nějakou vysokou, např. -1000000 a 1000000. Pokud bychom chtěli využít maximální hodnoty daného datového typu, musíme limity nastavit v kódu formuláře pomocí vlastnosti MaxValue a MinValue na daném datovém typu.

Výhodou zadávání čísel tímto ovládacím prvkem je, že uživatel nemůže zadat nesmyslnou hodnotu. Pokud bychom číslo parsovali z prvku TextBox (který si ukážeme v dalších lekcích), mohla by naše aplikace při nevalidním vstupu spadnout. Je vždy jednodušší vybrat správný ovládací prvek než ošetřovat uživatelský vstup.

Prvky pojmenujeme jako cislo1NumericUpDown a cislo2NumericUpDown. Všimněte si, že jméno by mělo vždy obsahovat i typ ovládacího prvku. Můžeme tak mít např. vekLabel a vekNumericUpDown, kdy label je popisek pole k zadání věku a numericUpDown je potom toto pole. Navíc se v kódu potom lépe orientuje. Někdy se používá i cisloNmr,vypocitejBtn a podobně.

ComboBox

Jsme skoro v cíli. ComboBox je vyjížděcí seznam s několika předdefinovanými prvky. Prvky můžeme buď naklikat v návrháři nebo vložit z kódu a to i za běhu programu. Toto platí pro všechny komponenty, všechny vlastnosti z návrháře můžeme nastavovat i z kódu. Některé pokročilé vlastnosti jdou však nastavit jen z kódu a v návrháři nejsou.

Ovládací prvek pojmenujeme operaceComboBox a u vlastnosti Items klikneme na tlačítko "...". Do nově otevřeného okna vypíšeme možnosti, které v comboBoxu půjdou vybrat. Každou možnost zapíšeme na samostatný řádek, v našem případě to budou hodnoty +, -, *, /.

Kód formuláře

Přesuneme se do zdrojového kódu formuláře. Již víme, že to uděláme zkratkou Ctrl + Alt + 0 nebo kliknutím pravým tlačítkem myši na formulář a zvolením možnosti View Code.

V konstruktoru formuláře hned po zavolání InitializeComponents() nastavíme vybranou položku prooperaceComboBox. Uděláme to nastavením vlastnosti SelectedIndex na 0, tedy první položku:

Z formuláře máme samozřejmě přístup ke všem jeho prvkům.

Do konstruktoru vkládáme ten kód, který se má vykonat po vytvoření formuláře, ale to je snad jasné. Když aplikaci spustíte, bude vybrané sčítání:

Obsluha událostí

Zbývá nám tedy již jen reagovat na událost kliknutí tlačítka. Přesuneme se z kódu zpět na formulář a na tlačítko 2x klikneme. V kódu nám přibyla nová metoda:

Vraťme se ještě do designeru (klávesa Shift + F7) a označme tlačítko. V oknu Properties můžeme přepínat mezi vlastnostmi a událostmi a to pomocí níže zvýrazněných tlačítek:

Vidíme zde naší událost Click, kterou odsud můžeme odstranit a případně znovu přidat. Některé ovládací prvky mají speciální události, pro které vygenerujeme metody právě odtud.

Výpočet

Přejděme k samotnému výpočtu. Kód nebude nijak složitý, jednoduše v obslužné metodě tlačítka naifujeme vybrané položky operaceComboBox a podle toho vypočítáme výsledek. Ten poté nastavíme jako text vysledekLabel. Neměli bychom zapomenout ošetřit dělení nulou.

Příklad kódu:

Nejprve si uložíme hodnoty z ovládacích prvků do proměnných, je to tak přehlednější. K vybrané položce comboBoxu se dostaneme přes SelectedItem, který je typu object. V našem případě ho musíme převést na string. Stejně tak bychom mohli pracovat i s pouhým číslem položky přes SelectedIndex. Jelikož NumericUpDown vrací hodnotu ve vlastnosti Value, která je typu decimal, musíme ji převést na double pomocí třídy Convert.

V případě nulového dělitele zobrazujeme uživateli MessageBox pomocí stejnojmenné statické třídy a metody Show(). Nakonec do vysledekLabel vypíšeme výsledek. Na rozdíl od konzole, kde šlo jednoduše vypsat i čísla, zde musíme číslo nejprve převést na string.

Formuláři ještě můžeme nastavit ikonu přes vlastnost Icon (vybereme soubor s ikonkou), Text nastavíme na "Kalkulačka" a StartPosition na CenterScreen. Formulář se tak vytvoří uprostřed obrazovky. Pokud nastavíme FormBorderStyle na hodnotu FixedSingle, nepůjde formulář roztahovat, což se pro naší aplikaci hodí. Stejně tak můžeme zakázat maximalizaci okna pomocí vlastnosti MaximizeBox.