3. díl - Upomínač narozenin - Návrh formulářů

C# .NET Windows Forms Upomínač narozenin - Návrh formulářů

V minulém dílu seriálu tutoriálů o tvorbě formulářových aplikací v C# .NET jsme se naučili obsluhovat události a vytvořili jednoduchou kalkulačku. V dnešním dílu začneme pracovat na aplikaci k upomínání narozenin přátel. Aplikace bude vypadat následovně:

Aplikace na upomínání narozenin v C# .NET

Návrh formuláře

Jako vždy začneme návrhem formuláře. Tentokrát již budeme mít v aplikaci dva.

Přehledový formulář

Přehledový formulář je základní okno aplikace s přehledem osob a jejich narozenin. Formulář přejmenujeme na PrehledForm, nastavíme mu titulek na Výročí a můžeme mu nastavit opět nějakou ikonu. Také nastavíme StartPosition na CenterScreen. Mimochodem, všimněte si, že se formuláře pojmenovávají PascalCasem (první písmeno velké) a kontrolky camelCasem. Je to proto, že formulář je třída a kontrolky jsou instance.

Dále budeme potřebovat následující kontrolky:

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

Labely rozmístěte jako na obrázku výše. Labelům na levé straně nastavíme text podle obrázku. Labelům na straně pravé text nastavovat nebudeme, ale nastavíme jim jméno, abychom text mohli později nastavit z kódu. Labely na pravé straně se budou jmenovat: dnesLabel, nejblizsiLabel, narozeninyLabel, vekLabel.

Tlačítka

Dva buttony umístíme dolů a nastavíme jim text na Přidat a Odebrat. Asi vás nepřekvapí, že jejich názvy budou pridatButton a odebratButton. Tlačítkům můžeme přidat nějaké ikony, já jsem ty na obrázku našel na http://www.iconfinder.com, velikost je 32x32 pixelů. Obrázek nastavíme pomocí vlastnosti Image, kde klikneme na tlačítko "...". Obrázek nyní můžeme nahrát jako Local resource nebo Project resource. Vybereme Local resource a naimportujeme příslušný obrázek z disku. Aby byl obrázek vlevo, vedle textu tlačítka, musíme nastavit vlastnost TextImageRelation na ImageBeforeText. Výšku tlačítka můžeme nechat nastavit automaticky pomocí vlastnosti AutoSize. To samé uděláme i pro druhé tlačítko.

ListBox

ListBox je v podstatě rozbalený ComboBox, se kterým jsme se seznámili v minulé lekci. Jinak funguje úplně stejně a my ho využijeme pro zobrazení seznamu osob. ListBox pojmenujeme osobyListBox a nastavíme mu vlastnost Sorted na True, tak v něm budou prvky seřazené, v našem případě podle abecedy.

MonthCalendar

MonthCalendar slouží k zobrazení rozbaleného měsíce nebo několika měsíců. Komponenta je primárně určena k výběru intervalu mezi dvěma daty, ale my ji využijeme k ukázání narozenin vybrané osoby. Kontrolku pojmenujeme narozenMonthCa­lendar a nastavíme jí Enabled na False, aby s ní uživatel nemohl manipulovat. Dále vypneme ShowToday a MaxSelectionCount nastavíme na 1. To znamená, že můžeme najednou vybrat nejvýše 1 den.

Kotvy

Když aplikaci spustíte a formulář zvětšíte, bude vypadat následovně:

Okno aplikace bez kotev

Samozřejmě by bylo žádoucí, aby volné místo využil seznam osob, kterých tam může být mnoho a mohou mít dlouhá jména. Z toho důvodu kontrolkám ve formuláři nastavíme tzv. kotvy. Kotva (anglicky anchor) určuje ke kterým hranám formuláře se kontrolka přichytne. Ve výchozím nastavení se všechny kontrolky drží jen levé a horní hrany. My budeme určitě chtít, aby se ListBox držel také hrany spodní a pravé, tedy všech. Jakmile se formulář roztahne, roztahne se i ListBox. Vlastnost Anchor ListBoxu nastavíme následujícím způsobem:

Kotvy anchors ve Visual Studio

Když však nyní aplikaci spustíte a roztáhnete formulář, výsledek asi nebude takový, jaký jste očekávali. Musíme totiž upravit i kontrolky pod ListBoxem a vedle ListBoxu. Ty se musí přichytit k dolní, resp. pravé hraně okna.

Oběma tlačítkům nastavíme pouze spodní kotvu. MonthCaledar a čtyřem labelům nad ním vypneme levou kotvu a zapneme pravou. Po roztažení okna ve spuštěné aplikaci abyste měli dospět k tomuto výsledku:

Kotvy anchors ve Visual Studio

