1. diel - Úvod do Windows Forms aplikácií

Vitajte u prvej lekcie kurzu, v ktorom sa naučíme vytvárať okenné (formulárové) aplikácie v C# .NET a vyskúšame si použitia jednotlivých komponentov. Budeme pracovať s tlačidlami, textovými poľami, tabuľkami, ale aj s obrázkami, časovačmi a ďalšími tzv. Ovládacími prvkami (anglicky controls), ktoré máme v týchto aplikáciách k dispozícii.

Kurz budem písať tak, aby ste nepotrebovali žiadne pokročilé znalosti. Predpokladám však, že poznáte aspoň základy objektovo orientovaného programovania.

Windows Forms

Windows Forms je prvým frameworkom z .net, ktorý umožňuje jednoduchú tvorbu formulárových aplikácií pomocou grafického dizajnéra. Nájdeme tu plnú sadu pripravených ovládacích prvkov (niekedy označovaných ako komponenty) pre väčšinu situácií. A ak nám nebudú stačiť, môžeme si samozrejme vytvoriť vlastné alebo upraviť nejakú existujúcu. Práve Windows Forms sa budeme v tomto kurze venovať.

V súčasnej dobe existuje spolu s WinForms ešte jeden modernejší framework WPF (Windows Presentation Foundation). Obsahuje lepšie oddelenie logiky a výstupu, podporu rýchlejšieho vykresľovanie, animácií, binding a ďalších nových technológií. V praxi sa u formulárových aplikácií používajú oba frameworky, u novších aplikácií WPF, existujúce aplikácie z väčšiny používajú WinForms. V súčasnej dobe nie je WinForms označený za zastaraný a stále sa používa, jeho použitie je jednoduché a určite sa v praxi stretnete s mnohými aplikáciami, ktoré sú vo WinForms napísané. Mali by ste o nich teda mať aspoň nejaké povedomie, aj keď je určite lepšia tvoriť nové aplikácie rovno vo WPF, ktoré je technologicky oveľa ďalej.

Prvý formulárové aplikácie

Nezačneme inak, než klasickou aplikáciou Hello World, tentoraz formulárové Ak ste nečítali tunajší kurz, tak zopakujem, že je to jednoduchá aplikácia, ktorá nerobí nič iné, než že vypíše nejaký text.

Vytvorte si nový projekt, ako typ projektu vyberte Windows Forms Application. Ako názov zvolíme HelloForms.

Okno vášho Visual Studia by teraz malo vyzerať asi takto:

Popíšme si jeho jednotlivé časti, ktoré budeme pri vývoji formulárových aplikácií používať. Dôležité časti sú na obrázku vyššie zvýraznené červeno.

• Designer (Grafický návrhár) - V Designeri vidíme, ako formulár vyzerá. Zatiaľ je to len prázdne okno.
• Properties (Vlastnosti) - V okne Properties vidíme vlastnosti aktuálne označeného prvku na formulári. Ak okno nevidíte, zapnite si ho v menu View -> Properties Window.
• Toolbox (Panel s nástrojmi) - Toolbox je Výjazdný okno, ktoré slúžia ako paleta s jednotlivými ovládacími prvkami, ktoré môžeme na formulár vložiť.

Nastavenie vlastností ovládacích prvkov

Keď označíme nejaký prvok na formulári alebo formulár samotný, môžeme v okne Properties meniť jednotlivé vlastnosti tohto prvku.

Keďže na formulári žiadny prvok nemáme, je označený práve formulár. Formulári zmeníme titulok na "Pozdrav". Vyhľadajte si vlastnosť Text a do nej vložte hodnotu "Pozdrav" (bez úvodzoviek). Výsledok sa hneď prejaví v návrhári. Týmto spôsobom budeme nastavovať vlastnosti všetkých prvkov na formulári.

Vloženie ovládacích prvkov na formulár

Teraz otvoríme Toolbox a vyberieme ovládací prvok Label, čo je textový popis. Vložíme ho do formulára buď dvojklikom alebo presunutím myšou. Formulár si zmenšite a label myšou jednoducho presuňte doprostred. Označenému labelu v oknu Properties nastavte text na "Pozdrav z formuláře".

