Lekce 2 - Jednoduchá kalkulačka v C# .NET Windows Forms

V minulé lekci, Úvod do Windows Forms aplikací, jsme si uvedli technologii Windows Forms a vytvořili okno s textovým popiskem.

V dnešním C# .NET tutoriálu se podíváme na události a vytvoříme jednoduchou kalkulačku. Bude vypadat takto:

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 +, -, *, /.

Položkami nemusí být jen textové řetězce, ale i objekty. Ukážeme si to později.

Vybranou položku lze bohužel nastavit jen z kódu.

Nastavené ovládací prvky uspořádáme na formulář tak, jak bylo uvedeno na začátku článku.

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 pro operaceComboBox. Uděláme to nastavením vlastnosti SelectedIndex na 0, tedy první položku:

public KalkulackaForm()
{
    InitializeComponent();
    operaceComboBox.SelectedIndex = 0;
}

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:

private void vypocitejButton_Click(object sender, EventArgs e)
{

}

Pokud jste dočetli zdejší objektový kurz C# .NET, hlavička metody vám bude nápadně připomínat EventHandler. V souboru KalkulackaForm.Designer.cs bychom nalezli kód, který události tlačítka přiděluje právě tuto metodu. Pokud jste předchozím větám nerozuměli, vůbec to nevadí. Bude vám stačit, že se tato metoda spustí v případě, když se na tlačítko klikne.

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.

Nikdy neodstraňujte události tak, že vymažete obslužnou metodu z kódu, designer by přestal fungovat a museli byste jeho soubor opravit (konkrétně odstranit přiřazení neexistující metody do události). Správně je to jedině přes designer.

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.

Kód obslužné metody by mohl vypadat takto:

private void vypocitejButton_Click(object sender, EventArgs e)
{
    // příprava proměnných
    string operace = operaceComboBox.SelectedItem.ToString();
    double cislo1 = Convert.ToDouble(cislo1NumericUpDown.Value);
    double cislo2 = Convert.ToDouble(cislo2NumericUpDown.Value);
    double vysledek = 0;

    // výpočet
    if (operace == "+")
        vysledek = cislo1 + cislo2;
    else if (operace == "-")
        vysledek = cislo1 - cislo2;
    else if (operace == "*")
        vysledek = cislo1 * cislo2;
    else if (operace == "/")
    {
        if (cislo2 != 0)
            vysledek = cislo1 / cislo2;
        else
            MessageBox.Show("Nulou nelze dělit");
    }
    vysledekLabel.Text = vysledek.ToString();
}

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.

Kód je jako vždy v příloze.

V následujícím cvičení, Řešené úlohy k 1.-2. lekci Windows Forms v C# .NET, si procvičíme nabyté zkušenosti z předchozích lekcí.

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