Přehledový formulář můžeme prohlásit za navržený.

Přidávací formulář

Druhý formulář bude sloužit k přidávání nových osob a bude mít následující podobu:

Formulář pro přidání nové osoby v C# .NET

Formulář přidáme pravým kliknutím na projekt v Solution Exploreru a vybráním možnosti Add -> Windows Form. Pojmenujeme ho OsobaForm. Text nastavíme na Přidat osobu. Opět nastavíme StartPosition na CenterScreen a můžeme nastavit ikonu. FormBorderStyle nastavíme na FixedSingle a zakážeme maximalizaci vlastností MaximizeBox, okno tedy nepůjde roztahovat ani maximalizovat.

Do formuláře dále vložíme následující kontrolky:

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

Labely zde slouží jen k popisu textových polí, čili jim pouze nastavte Text podle obrázku výše a nemusíte je ani pojmenovávat.

TextBox

TextBox je jak asi tušíte pole, kam může uživatel aplikace zadat libovolný text. K účelu zadání jména je ideální. Někteří začátečníci ho používají i k zadávání čísel nebo datumů, což je ovšem špatně, jak jsme si již vysvětlili minule. TextBox pojmenujte jmenoTextBox.

DateTimePicker

Opět asi tušíte, že DateTimePicker bude sloužit k výběru data a času. Pojmenujeme ho narozeninyDate­TimePicker. Ve Format si můžeme vybrat, zda chceme vybírat datum (i v jakém formátu) nebo čas. Nás čas u narozenin samozřejmě nezajímá, ale v jiné aplikaci by se nám mohl hodit.

Button

Tlačítko k potvrzení dialogu pojmenujeme okButton a nastavíme mu Text na OK.

PictureBox

PictureBox je velmi zajímavá kontrolka, která se používá buď pro zobrazení obrázku nebo pro kreslení např. nějakých tvarů, což si ukážeme v dalších dílech. Zde do PictureBoxu pouze vložíme ikonku, aby formulář vypadal lépe. Asi vás nepřekvapí, že to uděláte pomocí vlastnosti Image. Pokud je ikonka větší než PictureBox, můžete nastavit vlastnost SizeMode na Zoom.

Formuláře máme připravené, v příští lekci si vytvoříme třídy s logikou aplikace. Naklikané formuláře jsou ke stažení níže.


 

Stáhnout

Staženo 735x (332.63 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (6 hlasů) :
55555


 


Miniatura
Všechny články v sekci
Okenní aplikace v C#
Miniatura
Následující článek
Upomínač narozenin - Logická vrstva

 

 

Komentáře

Avatar
Libor Šimo (libcosenior):

Ahoj, chvíľku mi trvalo kým som našiel "ImageTextRelation" pretože vo vlastnostiach sa to nenachádza.
Možno by bolo dobre to v článku opraviť: TextImageRelation

;)
Odpovědět 28.12.2013 10:18
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovídá na Libor Šimo (libcosenior)
Michal Žůrek (misaz):

David Čápka to má prohozené, při přepisu do Visual Basicu jsem si toho taky všimnul.

Odpovědět 28.12.2013 10:25
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovědět 9.1.2014 18:28
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
lukas.kotyza
Člen
Avatar
lukas.kotyza:

Ahojte, vím že tady otravuju skoro furt ale mám aplikaci hotovou a dodělávám jen grafiku a nemůžu najít jak změnit ikonu. Pokud s tím máte někdo zkušenosti mohli byste mi s tím prosím poradit?

 
Odpovědět 31. května 16:18
Avatar
Odpovídá na lukas.kotyza
Michal Haňáček:
https://msdn.microsoft.com/en-us/library/339stzf7.aspx

První odkaz co google vrátí na "C# how to change application icon" ... to jsi tomu hledání moc nedal ...

Odpovědět 31. května 16:25
Každé rozhodnutí a každý krok v životě nás někam posune. Bohužel jen některé nás posouvají dopředu.
Avatar
lukas.kotyza
Člen
Avatar
Odpovídá na Michal Haňáček
lukas.kotyza:

ani ne jenom celej den ale moc dík

 
Odpovědět 31. května 16:29
Avatar
lukas.kotyza
Člen
Avatar
lukas.kotyza:

promiňte špatně jsem upřesnil svůj problém já myslel tu ikonu , která se zobrazuje když např. uděláte zástupce na ploše tak tu jsem myslel

 
Odpovědět 31. května 17:59
Avatar
Odpovídá na lukas.kotyza
Michal Štěpánek:

Na dotazy tohoto typu je lepší si založit nové vlákno. Ale jinak je to ve vlastnostech projektu...

Odpovědět 1. června 7:50
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.