3. diel - PRIPOMIENKOVÉ narodenín - Návrh formulárov

V minulej lekcii, Jednoduchá kalkulačka v C # .NET Windows Forms , sme sa naučili obsluhovať udalosti a vytvorili jednoduchú kalkulačku. V dnešnom C# .NET tutoriálu začneme pracovať na aplikáciu k upomínania narodenín priateľov. Aplikácia bude vyzerať nasledovne:

Návrh formulára

Ako vždy začneme návrhom formulára. Tentoraz už budeme mať v aplikácii dva.

Prehľadový formulár

Prehľadový formulár je základná okno aplikácie s prehľadom osôb a ich narodenín. Formulár premenujeme na PrehledForm, nastavíme mu titulok na Výročí a môžeme mu nastaviť opäť nejakú ikonu. Tiež nastavíme StartPosition na CenterScreen. Mimochodom, všimnite si, že sa formuláre pomenúvajú PascalCasem (prvé písmeno veľké) a ovládacie prvky CamelCase. Je to preto, že formulár je trieda a jeho prvky sú inštancie.

Ďalej budeme potrebovať nasledujúce ovládacie prvky:

• 8x Label
• 2x Button
• 1x ListBox
• 1x MonthCalendar

Labely

Labely rozmiestnite ako na obrázku vyššie. Labelům na ľavej strane nastavíme text podľa obrázka. Labelům na strane pravej text nastavovať nebudeme, ale nastavíme im meno, aby sme text mohli neskôr nastaviť z kódu. Labely na pravej strane sa budú menovať: dnesLabel, nejblizsiLabel, narozeninyLabel, vekLabel.

Tlačidla

Dva buttony umiestnime dole a nastavíme im Text na Přidat a Odebrat. Asi vás neprekvapí, že ich názvy budú pridatButton a odebratButton. Tlačidlám môžeme pridať nejaké ikony, ja som tie na obrázku našiel na http://www.iconfinder.com, veľkosť je 32x32 pixelov. Obrázok nastavíme pomocou vlastnosti Image, kde klikneme na tlačidlo "...". Obrázok teraz môžeme nahrať ako Local resource alebo Project resource. Vyberieme Local resource a importuje príslušný obrázok z disku. Aby bol obrázok vľavo, vedľa textu tlačidla, musíme nastaviť vlastnosť TextImageRelation na ImageBeforeText. Výšku tlačidla môžeme nechať nastaviť automaticky pomocou vlastnosti AutoSize. To isté urobíme aj pre druhé tlačidlo.

Listbox

ListBox je v podstate rozbalený ComboBox, s ktorým sme sa zoznámili v minulej lekcii. Inak funguje úplne rovnako a my ho využijeme pre zobrazenie zoznamu osôb. ListBox pomenujeme osobyListBox a nastavíme mu vlastnosť Sorted na True, tak v ňom budú prvky zoradené, v našom prípade podľa abecedy.

MonthCalendar

MonthCalendar slúži na zobrazenie rozbaleného mesiaca alebo niekoľkých mesiacov. Komponenta je primárne určená na výber intervalu medzi dvoma dátumami, ale my ju využijeme na ukázanie narodenín vybranej osoby. Ovládací prvok pomenujeme narozenMonthCalendar a nastavíme mu Enabled na False, aby s ním užívateľ nemohol manipulovať. Ďalej vypneme ShowToday a MaxSelectionCount nastavíme na 1. To znamená, že môžeme naraz vybrať najviac 1 deň.

Kotvy

Keď aplikáciu spustíte a formulár zväčšíte, bude vyzerať nasledovne:

Samozrejme by bolo žiaduce, aby voľné miesto využil zoznam osôb, ktorých tam môže byť veľa a môžu mať dlhá mená. Z toho dôvodu prvkom vo formulári nastavíme tzv. Kotvy. Kotva (anglicky anchor) určuje ku ktorým hranám formulára sa prvok prichytí. V predvolenom nastavení sa všetky prvky držia len ľavej a hornej hrany. My budeme určite chcieť, aby sa ListBox držal tiež hrany spodnej a pravej, teda všetkých. Akonáhle sa formulár roztiahne, roztiahne sa aj ListBox. Vlastnosť Anchor ListBox u nastavíme nasledujúcim spôsobom:

Keď však teraz aplikáciu spustíte a roztiahnete formulár, výsledok asi nebude taký, aký ste očakávali. Musíme totiž upraviť aj ovládacie prvky pod listbox a vedľa neho. Tie sa musia prichytiť k dolnej, resp. pravej hrane okna.

Obom tlačidlám nastavíme iba spodnú kotvu. MonthCaledar a štyrom labelům nad ním vypneme ľavú kotvu a zapneme pravú. Po roztiahnutí okna v spustenej aplikácii aby ste mali dospieť k tomuto výsledku:

Prehľadový formulár môžeme vyhlásiť za navrhnutý.

Pripájací formulár

Druhý formulár bude slúžiť na pridávanie nových osôb a bude mať nasledujúce podobu:

Formulár pridáme pravým kliknutím na projekt v Solution Exploreri a vybraním možnosti Add -> Windows Form. Pomenujeme ho OsobaForm. Text nastavíme na Přidat osobu. Opäť nastavíme StartPosition na CenterScreen a môžeme nastaviť ikonu. FormBorderStyle nastavíme na FixedSingle a zakážeme maximalizáciu vlastností MaximizeBox, okno teda nepôjde rozťahovať ani maximalizovať.

Do formulára ďalej vložíme nasledujúce ovládacie prvky:

• 2x Label
• 1x TextBox
• 1x DateTimePicker
• 1x Button
• 1x PictureBox

Labely

Labely tu slúži len na opis textových polí, čiže im iba nastavte Text podľa obrázku vyššie a nemusíte ich ani pomenovávať.

Textbox

TextBox je ako asi tušíte pole, kam môže užívateľ aplikácie zadať ľubovoľný text. O účele zadanie mena je ideálne. Niektorí začiatočníci ho používajú aj k zadávanie čísel alebo dátumov, čo je však zle, ako sme si už vysvetlili minule. TextBox pomenujte jmenoTextBox.

DateTimePicker

Opäť asi tušíte, že DateTimePicker bude slúžiť k výberu dátumu a času. Pomenujeme ho narozeninyDateTimePicker. Vo Format si môžeme vybrať, či chceme vyberať dátum (aj v akom formáte) alebo čas. Nás čas u narodenín samozrejme nezaujíma, ale v inej aplikácii by sa nám mohol hodiť.

Button

Tlačidlo na potvrdenie dialógu pomenujeme okButton a nastavíme mu Text na OK.

PictureBox

PictureBox je veľmi zaujímavý ovládací prvok, ktorý sa používa buď pre zobrazenie obrázka alebo pre kreslenie napr. Nejakých tvarov, čo si ukážeme v ďalších lekciách. Tu do PictureBox u iba vložíme ikonku, aby formulár vyzeral lepšie. Asi vás neprekvapí, že to urobíte pomocou vlastnosti Image. Ak je ikonka väčšia ako PictureBox, môžete nastaviť vlastnosť SizeMode na Zoom.

Formuláre máme pripravené, v budúcej lekcii, PRIPOMIENKOVÉ narodenín - Logická vrstva , si vytvoríme triedy s logikou aplikácie. Naklikané formuláre sú k stiahnutiu nižšie.

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