Vašu prvú okenné aplikácii môžete spustiť ako vždy zeleným tlačidlom Play alebo klávesom F5. Mali by ste dostať podobný výsledok:

Pod pokrievkou

Vysvetlime si, ako aplikácia funguje vnútri. Samotný formulár je samozrejme objekt (ako inak ). Je definovaný triedou Form1, ktorú nájdeme v súbore Form1.cs. Súbor si samozrejme môžete premenovať v Solution Exploreri, premenuje sa aj trieda. Pre našu aplikáciu by sa formulár mohol menovať napr. PozdravForm, premenujte si ho tak, pretože sa v aplikácii potom budete lepšie orientovať.

Visual Studio zobrazuje buď grafický náhľad formulára alebo jeho zdrojový kód. Medzi týmito režimami môžeme prepínať buď pravým kliknutím na formulár (resp. Na kód) a výberom možnosti View Code (resp. View Designer). Užitočné je poznať skratky Shift + F7 k presunu do návrhára a Ctrl + Alt + 0 k presunu do kódu. Musí ísť o nulu na alfanumerickej klávesnici (tú vľavo).

Presuňte sa do kódu formulára, ktorý vyzerá asi takto (vynechal som počiatočné using y):

namespace HelloForms
{
    public partial class PozdravForm : Form
    {
        public PozdravForm()
        {
            InitializeComponent();
        }
    }
}

Vidíme, že formulár je trieda dedičov z triedy Form. Nikde tu nie je ani pamiatky po tom, čo sme naklikali, iba v konstruktoru sa volá podivná metóda InitializeComponent().

Trieda je označená ako partial, čo znamená, že je definovaná vo viacerých súboroch. Konkrétne existuje ešte súbor PozdravForm.Designer.cs, ktorý obsahuje už menej prehľadný kód, ktorý sa automaticky generuje tým, ako v návrhári klikáme.

Tento kód je schválne oddelený do ďalšieho súboru, aby nerobil zdrojový kód formulára neprehľadným. Do súboru Designer.cs nikdy ručne nezasahujte a vlastne by ste o jeho existencii ani nemuseli vedieť. Ukážme si ale jeho obsah, aby sme pochopili, ako aplikácia funguje:

namespace HelloForms
{
    partial class PozdravForm
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.label1 = new System.Windows.Forms.Label();
            this.SuspendLayout();
            //
            // label1
            //
            this.label1.AutoSize = true;
            this.label1.Location = new System.Drawing.Point(75, 32);
            this.label1.Name = "label1";
            this.label1.Size = new System.Drawing.Size(135, 17);
            this.label1.TabIndex = 0;
            this.label1.Text = "Pozdrav z formuláře";
            //
            // Form1
            //
            this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 16F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(282, 80);
            this.Controls.Add(this.label1);
            this.Name = "Form1";
            this.Text = "Pozdrav";
            this.ResumeLayout(false);
            this.PerformLayout();

        }

        #endregion

        private System.Windows.Forms.Label label1;
    }
}

V kóde vidíme onú skrytú metódu InitializeComponent(), ktorá nerobí nič iné, než že vytvorí postupne všetky prvky na formulári a nastaví im patričné vlastnosti, ktoré sme zvolili. Vidíme tu, ako sa tvoria náš label a nastavujú sa mu vlastnosti. Metóda sa potom volá v konstruktoru, čím sa formulár inicializuje. Nezainteresovaný programátor je teda úplne odtienený od kódu, čo generuje návrhár. Je to samozrejme hlavne preto, aby ho nemohol rozbiť Avšak je dôležité vedieť, ako to funguje, aby ste boli schopní napr. Pridávať ovládacie prvky za behu aplikácie alebo opraviť chyby v súbore, čo designer generuje.

Dnešný projekt je k stiahnutiu v prílohe článku vrátane zdrojových kódu, bude to tak vždy. Ak vám niečo nešlo, môžete si nájsť chybu. V budúcej lekcii, Jednoduchá kalkulačka v C # .NET Windows Forms , si vysvetlíme, ako fungujú udalosti a naprogramujeme si jednoduchú kalkulačku.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.