Tvorba programů s GUI v C#

Transkript

1 Tvorba programů s GUI v C# Obsah Obsah... 1 Pojem grafické uživatelské rozhraní (GUI)... 2 Okna se zprvou... 5 Vlastnosti formulře Udlosti formulře Ovldací prvky Umisťovní ovldacích prvků na formulř Obsluha udlostí prce s myší Použití ovldacího prvku popisek (Label) Prce s barvami v.net Vstup a výstup řetězců Ovldací prvek Zaškrtvací políčko Ovldací prvek Přepínač Ovldací prvek skupinový rmeček Ovldací prvky posuvníky Ovldací prvky číselníky Ovldací prvek ProgressBar Ovldací prvek Track Bar Ovldací prvek Link Label Ovldací prvky seznamy Význam nabídek Ovldací prvek MenuStrip Standardní dialogy Zobrazovní obrzků na pozadí formulře Ukldní a zpracovní data a času Ovldací prvek MonthCalendar Ovldací prvek DateTimePicker Ovldací prvek Timer Ovldací prvek StatusStrip Ovldací prvek TabControl Ovldací prvek splitcontainer Tvorba programů s GUI v C# 1/104

2 Ovldací prvek ToolStrip Prce s ikonami Prce s kurzory Prostředky (zdroje) Seznam obrzků Cílem kapitoly je na řadě řešených úloh ukázat tvorbu aplikací pro Windows s využitím grafického uživatelského rozhraní a jazyka C#. Je vysvětleno použití různých ovládacích prvků, nastavení jejich vlastností a obsluha událostí. Je ukázána práce s ikonami, kurzory, bitmapami a využití prostředků. Klíčové pojmy: Grafické uživatelské rozhraní (GUI), okna se zprvou, formulř, vlastnosti formulře, udlosti formulře, ovldací prvky, vlastnosti ovldacích prvků, udlosti ovldacích prvků, obsluha udlostí prce s myší a s klvesnicí, použití jednotlivých ovldacích prvků, prce s ikonami, kurzory a bitmapami, prostředky. Pojem grafické uživatelské rozhraní (GUI) Podle wikipedie je grafické uživatelské rozhraní (anglicky Graphical User Interface, znmé pod zkratkou GUI) je uživatelské rozhraní, které umožňuje ovldat počítač pomocí interaktivních grafických ovldacích prvků. Na monitoru počítače jsou zobrazena okna, ve kterých programy zobrazují svůj výstup. Uživatel použív klvesnici, myš a grafické vstupní prvky jako jsou menu, ikony, tlačítka, posuvníky a další ovldací prvky. Výhoda aplikací s GUI Díky GUI mají aplikace lepší vzhled než konzolové aplikace, ale mnohem důležitější je, že jsou také snadněji obsluhovatelné. Například prostřednictvím nabídky v Poznmkovém bloku je snadné otevřít soubor. Klepnutím na příkaz Otevřít v nabídce Soubor zobrazíte další vizulní komponentu - dialog Otevřít, v němž jednoduše vyberete soubor, který chcete otevřít. Pěkn tvř GUI není zadarmo je vykoupena programovním - na vytvoření okna je zapotřebí množství kódu, který není jednoduchý. Zde vm Visual C# usnadňuje život při založení nového projektu vytvoří okno za vs a také napíše kód zajišťující jeho funkčnost Tvorba programů s GUI v C# 2/104

3 Aplikace, ovldané GUI jsou řízené udlostmi Aplikace, ovldané GUI se chovají i vypadají jinak než jejich předchůdci. Před érou GUI aplikace často říkaly uživateli, co m dělat. Program například vypsal text zprvy: "Zadejte vaše jméno:". Uživatel by pak napsal své jméno a stisknut klvesu ENTER. Do tohoto okamžiku uživatel neměl možnost zadat jméno, a pokud by to nyní neudělal, program by nepokračoval. V takovémto typu programu, který vznikne takzvaným procedurlním programovním, nerozhoduje o pořadí dění uživatel, ale aplikace. Aplikace, ovldané GUI fungují přesně obrceně; uživatel řík aplikaci, co m dělat. Nejdůležitější třída GUI Nejdůležitější třída grafického uživatelského rozhraní je Form, kter umožňuje vytvořit formulř. Samotný formulř však nesplňuje všechny požadavky kladené na aplikace, využívající GUI je třeba přidat další ovldací prvky. Pro prci s formulřem je třeba v aplikaci typu Windows Forms použít jmenný prostor: System.Windows.Forms Novou aplikaci ve Visual studiu C# založíme: File New Project (nebo Ctrl+Shift+N), čímž aktivujeme dialogové okno: Tvorba programů s GUI v C# 3/104

4 Obrzek 1 Volba typu, nzvu a umístění nového projektu Zvolíme jazyk (C#), typ aplikace (pro Windows), jméno projektu (zde WFA GUI), složku umístění a šablony (zde Windows Forms Application). Po založení formulřové aplikace vznikla složka s nzvem projektu a nsledující podsložky a soubory zdrojových kódů: Tvorba programů s GUI v C# 4/104

5 Obrzek 2 Vytvořené soubory a složky Metoda Main je obsažen v souboru Program.cs Nový formulř je v Mainu vytvořený volním metody: Application.Run(new Form1()); Okna se zprvou Do okna se zprvou lze vypsat informaci a vyhodnotit odpověď uživatele. Okna hlšení (okna zprv, Message Boxes) jsou mal okna, kter ns provzejí v aplikacích s GUI a informují ns o chybch, které nastaly, varují ns před akcemi, které by mohly mít neblahý dopad na naše data apod. Většinou obsahují text uvnitř okna, v titulku okna, někdy obsahují ikonu a také obsahují tlačítka, např. OK a Storno. Typické okno hlšení je vidět na nsledující ukzce: Obrzek 3 Ukzka okna se zprvou Okno můžeme aktivovat kliknutím na tlačítko formulře, nebo přímo volním z Mainu metodou Show třídy MessageBox: static void Main() // Vykreslíme okno hlášení s pozdravem // a standardním nastavením: MessageBox.Show("Zdraví tě první aplikace pro Windows."); Metoda Show třídy MessageBox může mít nsledující parametry: text v okně text v zhlaví okna tlačítka (MessageBoxButtons.YesNo) ikona (MessageBoxIcon.Warning) předvolené tlačítko (MessageBoxDefaultButton.Button2) Tvorba programů s GUI v C# 5/104

6 Nastavení tlačítek v okně se zprvou K nastavení tlačítek použijeme výčtový typ MessageBoxButtons. Program 1 Ukázka různých typů oken se zprávou static void Main() string textvokne = " Tlačítko OK "; string textvtitulku = " Různá tlačítka "; MessageBox.Show(textVOkne, textvtitulku); MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.OK); textvokne = "Tlačítka OK a Storno"; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.OKCancel); textvokne = "Tlačítka Přerušit, Opakovat a Přeskočit"; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.AbortRetryIgnore); textvokne = "Tlačítka Ano, Ne, Storno"; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.YesNoCancel); textvokne = "Tlačítka Ano a Ne"; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.YesNo); textvokne = "Tlačítka Opakovat a Storno"; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.RetryCancel); Obrzek 4 Volba hodnoty MessageBoxButtons Nastavení ikony v okně se zprvou Dalším parametrem můžeme nastavit ikonu, kter se vykreslí v okně se zprvou. Použijeme k tomu výčtový typ MessageBoxIcon Tvorba programů s GUI v C# 6/104

7 Obrzek 5 Nastavení ikony v okně se zprvou Program 2 Ukázka různých ikon v okně se zprávou static void Main() string textvokne = " Bez ikony "; string textvtitulku = " Různé ikony "; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.YesNo, MessageBoxIcon.None); textvokne = " S ikonou chyba "; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.YesNo, MessageBoxIcon.Error); textvokne = " S ikonou otazníku "; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.YesNo, MessageBoxIcon.Question); textvokne = " S ikonou varování "; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.YesNo, MessageBoxIcon.Warning); textvokne = " S ikonou informace "; MessageBox.Show(textVOkne, textvtitulku, MessageBoxButtons.YesNo, MessageBoxIcon.Information); Nastavení standardního tlačítka v okně se zprvou Standardní (default) tlačítko lze nastavit s využitím výčtového typu: MessageBoxDefaultButton. Obrzek 6 Nastavení standardního tlačítka Tvorba programů s GUI v C# 7/104

8 Vyhodnocení reakce uživatele Všechny verze metody Show vracejí hodnotu výčtu DialogResult. Tento výčet představuje jednotliv tlačítka a jednotlivé hodnoty jsou opět mnemotechnicky pojmenované v anglickém jazyce. Vytvoříme proměnnou typu DialogResult Do ní uložíme nvratovou hodnotu metody Show Otestujeme hodnotu proměnné příkazem if, respektive while (v cyklu). Program 3 Vyhodnocení reakce uživatele Program testuje reakci uživatele a uloží ji do proměnné konec. Pokud klikne na tlačítko Ano, zobrazí se dialogové okno: Pokud klikne na tlačítko Ne, zobrazí se dialogové okno: static void Main() DialogResult konec; konec = MessageBox.Show("Opravdu končíme?", "Dotaz", MessageBoxButtons.YesNo, MessageBoxIcon.Warning, MessageBoxDefaultButton.Button2); Tvorba programů s GUI v C# 8/104

9 if (konec == DialogResult.Yes) MessageBox.Show("Tak končíme", "Kliknuto na Ano"); else MessageBox.Show("Stejně končíme", "Kliknuto na Ne"); Zadní 1 Vyhodnocení reakce v okně se zprvou V dle uvedeném programu vytvořte cyklus, aby úloha po kliknutí na Ne opravdu neskončila a po kliknutí na Ano zobrazila informaci Tak končím. Zadní 2 Vyhodnocení reakce Ano/Ne/Storno Napište program, který zobrazí nsledující okno hlšení: Pokud uživatel klikne na Ano, zobrazte okno: Pokud uživatel klikne na Ne, zobrazte okno: Tvorba programů s GUI v C# 9/104

10 Jestliže klikne na Storno, zobrazte okno: Vlastnosti formulře Výše uvedené úlohy nevytvřely formulř veškerý kód byl umístěn do Mainu. Formulře Windows (WinForms) umožňují snadnou tvorbu aplikací, přičemž poskytují množství funkcionality. Typick aplikace WinForms m alespoň jeden formulř. Formulř je okno, které znme z Windows. Jeden formulř je obvykle hlavní rodič, nebo vlastník ostatních formulřů. Na formulři se může zobrazovat hlavní nabídka, panely nstrojů, stavový řdek. Po uzavření hlavního formulře aplikace končí. Formulř m řadu vlastností, které můžeme nastavit v okně Properties, které aktivujeme z kontextové nabídky po kliknutí pravým tlačítkem na formulř v okně nvrhu formulře, nebo volbou View Properties. Formulř je pojmenovaný Form1 a v titulkovém pruhu se rovněž zobrazuje text Form1. Oba texty můžeme změnit Tvorba programů s GUI v C# 10/104

11 Obrzek 7 Okno vlastností formulře V levé čsti okna jsou nzvy vlastností, v levé čsti můžeme nastavit hodnotu vlastnosti, v dolní čsti se zobrazuje npověda k označené vlastnosti. Vlastnosti formulře můžeme nastavovat v okně Properties, nebo přímo v programu, jak ukazuje nsledující příklad Tvorba programů s GUI v C# 11/104

12 Program 4 Nastavení vlastností formuláře Nsledující program vytvoří formulř, nastaví mu titulek, šířku, výšku a styl rmečku. Dle znepřístupní maximalizační tlačítko a nastaví kurzor tvaru kříže při najetí na okno. Nakonec umístí formulř do středu obrazovky. static void Main() // Vytvoření nové instance formuláře: Form f = new Form(); // Text v titulku okna: f.text = "Nastavení vlastností formuláře"; // Rozměry f.width = 500; f.height = 250; // Styl rámečku f.formborderstyle = FormBorderStyle.Fixed3D; // Minimalizační tlačítka nebude dostupné f.maximizebox = false; // Kurzor nad oknem - kříž f.cursor = Cursors.Cross; // Vycentrujeme formulář na obrazovce f.startposition = FormStartPosition.CenterScreen; Application.Run(f); Vytvoření více oken (formulřů) Program 5 Vytvoření tří formulářových oken public class Program public static void Main() Obrzek 8 Tři formulřov okna Tvorba programů s GUI v C# 12/104

13 // Vytvoříme instanci formuláře: Form f1 = new Form(); f1.startposition = FormStartPosition.Manual; f1.top = 50; f1.text = "1. formulář"; // Vytvoříme další dvě instance Form f2 = new Form(); f2.text = "2. formulář"; f2.startposition = FormStartPosition.Manual; f2.top = 50; f2.left = f1.width; f2.show(); Form f3 = new Form(); f3.text = "3. formulář"; f3.startposition = FormStartPosition.Manual; f3.top = 50; f3.left = 2*f1.Width; f3.show(); // Zavoláme metodu Application.Run() a předáme jí f1 Application.Run(f1); V programu jsou vytvořeny instance tří formulřů, nastavena jejich pozice a titulek a je zavolan metoda Application.Run(f1), které je předan instance prvního formulře. Aby bylo možné nastavit pozici formulře, je třeba pro formulř nastavit vlastnost StartPosition, jako FormStartPosition.Manual. Aby byly okna umístěny vedle sebe je levý okraj druhého formulře je nastaven na šířku okna a levý okraj třetího formulře je nastaven na dvě šířky okna. Zavřením prvního okna se zavřou i další dvě. Vytvoření pole formulřů const int n = 16; Form[] forms = new Form[n]; Řešen úloha 1 Vlastnosti formulře Vytvořte 10 oken, které se manulně umístí po obrazovce v zvislosti na pořadí okna. Využijte vlastnosti StartPosition (nastavte na Manual) a Top a Left. Velikost každého okna bude 80 x 100. V titulku bude číslo pořadí okna. Okno číslo 1 bude rmcové okno aplikace. Na běžící aplikaci také otestujte chovní aplikace při zavírní oken Tvorba programů s GUI v C# 13/104

14 Obrzek 9 Vytvoření pole formulřů Program 6 Pole deseti formulářů public static void Main() // Vytvoříme 10 oken s různými vlastnostmi: Form[] forms = new Form[10]; int top = 300; for (int i = 0; i < 10; i++) // Vytvoříme nový formulář: forms[i] = new Form(); // Nastavíme velikost: forms[i].width = 80; forms[i].height = 100; forms[i].text = (i + 1).ToString(); // Manuálně umístíme formulář na obrazovce: forms[i].startposition = FormStartPosition.Manual; if (i == 5) top = 400; forms[i].top = top; forms[i].left = * i; if (i > 4) forms[i].left = * (i - 5); // Zobrazíme formulář: forms[i].show(); // První formulář bude rámcový: Application.Run(forms[0]); Řešen úloha 2 Nastavení kurzoru nad formulřem Vytvořte 28 oken, které se manulně umístí po obrazovce v zvislosti na pořadí okna podle uvedeného obrzku. Okna budou mít různé ukazatele myši dle abecedního pořadí. V titulku bude vlastnost Cursor formulře převeden na řetězec Tvorba programů s GUI v C# 14/104

15 Okno číslo 1 bude rmcové okno aplikace. Na běžící aplikaci otestujte vzhled jednotlivých ukazatelů myši. Program 7 Nastavení kurzoru nad formulářem Obrzek oken s různými kurzory public static void Main() Cursor[] kur = Cursors.AppStarting,Cursors.Arrow,Cursors.Cross, Cursors.Default,Cursors.Hand,Cursors.Help,Cursors.HSplit, Cursors.IBeam,Cursors.No,Cursors.NoMove2D,Cursors.NoMoveHoriz, Cursors.NoMoveVert,Cursors.PanEast,Cursors.PanNE,Cursors.PanNorth, Cursors.PanNW,Cursors.PanSE,Cursors.PanSouth,Cursors.PanSW, Cursors.PanWest,Cursors.SizeAll,Cursors.SizeNESW,Cursors.SizeNS, Cursors.SizeNWSE,Cursors.SizeWE,Cursors.UpArrow,Cursors.VSplit, Cursors.WaitCursor; // Vytvoříme 29 oken s různými vlastnostmi: const int n = 28; Form[] forms = new Form[n]; int top=200,left=0; for (int i = 0; i < n; i++) // Vytvoříme nový formulář: forms[i] = new Form(); // Nastavíme velikost: forms[i].width = 100; forms[i].height = 100; // Manuálně umístíme formulář na obrazovce: forms[i].startposition = FormStartPosition.Manual; switch (i) case 7: top = 310; left = 7; break; Tvorba programů s GUI v C# 15/104

16 case 14: top = 420; left = 14;break; case 21: top = 530;left = 21; break; forms[i].top = top ; forms[i].left = *(i-left); // Nastavíme kurzor: forms[i].cursor = kur[i]; // Nastavíme titulek: forms[i].text = forms[i].cursor.tostring(); // Zobrazíme formulář: forms[i].show(); // První formulář bude rámcový: Application.Run(forms[0]); Pomocí vlastnosti Opacity můžete nastavit průhlednost formulře. Udlosti formulře Na tomto místě si ukžeme, jak lze obsloužit udlosti formulře. Zaměříme se na udlost, kter se spustí v případě, že je potřeba překreslit klientskou oblast okna. Aplikace typu Windows Forms je řízen udlostmi. Ovldací prvky vyvolvají udlosti (events) a na tyto udlosti může reagovat klientský kód obsloužením dané udlosti. Víme, že aplikace typu Windows Forms začín statickou metodou System.Windows.Forms.Application. Run, které je předn rmcový formulř aplikace. Uvnitř této metody se neustle ček na udlosti, jako například pohyb myší, kliknutí, stisk tlačítka či ždost o překreslení okna. Zaměřme se zatím na posledně zmíněnou udlost, kter je vyvolna, pokud je potřeba překreslit okno. Takov situace může nastat například v případě, kdy okno bylo skryto a nsledně zobrazeno. Je potřeba dané okno překreslit, obzvlště klienstkou čst okna, kter je zvisl na konkrétní aplikaci. Řešen úloha 3 Kliknutí na formulř pro změnu barvy Vytvořte aplikaci typu Windows Forms odvozením formulře. Na počtku bude barva pozadí formulře bíl. Formulř spouští při kliku myší do formulře udlost Click, kter je typu EventHandler. Přepište odpovídající obslužnou metodu této udlosti tak, že při kliku na formulř se změní barva pozadí na černou a navíc se změní titulek formulře. Formulř bude před kliknutím vypadat nsledovně: Tvorba programů s GUI v C# 16/104

17 A po kliknutí Potřebujeme nastavit obsluhu udlostí při vytvření formulře (Load) a při kliknutí myší na formulř. Zobrazíme si podoknu Properties (View Properties Window, nebo F4) Tvorba programů s GUI v C# 17/104

18 Dvojklikem na Load se dostaneme do režimu editace metody pro obsluhu otevření formulře a dvojklikem na MouseClick se dostaneme do režimu editace metody pro obsluhu kliknutí myší na formulři. Obrzek 11 Okno Properties Do těla uvedených metod napíšeme nsledující kód: private void Form1_MouseClick(object sender, MouseEventArgs e) this.backcolor = Color.Red; this.text = "Bylo kliknuto na formulář"; Tvorba programů s GUI v C# 18/104

19 private void Form1_Load(object sender, EventArgs e) this.text = "Klikni myší na formulář pro změnu barvy"; this.width = 400; Ovldací prvky Zkladem uživatelského rozhraní ve WinForm jsou interaktivní grafické ovldací prvky. Pomocí ovldacích prvků uživatel komunikuje s programem. Ovldací prvek je objekt nějaké třídy, kter je odvozen ze zkladní třídy System.Windows.Forms.Control. Ovldací prvek je umístěn ný na formulři a m za úkol usnadnit uživateli vstup údajů. Je např. jednodušší jednotlivé položky vybírat ze seznamu než je vypisovat. Standardní ovldací prvky jsou dostupné v toolboxu VS.NET. Ovldací prvky lze rozdělit do několika kategorií: Akční kliknutí uživatele vyvol akci Hodnotové zobrazují nějakou hodnotu (text, obrzek), ale neumožňují ji měnit Ovldací prvky pro seznam zobrazí seznam hodnot Kontejnerové ovldací prvky umožňují seskupovní a uspořdvní jiných ovldacích prvků Akční ovldací prvky Tlačítko (Button) Panel nstrojů (ToolBar) Hlavní nabídka (MainMenu) Kontextov nabídka (ContextMenu) Hlavní udlostí akčních ovldacích prvků je udlost Click. Umisťovní ovldacích prvků na formulř Chceme-li na formulř v režimu nvrh (Design) umisťovat ovldací prvky, je vhodné si zobrazit panel nstrojů (Toolbox) příkazem: View Toolbox, nebo Ctrl+Alt+X Tvorba programů s GUI v C# 19/104

20 Obrzek 12 Umisťovní ovldacích prvků na formulř Vložení ovldacích prvků do formulře Zobrazíme si sadu nstrojů (View - Toolbox) Nakreslíme ovldací prvek Nastavíme vlastnosti ovldacího prvku Některým ovldacím prvkům (např. tlačítku) přiřadíme obsluhu udlosti (kód) Vlastnosti ovldacích prvků nastavujeme v okně Properties (vlastnosti). Vlastnost Name ovldacích prvků Je jméno ovldacího prvku, pomocí kterého s prvkem pracujeme v programu. Vlastnost Text ovldacího prvku Je text, který se u ovldacího prvku zobrazuje. Z nabídky nstrojů můžeme vybrat například tlačítko a myší ho nakreslit na formulři. Dvojklikem na nakreslené tlačítko se dostaneme do režimu editace kódu metody button1_click, kter obsluhuje kliknutí na tlačítko. Po kliknutí na tlačítko Events můžeme vybrat udlost, kterou chceme obsluhovat pro vybraný prvek na formulři. Mme-li vybrané tlačítko button1, můžeme získat nsledující seznam udlostí: Tvorba programů s GUI v C# 20/104

21 Obrzek 13 Udlosti pro tlačítko Obsluha udlostí prce s myší Zkladní udlosti myši nastvají v tomto pořadí: MouseEnter kurzor vstoupil na ovldací prvek MouseMove thnutí myší nad tlačítkem MouseHover zdržení kurzoru nad tlačítkem MouseDown bylo stisknuté tlačítko myši MouseUp bylo uvolněné tlačítko myši MouseLeave kurzor opustil ovldací prvek Řešen úloha 4 Obsluha prce s myší Vytvořte aplikaci, kter bude obsluhovat všechny uvedené udlosti myši. Nzev aktulně provedené udlosti se vždy vypíše do klientské oblasti okna Tvorba programů s GUI v C# 21/104

22 Na formulř umístíme šest tlačítek a každému z nich nastavíme obsluhu určité udlosti. Implicitní jména tlačítek jsou: button1 až button6. Tlačítka jsou číslované v pořadí jejich vytvoření. Jméno tlačítka můžeme změnit v okně Properties. Nzev obslužné metody konkrétního tlačítka začín nzvem tlačítka a za znakem podtržítko je uveden nzev obsluhované udlosti (MouseEnter, MouseMove, MouseDown, MouseUp, MouseLeave, MouseHover). private void button1_mouseenter(object sender, EventArgs e) this.text = "MouseEnter"; private void button2_mousemove(object sender, MouseEventArgs e) this.text = "MouseMove"; private void button3_mousehover(object sender, EventArgs e) this.text = "MouseHover"; private void button5_mousedown(object sender, MouseEventArgs e) this.text = "MouseDown"; private void button7_mouseleave(object sender, EventArgs e) this.text = "MouseLeave"; private void button6_mouseup_1(object sender, MouseEventArgs e) this.text = "MouseUp"; private void button1_mouseleave(object sender, EventArgs e) this.text = "Kurzor myši je mimo tlačítko"; private void button2_mouseleave(object sender, EventArgs e) this.text = "Kurzor myši je mimo tlačítko"; Tvorba programů s GUI v C# 22/104

23 Po kliknutí lze zjistit, kterým tlačítkem bylo kliknuto tak, že otestujeme vlastnost Button parametru e metody pro obsluhu udlosti kliknutí: private void button5_mousedown(object sender, MouseEventArgs e) this.text = "MouseDown"; if (e.button == MouseButtons.Left) this.text = "Kliknuto levym"; if (e.button == MouseButtons.Left) this.text = "Kliknuto levym"; S využitím parametru e metody pro obsluhu klikní lze rovněž zjistit souřadnice myši na místě kliknutí e.x - souřadnice x e.y - souřadnice y private void button5_mousedown(object sender, MouseEventArgs e) this.text ="Down " + e.x.tostring() + " " + e.y.tostring(); Po kliknutí na tlačítko Down se v titulkovém pruhu formulře zobrazí x-ov a y-ov souřadnice místa, kde bylo kliknuto. Hodnoty souřadnic jsou v rmci rozsahu příslušného prvku. Hodnotové ovldací prvky Ve výše uvedeném příkladu jsme zobrazovali souřadnice místa kliknutí myší v titulkovém pruhu. Pro zobrazovní (a někdy i nastavovní) hodnot můžeme použít hodnotové ovldací prvky. Hodnotové ovldací prvky lze dle rozčlenit podle datového typu hodnoty na: Tvorba programů s GUI v C# 23/104

24 Řetězcové Číselné Booleovské Datum a čas Grafické Řetězcové ovldací prvky zobrazují vlastnost Text. Sem patří Label, LinkLabel, StatusBar, TextBox. Číselné ovldací prvky zobrazují vlastnost Value, jejíž hodnota může být nastavena v určitém rozsahu. Dojde-li ke změně vlastnosti Value, vznikne udlost ValueChanged. Booleovské ovldací prvky zobrazují vlastnost Checked, kter vyjadřuje, zda jsou, nebo nejsou zaškrtnuté. Patří sem CheckBox a RadioButton. Dojde-li ke změně zaškrtnutí, vzniknou udlosti CheckedChanged a CheckStateChanged. Ovldací prvky pro datum a čas umožňují vybrat instanci typu DateTime. Patří sem MonthCalendat a DateTimePicker. Ovldací prvky pro grafické hodnoty umožňují zobrazení obrzků ve vlastnosti Image. Patří sem PictureBox. Použití ovldacího prvku popisek (Label) Tento ovldací prvek se použív pro zobrazení textu. Typické použití je vedle textových polí, kde poskytují informaci, co textov pole obsahují. Text uvnitř popisku se zalamuje na šířku ovldacího prvku. Text se může zarovnat k libovolné straně, či rohu ovldacího prvku. Třída popisku tabel m mnoho vlastností, ale pravděpodobně nejdůležitějšími jsou Text a Name. Vlastnost Text Hlavní úlohou popisku je Zobrazovat text, který určuje hodnota vlastnosti Text. Uživatel aplikace nemůže měnit text popisku, který je tedy z jeho pohledu určený pouze pro čtení.,jiné ovldací prvky, například Textové pole (TextBox), změnu textu uživatelem umožňují. Chceme-li měnit výšku a šířku popisku, musíme mít nastavenou hodnotu Autosize na False. Potom můžeme měnit hodnoty Size pro vybraný popisek. Řešen úloha 5 Nastavení vlastností ovldacího prvku popisek (Label) Po umístění popisku na formulř můžeme pomocí podokna Properties nastavit jeho vlastnosti. Vlastnost Name představuje jméno popisku. Popisky se implicitně pojmenovvají label a číslem, které odpovíd pořadí vytvoření prvku. Nzev popisku můžeme změnit Tvorba programů s GUI v C# 24/104

25 V nsledujícím programu jsou vytvořeny 3 popisky. Prvnímu jsou ponechny implicitní vlastnosti, u druhého je nastaven font, barva písma a pozadí a 3D rmeček a u třetího ještě navíc velikost popisku a tvar kurzoru na IBeam. Obrzek 14 Nastavení vlastností popisku Obrzek 15 Vzhled běžícího programu Tvorba programů s GUI v C# 25/104

26 Do uvedené aplikace nebylo nutné zapsat ždný kód, vše bylo vytvořeno umístěním popisků na formulř a nastavením jejich vlastností. Řešen úloha 6 Zobrazení hodnot v popisku V popisku je možné zobrazovat souřadnice X, Y ukazatele myši při jeho pohybu po formulři a při kliknutí na formulř. Pomocí popisek je vytvořený formulř: Postup tvorby aplikace: Obrzek 16 Nvrh aplikace pro zobrazení souřadnic myšího kurzoru Ze sady nstrojů (Toolbox) vložte na formulř 9 popisků. V okně vlastností Properties změňte implicitní hodnotu True vlastnosti AutoSize všech čtyř popisků se sudými čísly na hodnotu False a upravte jejich velikost. V okně vlastností změňte vlastnosti Text vlevo umístěných popisků na " X a " Y", protože tyto popisky identifikují dva popisky ležící napravo. Vlastnosti Text těchto popisků upravujete v nvrhu, protože jejich hodnoty se nebudou za běhu aplikace měnit. Opět v okně vlastností změňte barvu pozadí (vlastnost BackColor) popisků se sudými čísly na bílou (White), abyste je lépe viděli, až v dalším kroku vymažete jejich text Tvorba programů s GUI v C# 26/104

27 Dle v okně vlastností vymažte hodnoty vlastností Text popisků se sudými čísly tak, aby byly przdné. Po spuštění programu se pak nebudou zobrazovat implicitní texty těchto popisků. Vytvořte zklad procedury udlosti pohybu myši MouseMove po formulři. V zobrazení nvrhře Form1.cs[Design] vyvolejte okno vlastností formulře a potom klepněte na čtvrtou ikonu zleva s obrzkem blesku. Dle rozbalte (klepnutím na znak plus) kategorii Mouse a poklepejte na položku MouseMove, čímž vytvoříte zklad procedury udlosti MouseMove. Do takto vzniklého zkladu procedury udlosti vepište nsledující kód: label2.text = e.x.tostring(); label4.text = e.y.tostring(); Podobně vytvořte metodu MouseClick a do ní vepište kód: label6.text = e.x.tostring(); label8.text = e.y.tostring(); Metody je nutné vytvřet je-li v nvrhři označený formulř, neboť tojsou metody formulře. Kompletní kód metod v souboru Form1.cs včetně hlaviček je v nsledující čsti programu: private void Form1_MouseMove(object sender, MouseEventArgs e) label2.text = e.x.tostring(); label4.text = e.y.tostring(); private void Form1_MouseClick(object sender, MouseEventArgs e) label6.text = e.x.tostring(); label8.text = e.y.tostring(); Obrzek 17 Běžící aplikace, zobrazující souřadnice myšího kurzoru Tvorba programů s GUI v C# 27/104

28 Vstup hodnot z klvesnice Kromě vstupu z myši umějí formulře a ovldací prvky zachycovat i vstup z klvesnice. Klvesnici lze chpat dvěma způsoby: Jako kolekci klves - můžeme určit, kter klvesa byla stisknuta. Jako kolekci znaků - můžeme určit, který znak byl zadn. Kód znaku však nezvisí pouze na stisknuté klvese, ale také na stavu přepínacích klves (Caps Lock, Num Lock, Scroll Lock, příp. Insert) a přeřaďovacích klves (Shift, Control a Alt). Vstup z klvesnice můžeme zachytit prostřednictvím tří udlostí: KeyDown - při stisku klvesy. KeyUp - při uvolnění klvesy. KeyPress - při stisku. Tyto události nastávají v následujícím pořadí: KeyDown KeyPress KeyUp KeyDown a KeyUp Dle se budeme zabývat udlostmi, které spouští obsluhu formulře při stisku (KeyDown) nebo uvolnění (KeyUp) klvesy. Pomocí obsluhy těchto udlosti můžeme zjistit, kter klvesa byla stisknuta. Tuto informaci zjistíme pomocí argumentu obsluhy udlosti, který je instancí třídy KeyEventArgs. Vlastnost KeyCode identifikuje stisknutou klvesu. Program 8 Obsluha události KeyDown - změna barev private void Form1_KeyDown(object sender, KeyEventArgs e) string[] barvy = "White","Azure","Pink","Coral","Cyan", "Red","Blue","Green"; switch(e.keycode) case Keys.Up: if (b == (barvy.length-1)) b = -1; label1.backcolor=color.fromname(barvy[++b]); label1.text=barvy[b]; break; case Keys.Down: if(b==0)b=barvy.length; label1.backcolor = Color.FromName(barvy[--b]); label1.text=barvy[b];break; Tvorba programů s GUI v C# 28/104

29 Pomocí přepínače program testuje stisknutou klvesu a byla-li stisknuta šipka nahoru, zvyšuje index v poli definovaných barev. Jestliže byla stisknuta šipka dolů, snižuje index v poli definovaných barev. Obrzek 18 Změna barvy šipkami nahoru a dolů Řešen úloha 7 Zpracovní stisknuté klvesy Dle vytvoříme aplikaci, ve které při stisku klvesy zjistíme její kód (KeyCode) a vypíšeme jeho řetězcovou formu do formulře. Nejprve navrhneme formulř, který bude obsahovat 5 popisek a jedno textové pole pro vstup z klvesnice Tvorba programů s GUI v C# 29/104

30 Obrzek 19 Běh aplikace pro výpis znaku a kódu stisknuté klvesy V textovém poli dole budeme zadvat znaky a v bílém popisku vlevo se zobrazí znak a v bílém popisku vpravo se zobrazí jeho kód. Stisknutou klvesu zpracujeme nsledující metodou: private void textbox1_keydown(object sender, KeyEventArgs e) // Zjistíme kód klávesy z argumentu události: label1.text = e.keycode.tostring(); label2.text = e.keyvalue.tostring(); Vyzkoušejte všechny klvesy a pozorujte jejich kód. Vlastnost KeyCode třídy KeyeventArgs vrací hodnotu z výčtového typu Keys, který pbsahuje nzvy jednotlivých klves Tvorba programů s GUI v C# 30/104

31 Metoda pro obsluhu udlosti kliknutí na textbox1 Obrzek 20 Výpis hodnot výčtového typu Keys Uvedený formulř obsahuje všechny hodnoty výčtového typu Keys, které se vypsaly do textového pole pomocí nsledující metody, kter obsluhuje kliknutí na textové pole. Program 9 Výpis názvů kláves private void textbox1_mouseclick(object sender, MouseEventArgs e) // Pomocí třídy Enum zjistíme názvy výčtových konstant: foreach (string s in Enum.GetNames(typeof(Keys))) textbox1.text += s + " "; Jména klves jsou uvedeny ve výčtovém typu Keys a získme je metodou Enum.GetNames(typeof(Keys)). Výčtový typ je seznam konstant s přednastavenými celočíselnými hodnotami Tvorba programů s GUI v C# 31/104

32 Příkladem je výčtový typ Keys, nebo KnownColor: Obrzek 21 Výčtové typy Keys a KnownColor Podobně můžeme v textovém poli vypsat tzv. znmé barvy (known color): Program 10 Výpis názvů známých barev private void textbox1_mouseclick(object sender, MouseEventArgs e) // Pomocí třídy Enum zjistíme názvy výčtových konstant: foreach (string s in Enum.GetNames(typeof(KnownColor))) textbox1.text += s + "\t"; Obrzek 22 Hodnoty výčtového typu KnownColor Tvorba programů s GUI v C# 32/104

33 Řešen úloha 8 Prochzení znmých barev Nsledující aplikace nm po kliknutí na formulř změní barvu pozadí formulře a v jednom textovém poli se vypíše nzev barvy a druhém její číslo. Dle je v metodě MouseClick rozlišeno kliknutí levým, nebo pravým tlačítkem a podle toho se číslo barvy zvýší, nebo sníží. namespace WFA_GUI2 public partial class Form1 : Form static KnownColor k = (KnownColor)28; static int c = 28; public Form1() InitializeComponent(); private void Form1_MouseClick(object sender, MouseEventArgs e) if (e.button == MouseButtons.Left) c++; k++; else c--; k--; if (c!= 27) this.backcolor = Color.FromKnownColor((KnownColor)c); textbox1.text = c.tostring(); textbox2.text = k.tostring(); Řešen úloha 9 Ovldní pohybu formulře šipkami Nsledující metoda, obsluhující stisk kurzorových šipek umožňuje pohyb formulře po obrazovce příslušným směrem. private void Form1_KeyDown(object sender, KeyEventArgs e) Tvorba programů s GUI v C# 33/104

34 switch (e.keycode) case Keys.Left: this.left-=10; break; case Keys.Up: this.top-=10; break; case Keys.Right: this.left += 10; break; case Keys.Down: this.top+=10; break; Úlohy ke kapitole "KeyDown a KeyUp" Napište program, ve kterém uživatel může zvolit barvu pozadí formulře zadním klves: R - barva bude červen G - barva bude zelen B - barva bude modr jin klvesa - barva bude čern Po zadní dojde k překreslení formulře zadanou barvou. Okno po stisknutí klvesy R bude vypadat obdobně jako na obrzku: private void textbox1_keydown(object sender, KeyEventArgs e) if (e.keycode.tostring() == "R") this.backcolor = Color.Red; else if (e.keycode.tostring() == "G") this.backcolor = Color.Green; else if (e.keycode.tostring() == "B") this.backcolor = Color.Blue; else this.backcolor = Color.Black; Modifikace úlohy Napište program, ve kterém uživatel může zvolit složky barvy v barevném modelu RGB. Obslužte klvesy: R - bude se nastavovat červen složka Tvorba programů s GUI v C# 34/104

35 G - bude se nastavovat zelen složka B - bude se nastavovat modr složka šipka nahoru - u zadané složky se bude zvyšovat hodnota šipka dolů - u zadané složky se bude snižovat hodnota Shift - pokud bude stisknut, šipky budou měnit hodnotu složky s krokem 10, jinak s krokem 1 Control - pokud bude stisknut, všechny složky budou mít stejnou hodnotu jako nastavovan barva Po zadní dojde k překreslení formulře zadanou barvou a také se zobrazí hodnoty složek aktulní hodnoty barvy. Prce s barvami v.net Pro nastavení barev v.net se použív struktura Color. Barvy lze nastavit: Pomocí metody FromName struktury Color, jejímž parametrem; je konkrétní barvy z výčtu znmých barev(knowncolor). Pomocí metody FromArgb struktury Color, kter m tři parametry (složky R,G,B), které nabývají hodnoty v rozsahu od 0 do 255. Pomocí metody FromKnownColor struktury Color, kter převede znmou barvu na typ Color. Znmě barvy KnownColor lze inkrementovat a dekrementovat, jak je vidět z nsledujícího příkladu, který postupně nastavuje všechny barvy typu KnownColor. public partial class Form1 : Form static KnownColor c; public Form1() InitializeComponent(); private void Form1_MouseClick(object sender, MouseEventArgs e) c++; if (Convert.ToInt32(c) == 27 ) c++; this.backcolor = Color.FromKnownColor(c); textbox1.text = c.tostring(); Tvorba programů s GUI v C# 35/104

36 V textovém bloku textbox1 se zobrazuje nzev aktivní barvy, kter se nastaví na pozadí formulře. Deklarace proměnné pro uchování barvy c: static KnownColor c; Pro nastavení barvy můžeme také použít celočíselnou proměnnou, kterou přetypujeme na znmou barvu: static int b; private void Form1_MouseClick(object sender, MouseEventArgs e) b++; this.backcolor = Color.FromKnownColor((KnownColor)b); textbox2.text = b.tostring(); Řešen úloha 10 Použití metody FromName pro získní nzvů znmých barev Nsledující formulř v pravé čsti obsahuje seznam všech znmých barev a vlevo dole se zobrazuje nzev aktivní barvy, kterou je vybarveno pozadí formulře. Index aktivní barvy se zobrazí v textovém bloku nad jejím nzvem. Obrzek 23 Ukzka použití znmých barev V nvrhři jsou na formulř umístěny tři textové bloky a tři popisky Tvorba programů s GUI v C# 36/104

37 Textbeox1 m vlastnost MultiLine nastavenou na hodnotu True, aby bylo možné zobrazit víceřdkový text a ScrollBars na Vertical, aby se zobrazil svislý posuvník, který je možné použít ve spuštěné aplikaci. Použití metody FromName ilustruje dle uveden třída Form1, kter umožňuje po kliknutí na formulř změnit jeho barvu na nsledující ze seznamu znmých barev: public partial class Form1 : Form static int barva = 0; static string[] nazvyvyctuknowncolor; public Form1() InitializeComponent(); private void Form1_MouseClick(object sender, MouseEventArgs e) barva++; if(barva==26)barva++; textbox3.text = barva.tostring(); textbox2.text = nazvyvyctuknowncolor[barva]; this.backcolor = Color.FromName(nazvyVyctuKnownColor[barva]); private void Form1_Load(object sender, EventArgs e) // Pomocí třídy Enum zjistíme názvy vyčtených konstant: nazvyvyctuknowncolor = Enum.GetNames(typeof(KnownColor)); for (int i = 0; i < nazvyvyctuknowncolor.length; i++) textbox1.text += nazvyvyctuknowncolor[i] + "\r\n"; textbox3.text = barva.tostring(); textbox2.text = nazvyvyctuknowncolor[barva]; this.backcolor = Color.FromName(nazvyVyctuKnownColor[barva]); Načtení výčtu barev je provedeno pouze jednou v metodě Form1_Load při otevírní formulře, nastavení barvy a výpis jejího nzvu a indexu v metodě Form1_MouseClick po každém kliknutí na formulř. Ze znmých barev je třeba vyloučit barvu s indexem 26 (Transparent), kterou nelze použít. Vstup a výstup řetězců Pro vstup a výstup řetězců používme prvek textové pole (TextBox). Objekty TextBox slouží k zobrazovní textů, které uživatel může editovat. Textov pole mohou být jednořdkov, nebo víceřdkov. Pro víceřdkov textov pole musíme nastavit vlastnost MultiLine na hodnotu true Tvorba programů s GUI v C# 37/104

38 Řešen úloha 11 Přepis řetězce z jednoho textového pole do druhého Na formulři vytvoříme dvě textov pole a jedno tlačítko. Dvojklikem na tlačítko se přepneme do funkce, kter obsluhuje kliknutí na tlačítko. Do této funkce napíšeme kód: private void button1_click(object sender, EventArgs e) textbox2.text=textbox1.text; Po spuštění můžeme zadat text do prvního textového pole a po kliknutí na tlačítko se text zkopíruje do druhého textového pole. Řešen úloha 12 Kopírovní textu a prce s výběrem textu V tomto příkladu je vytvořeno pět textových polí: vstupní textové pole textbox1, pole textbox2 pro kopii textu ve vstupním poli, pole textbox3 pro začtek výběru, pole textbox4 pro délku výběru a pole textbox5 pro výpis vlastního textu výběru. Pole jsou doplněna popisky. Všechna pole, kromě zadvní textu nejsou přístupn (Enabled=false). Prce s textem je řešena obsluhou jsme udlosti textbox1_keydown. Aktualizace informací o výběru je řešena rovněž pomocí obsluhy udlosti textbox1_keydown po stisku klvesy Enter (e.keycode == Keys.Enter) Tvorba programů s GUI v C# 38/104

39 Úloha ilustruje některé možnosti prce s textem. Kopírovní textu: textbox2.text = textbox1.text; Kopírovní vybraného textu: textbox5.text = textbox1.selectedtext; Určení počtku vybraného textu: textbox3.text = textbox1.selectionstart.tostring(); Určení počtu znaků vybraného textu: textbox4.text = textbox1.selectionlength.tostring(); Obslužný kód udlosti KeyDown v textovém poli textbox1: private void textbox1_keydown(object sender, KeyEventArgs e) if(e.keycode == Keys.Enter) textbox3.text = textbox1.selectionstart.tostring(); textbox4.text = textbox1.selectionlength.tostring(); textbox5.text = textbox1.selectedtext; textbox2.text = textbox1.text; Tvorba programů s GUI v C# 39/104

40 Řešen úloha 13 Výběr znmé barvy a její použití Spojením řešené úlohy: Řešen úloha 12 s řešenou úlohou: Řešen úloha 10 je možné vybraný text použít například pro nastavení vybrané barvy. Vybran barva je použit po dvojkliku na vybrané barvě v metodě textbox1_mousedoubleclick. public partial class Form1 : Form static int barva = 0; static string[] nazvyvyctuknowncolor; public Form1() InitializeComponent(); private void Form1_Load(object sender, EventArgs e) // Pomocí třídy Enum zjistíme názvy vyčtených konstant: nazvyvyctuknowncolor = Enum.GetNames(typeof(KnownColor)); for (int i = 0; i < nazvyvyctuknowncolor.length; i++) textbox1.text += nazvyvyctuknowncolor[i] + "\r\n"; this.backcolor = Color.FromName(nazvyVyctuKnownColor[barva]); private void textbox1_mousedoubleclick(object sender, MouseEventArgs e) this.backcolor = Color.FromName(textBox1.SelectedText.ToString()); Tvorba programů s GUI v C# 40/104

41 Řešen úloha 14 Zadvní hesla Jednou z vlastností textového pole je PasswodChar. Představuje znak, který se bude zobrazovat v textovém poli místo zadvaných znaků. tzv. maskovací znak. Maskovacím znakem je obvykle hvězdička. Zadané heslo se odešle stiskem klvesy Enter. Pokud odpovíd sprvnému heslu, vypíše sprvné heslo (Ahoj), jinak se zobrazí okno se zprvou s textem Špatné heslo a ikonou Error. Okna aplikace budou vypadat nsledovně: private void textbox1_keydown(object sender, KeyEventArgs e) if (e.keycode == Keys.Enter) if(textbox1.text=="ahoj") MessageBox.Show(textBox1.Text, "Heslo", MessageBoxButtons.OK); else MessageBox.Show("Špatné heslo", "Heslo", MessageBoxButtons.OK,MessageBoxIcon.Error); Tvorba programů s GUI v C# 41/104

42 Řešen úloha 15 Výpis obsahu souboru do textového pole Textový blok můžeme použít k vypsní obsahu souboru: Výpis spojíme s nějakou udlostí (například kliknutí v textovém bloku). Udlost obsloužíme nsledovně: Vytvoříme objekt třídy StreamReader Do textového bloku zobrazíme obsah celého souboru, který načteme metodou ReadToEnd() private void textbox1_mouseclick(object sender, MouseEventArgs e) StreamReader sr = new StreamReader(@".\txt\program.cs"); textbox1.text = sr.readtoend(); sr.close(); Po spuštění programu se v textovém bloku můžete pohybovat pomocí šipek a tlačítek PgUp, PgDn, nebo pomocí vertiklního posuvníku. Ke spouštění metody, vykonvající požadovanou činnost lze využít tlačítko a obsluhovat reakci na kliknutí na tlačítko. Řešen úloha 16 Polohovní ovldacího prvku na formulři Chceme zajistit, aby ovldací prvek tlačítko byl stle uprostřed formulře i při změně velikosti formulře Tvorba programů s GUI v C# 42/104

43 Vytvoříme obsluhu udlosti pro změnu velikosti formulře (Resize): private void Form1_Resize(object sender, EventArgs e) button1.left = this.width / 2 - button1.width / 2; button1.top = this.height / 2 - button1.height; Řešen úloha 17 Využití tlačítka pro spuštění nhodného generovní barvy pozadí formulře Vytvořme aplikaci, kter bude obsahovat jedno tlačítko. Při kliku na tlačítko se nastaví nhodn barva pozadí pro formulř: private void button1_click(object sender, EventArgs e) Random r = new Random(); this.backcolor = Color.FromArgb(r.Next(255), r.next(255), r.next(255)); Tvorba programů s GUI v C# 43/104

44 Nhodně generovanou kombinaci RGB lze vypsat do textového pole. Obrzek 24 Nhodné generovní barev kombinací RGB Program 11 Náhodné míchání barev private void button1_click(object sender, EventArgs e) Color barva; textbox1.text = ""; Random r = new Random(); barva = Color.FromArgb(r.Next(255), r.next(255), r.next(255)); this.backcolor = barva; textbox1.text = barva.tostring(); Tlačítka mohou mít více stylů zobrazení. Styl tlačítka se nastaví pomocí vlastnosti FlatStyle. Je možné nastavit různé hodnoty vlastnosti FlatStyle: Tvorba programů s GUI v C# 44/104

45 Zadní 3 Nastavení stylu tlačítka Vytvořte 4 tlačítka a u každého nastavte jiný styl. Na každém tlačítku uveďte nzev stylu: Obrzek 25 Styly tlačítek Vlastnosti Anchor a Dock Vlastnosti Anchor a Dock zajišťují ukotvení tlačítek. Řešen úloha 18 Ukotvení tlačítek Vytvořte 4 tlačítka, z nichž každé bude zajišťovat pohyb formulře v jiném směru Tvorba programů s GUI v C# 45/104

46 Obrzek 26 Tlačítka pro pohyb formulře private void button1_click(object sender, EventArgs e) this.top -= 10; private void button2_click(object sender, EventArgs e) this.top += 10; private void button3_click(object sender, EventArgs e) this.left += 10; private void button4_click(object sender, EventArgs e) this.left -= 10; Vlastnost Anchor určuje ukotvení tlačítek: Obrzek 27 Nastavení vlastnosti Anchor Jestliže nastavíme vlastnost Anchor na None bude tlačítko stle uprostřed formulře, i když budeme měnit velikost formulře. Použijeme-li vlastnost Dock, tlačítka budou měnit svou velikost podle strany formulře Tvorba programů s GUI v C# 46/104

47 Obrzek 28 Dokovní tlačítek Modifikace: Doplnění tlačítek, které zajistí šikmý pohyb formulře. Řešen úloha 19 Ukzka použití číselníku Ovldací prvek číselník (numericupdown) umožňuje nastavit číselnou hodnotu v zadaném rozsahu a se zadaným krokem. Nsledující aplikace umožňuje nastavit rychlost pohybu formulře pomocí číselníku. Program obsluhuje kliknutí na jednotliv tlačítka tak, že zvyšuje, nebo snižuje hodnoty souřadnic levého horního rohu formulře (vlastnosti Left a Top) Tvorba programů s GUI v C# 47/104

48 Rychlost je získna v metodě numericupdown1_valuechanged, kter obsluhuje změnu hodnoty číselníku. Hodnota nastavení číselníku se získ numericupdown1.value a je převedena na celé číslo a uložena do statické celočíselné proměnné rychlost. public partial class Form1 : Form static int rychlost; public Form1() InitializeComponent(); private void button1_click(object sender, EventArgs e) this.top -= rychlost; private void button2_click(object sender, EventArgs e) this.top += rychlost; private void button3_click(object sender, EventArgs e) this.left += rychlost; private void button4_click(object sender, EventArgs e) this.left -= rychlost; private void button5_click(object sender, EventArgs e) this.left += rychlost; this.top -= rychlost; Tvorba programů s GUI v C# 48/104

49 private void button6_click(object sender, EventArgs e) this.left += rychlost; this.top += rychlost; private void button7_click(object sender, EventArgs e) this.left -= rychlost; this.top += rychlost; private void button8_click(object sender, EventArgs e) this.left -= rychlost; this.top -= rychlost; private void numericupdown1_valuechanged(object sender, EventArgs e) rychlost=convert.toint32(numericupdown1.value)*10; Převod řetězce na číslo Zadaný řetězce převedeme na číslo pomocí některé metody třídy Convert: Obrzek 29 Metody třídy Convert Řešen úloha 20 Realizace kalkulačky pomocí tlačítek textových polí Na formulř umístíme 5 tlačítek a 3 textov pole. Do horních dvou textových polí budeme zadvat operandy, potom klikneme na tlačítko s opertorem a na tlačítko vypocet. V dolním textovém pole se zobrazí počítaný výraz a výsledek Tvorba programů s GUI v C# 49/104

50 public partial class Form1 : Form char c; public Form1() InitializeComponent(); private void button5_click(object sender, EventArgs e) double x, y; x = Convert.ToDouble(textBox1.Text); y = Convert.ToDouble(textBox2.Text); textbox3.text = textbox1.text + c.tostring() +textbox2.text + "="; switch (c) case '+': textbox3.text += (x + y).tostring(); break; case '-': textbox3.text += (x - y).tostring(); break; case '*': textbox3.text += (x * y).tostring(); break; case '/': textbox3.text += (x / y).tostring(); break; private void button1_click(object sender, EventArgs e) c='+'; private void button2_click(object sender, EventArgs e) c='-'; private void button3_click(object sender, EventArgs e) c='*'; Tvorba programů s GUI v C# 50/104

51 private void button4_click(object sender, EventArgs e) c='/'; Obsluha tlačítek button1 až button4 spočív v uložení zvoleného opertora do statické znakové proměnné c. Obsluha button5 spočív ve výpisu počítaného výrazu a výsledku do textbox3. Program lze jednoduše rozšířit o další operace. Zadní 4 Vylepšen kalkulačka Vytvořte kalkulačku, kter kromě zkladních funkcí obsahuje další funkce podle obrzku: Tvorba programů s GUI v C# 51/104

52 Zadní 5 Výpočet průměru Vytvořte formulřovou aplikaci, kter bude počítat průměr čísel, zadaných v jednom textovém poli. Hodnotu průměru vypíše po kliknutí na tlačítko v druhém textovém poli. Ovldací prvek Zaškrtvací políčko Zaškrtvací políčko je instancí třídy System.Windows.Forms.CheckBox. Zaškrtvací políčka se používají pro přepínní mezi logickými hodnotami PRAVDA a NEPRAVDA (pro vstupy, které vyžadují odpověd' ano/ne), čemuž odpovíd datový typ bool. Tuto hodnotu, tzn. zda je políčko zaškrtnuto či nikoliv, získme pomocí vlastnosti Checked třídy CheckBox: Při změně stavu zaškrtnutí zaškrtvacího políčka se spustí udlost CheckedChanged: Řešen úloha 21 Zaškrtvací políčko Vytvořte formulř, který bude obsahovat zaškrtvací políčko a popisku (label). Je-li zaškrtvací políčko zaškrtnuto, objeví se v popisce text: zaškrtnuto, jinak nezaškrtnuto Tvorba programů s GUI v C# 52/104

53 private void checkbox1_checkedchanged(object sender, EventArgs e) if (checkbox1.checked) label1.text = "Zaškrtnuto"; else label1.text = "Nezaškrtnuto"; Zadní 6 Rozhodovní pomocí dvou zaškrtvacích políček Vytvořte program, který vyhodnotí zaškrtnutí dvou zaškrtvacích políček. Je-li zaškrtnuto pouze první, vypíše se Dobře, jinak se vypíše Špatně. Zaškrtvací políčko m vlastnost CheckAlign, kter určuje pozici čtverečku: Zarovnejte první zaškrtvací políčko vpravo a na střed a druhé vlevo a na střed. Pro obě políčka nastavte vlastnost pozadí (BackColor) Tvorba programů s GUI v C# 53/104

54 Ovldací prvek Přepínač Přepínač je instancí třídy System.Windows.Forms.RadioButton. Přepínače se používají pro výběr jedné možnosti ze seznamu dvou nebo více vylučujících se výběrů. Přepínače jsou složeny z několika přepínacích tlačítek, kter se někdy označují jako rdiov tlačítka, protože fungují podobným způsobem jako tlačítka na autordiu - můžete poslouchat pouze jednu stanici, volby se vzjemně vylučují. Přepínače sdružíme do skupiny tím, že je umístíme do skupinového rmu. Skupinový rm je instancí třídy System.Windows.Forms.GroupBox. Přepínače mají mnoho společného se zaškrtvacími políčky. private void radiobutton1_checkedchanged(object sender, EventArgs e) if (radiobutton1.checked) textbox1.text = "Prvni"; else textbox1.text = "Druhe"; Kdy je vhodné použít zaškrtvací políčka a kdy přepínače? Jedno zaškrtvací políčko může posloužit ke stejnému účelu, jako skupina dvou přepínačů. Přepínače se používají, jestliže jde o výběr jedné varianty z několika možností a zaškrtvací políčka se používají, jestliže můžeme zvolit více možných variant Tvorba programů s GUI v C# 54/104

55 Zadní 7 Dva přepínače Vytvořte formulřovou aplikaci, kter bude obsahovat dva přepínače a jedno textové pole. V textovém poli se bude zobrazovat, který přepínač byl zaškrtnutý. Zadní 8 Řešení Zadní 6 pomocí přepínače Úlohu ze Zadní 6 řešte pomocí jednoho přepínače. Ovldací prvek skupinový rmeček Přepínače mohou být umístěny uvnitř rmečku skupiny. Rmeček skupiny seskupuje přepínače nejen vizulně, ale také logicky. Řešen úloha 22 Výpočet ceny zmrzlinového pohru Vytvořte formulřovou aplikaci, kter umožní výpočet ceny zmrzlinového pohru. Velikost porce bude vybírané pomocí tří přepínačů, spojených do skupinového rmečku. Ceny zkladních porcí jsou 10 Kč, 20 Kč a 30 Kč. Do pohru by mohly být přidny přísady: ovoce, čokolda, karamel. Každ přísada zvýší cenu o 10 Kč Tvorba programů s GUI v C# 55/104

56 private void button1_click(object sender, EventArgs e) const double velká = 30; const double střední = 20; const double malá = 10; const double přísada = 10; double celkem = 0; if (radiobutton3.checked == true) celkem = velká; if (radiobutton2.checked == true) celkem = střední; if (radiobutton1.checked == true) celkem = malá; if (checkbox1.checked == true) celkem += přísada; if (checkbox2.checked == true) celkem += přísada; if (checkbox3.checked == true) celkem += přísada; textbox1.text = Convert.ToString(celkem)+" Kč"; Zadní 9 Nastavení barvy pomocí přepínačů Vytvořte formulřovou aplikaci, kter bude obsahovat tři přepínače pro tři zkladní barvy - červenou, zelenou a modrou. Tyto přepínače umístěte do skupinového rmečku a přiřaďte jim stejnou obslužnou metodu udlosti. Při zaškrtnutí určitého přepínače se nastaví pozadí textového pole vybranou barvou Tvorba programů s GUI v C# 56/104

57 Zadní 10 Realitní kancelř určení ceny domu Vytvořte aplikaci, kter vm pro vybraně město, velikost domu a jeho vybavení vypočít jeho cenu Tvorba programů s GUI v C# 57/104

58 Zadní 11 Realitní kancelř - vyhlední bytů Vytvořte aplikaci, kter vm pro vybraně město, velikost bytu a cenový rozsah vypíše byty z textového souboru, v němž uloženy jsou nabízené byty, například ve tvaru: Město lokalita velikost cena. Ovldací prvky posuvníky Posuvníky se používají pro nastavení celočíselných hodnot. Mme 2 posuvníky: horizontlní (hscrollbar) a vertiklní (vscrollbar). U posuvníků lze nastavit řadu vlastností - důležité jsou: Maximum maximlní nastaviteln hodnota Minimum maximlní nastaviteln hodnota SmallChange mal změna při klikní na šipku LargeChange velk změna při klikní před/za thlo posuvníku Value počteční hodnota Tvorba programů s GUI v C# 58/104

59 Řešen úloha 23 Míchní barev ze složek RGB s využitím posuvníků Vytvořte formulřovou aplikaci, kter bude obsahovat tři posuvníky. Každým posuvníkem budete nastavovat jednu složku výsledné barvy (RGB). U všech postníků je třeba nastavit vlastnost Maximum na hodnotu 255 a minimum nechat na hodnotě 0. Obrzek 30 Nastavovní vlastností posuvníku Tvorba programů s GUI v C# 59/104

60 public partial class Form1 : Form int r = 0,g=0,b=0; public Form1() InitializeComponent(); private void hscrollbar1_scroll(object sender, ScrollEventArgs e) r = e.oldvalue; this.backcolor = Color.FromArgb(r, g, b); private void hscrollbar2_scroll(object sender, ScrollEventArgs e) g = e.oldvalue; this.backcolor = Color.FromArgb(r, g, b); private void hscrollbar3_scroll(object sender, ScrollEventArgs e) b = e.oldvalue; this.backcolor = Color.FromArgb(r, g, b); Ovldací prvky číselníky Číselníky jsou podobné posuvníkům. Slouží pro nastavení celočíselné hodnoty. Řešen úloha 24 Zobrazení hodnoty, nastavené číselníkem Vytvořte formulřovou aplikaci, kter bude v textovém poli zobrazovat hodnotu, nastavenou číselníkem. private void numericupdown1_valuechanged(object sender, EventArgs e) Tvorba programů s GUI v C# 60/104

61 decimal i = numericupdown1.value; textbox1.text = i.tostring(); Ovldací prvek ProgressBar Ukazatel průběhu (ProgressBar) slouží ke znzornění průběhu nějaké činnosti. Umožňuje specifikovat minimlní a maximlní hodnotu, ovldací prvek ale zobrazuje bloky, jaké vidíte na obrzku. Přibývní bloků na ukazateli lze řídit inkrementační metodou. Obrzek 31 Ovldací prvek ProgressBar Hlavními vlastnostmi prvku ProgressBar jsou Minimum, Maximum a Value.. Jak postupuje nějak činnost, nastavujete Value mezi Minimum a Maximum. Řešen úloha 25 Ovldací prvek ProgressBar Použití prvku ProgressBar je ukzno na aplikaci, uvedené na obrzku Obrázek 31. Aplikace je jednoduch obsahuje pouze ovldací prvek ProgressBar a dvě tlačítk: jedno na přidvní a druhé na ubírní hodnoty, zobrazované v ProgressBaru. Změna hodnoty, zobrazované v ProgreeBaru je možn metodou Increment, nebo změnou progressbar1.value. private void button1_click(object sender, EventArgs e) progressbar1.value+=10; private void button2_click(object sender, EventArgs e) progressbar1.increment(-10); Tvorba programů s GUI v C# 61/104

62 Ovldací prvek Track Bar Reostat, neboli TrackBar umožňuje uživatele specifikovat číselnou hodnotu z vymezeného rozsahu. Ovldací prvek zachytí klvesy s šipkami, PageUp a PageDown, jimiž se z klvesnice d řídi jezdec tohoto specilního posuvnému. K posuvnému se d specifikovat měřítko, počet hodnot mezi črečkami a o kolik se posune jezdec, když se stisknou klvesy se šipkami. Dle uveden aplikace použív 3 ovldací prvky TrackBar pro nastavení červené, zelené a modré složky barvy. Řešen úloha 26 Řešení míchní barev pomocí ovldacích prvků TrackBar public partial class Form1 : Form int r = 0,g=0,b=0;... private void trackbar1_scroll(object sender, EventArgs e) r = trackbar1.value; this.backcolor = Color.FromArgb(r, g, b); private void trackbar2_scroll(object sender, EventArgs e) g = trackbar2.value; this.backcolor = Color.FromArgb(r, g, b); Tvorba programů s GUI v C# 62/104

63 private void trackbar3_scroll(object sender, EventArgs e) b = trackbar3.value; this.backcolor = Color.FromArgb(r, g, b); Ovldací prvky TrackBar mohou být umístěny i svisle, jestliže jim nastavíme vertiklní orientaci: Obrzek 32 Nastavení vertiklní orientace ovldacích prvků TrackBar Ovldací prvek Link Label Objekty LinkLabel jsou vlastně popisky, umožňující vyznačit jednu, nebo více čstí textu jako kdyby to byly hypertextové odkazy. Ovldací prvek obvykle slouží k tomu, aby se mohli uživatelé pohodlně dostat z aplikací formulřů Windows na webové strnky. Text se zadv stejně jako u normlního popisku: linklabel1.text = ( Tvorba programů s GUI v C# 63/104

64 Aby bylo možné použít třídu Process, je třeba připojit jmenný prostor: using System.Diagnostics; Řešen úloha 27 Použití popisky jako odkazu (LinkLabel) Nsledující úsek programu obsahuje tři odkazy: na internet na program na obrzek. Odkaz je realizovn jako obsluha udlosti LinkClicked na příslušném ovldacím prvku LinkLabel s využitím metody Start třídy Process, kter vyžaduje připojení jmenného prostoru System.Diagnostics. private void linklabel1_linkclicked(object sender, LinkLabelLinkClickedEventArgs e) Process.Start(@" private void linklabel2_linkclicked(object sender, LinkLabelLinkClickedEventArgs e) Process.Start("Zadání 4 Kalkukačka.exe"); private void linklabel3_linkclicked(object sender, LinkLabelLinkClickedEventArgs e) Process.Start(@".\obr\Brno.jpg"); Ovldací prvky seznamy Seznamy umožňují uživateli vybrat ze seznamu určitou položku Tvorba programů s GUI v C# 64/104

65 Zadní položek seznamu (Items) Obrzek 33 Nastavení vlastností seznamu private void listbox1_selectedindexchanged(object sender,eventargs e) switch(listbox1.selectedindex) case 0: this.backcolor = Color.Red; break; case 1: this.backcolor = Color.Green; break; case 2: this.backcolor = Color.Blue; break; Tvorba programů s GUI v C# 65/104

66 Pro zjištění vybrané položky se použije vlastnost seznamu listbox1.selectedindex. Kromě seznamů typu ListBox můžeme použít i rozevírací seznamy ComboBox. Jejich výhodou je potřeba menšího prostoru. Jin možnost zjištění vybrané položky je vlastnost listbox1.text. Větvení programu můžeme potom provést podle vybraného textu: switch (listbox1.text) case "červená": this.backcolor = Color.Red; break; case "zelená": this.backcolor = Color.Green; break; case "modrá": this.backcolor = Color.Blue; break; Zadní 12 Rozevírací seznam pro výběr barvy Výše uvedenou úlohu řešte s využitím rozevíracího seznamu ComboBox. Jméno vybrané položky určíme příkazem: string barva=combobox1.selecteditem.tostring(); Význam nabídek Umožňují programtorům uspořdat příkazy v logické hierarchii. Nabídky slouží pro snadné zadvní příkazů. Ovldací prvek MenuStrip Ovldací prvek MenuStrip slouží k vytvření hlavní nabídky. Řešen úloha 28 Ovldací prvek MenuStrip Použití prvku MenuStrip si ukžeme na nvrhu nabídky pro výběr barvy pozadí a písma popisky Tvorba programů s GUI v C# 66/104

67 Nvrh nabídek je velmi intuitivní do políček s textem: Type Here napíšeme vlastní text. Po dvojkliku na prvku nabídky se dostaneme do obslužné metody, kde napíšeme příkaz pro nastavení barvy pozadí, nebo písma. private void červenátoolstripmenuitem1_click(object sender, EventArgs e this.forecolor =Color.Red; Tvorba programů s GUI v C# 67/104

68 private void zelenátoolstripmenuitem1_click(object sender, EventArgs e) this.forecolor =Color.Green; private void modrátoolstripmenuitem1_click(object sender, EventArgs e) this.forecolor =Color.Blue; private void bílátoolstripmenuitem_click(object sender, EventArgs e) this.forecolor =Color.White; private void černátoolstripmenuitem_click(object sender, EventArgs e) this.forecolor =Color.Black; private void červenátoolstripmenuitem_click(object sender, EventArgs e) this.backcolor = Color.Red; private void zelenátoolstripmenuitem_click(object sender, EventArgs e) this.backcolor = Color.Green; private void modrátoolstripmenuitem_click(object sender, EventArgs e) this.backcolor = Color.Blue; private void bílátoolstripmenuitem1_click(object sender, EventArgs e) this.backcolor = Color.White; private void černátoolstripmenuitem1_click(object sender, EventArgs e) this.backcolor = Color.Black; Standardní dialogy S WinForms se dodvají nsledující standardní dialogy: OpenFileDialog dialog pro otevření souboru SaveFileDialog - dialog pro otevření souboru ColorDialog dialog pro výběr barvy FontDialog - dialog pro výběr fontu Tvorba programů s GUI v C# 68/104

69 Aby bylo možné pracovat se soubory, je třeba použít jmenný prostor Systém.IO. Se standardními dialogy se pracuje nsledovně: Vytvoří se objekt příslušné třídy (OpenFileDialog, SaveFileDialog, ColorDialog, FontDialog) Zobrazí se dialog a uživatelem zvolen hodnota se uloží do objektu DialogResult Jestliže uživatel uzavřel dialog tlačítkem OK, v další čsti programu se použije hodnota, vybran v dialogu Program 12 Standardní dialogy private void otevřenítoolstripmenuitem_click(object sender, EventArgs e) OpenFileDialog o = new OpenFileDialog(); DialogResult r = o.showdialog(); if (r == DialogResult.OK) StreamReader sr = new StreamReader(o.OpenFile()); textbox1.text = sr.readtoend(); sr.close(); private void uloženítoolstripmenuitem_click(object sender, EventArgs e) SaveFileDialog s = new SaveFileDialog(); DialogResult r = s.showdialog(); if (r == DialogResult.OK) StreamWriter sw = new StreamWriter(s.FileName); Tvorba programů s GUI v C# 69/104

70 sw.write(textbox1.text); sw.close(); private void pozadítoolstripmenuitem_click(object sender, EventArgs e) ColorDialog c = new ColorDialog(); DialogResult r= c.showdialog(); if (r == DialogResult.OK)textBox1.BackColor = c.color; private void písmatoolstripmenuitem_click(object sender, EventArgs e) ColorDialog c = new ColorDialog(); DialogResult r= c.showdialog(); if (r == DialogResult.OK)textBox1.ForeColor = c.color; private void fonttoolstripmenuitem_click(object sender, EventArgs e) FontDialog f = new FontDialog(); DialogResult r= f.showdialog(); textbox1.font= f.font; Zadní 13 Jednoduch prce se soubory Vytvořte aplikaci, kter po kliknutí na tlačítko otevření s využitím systémovéno dialogu otevře soubor a zobrazí ho v textovém bloku. Po kliknutí na tlačítko uložení s využitím systémovéno dialogu uloží text, napsaný do textového bloku do souboru Tvorba programů s GUI v C# 70/104

71 Zobrazovní obrzků na pozadí formulře Obrzky lze po kliknutí na formulř zobrazit jako vlastnost this.backgroundimage. Nzvy obrzků, uložených v určité složce lze uložit do globlního pole stringů statickou metodou Directory.GetFiles("obr"). Tím je zajištěno, že po přidní dalších obrzků do složky je program bude rovněž zobrazovat. Program 13 Zobrazování obrázků na pozadí formuláře public partial class Form1 : Form static int n,i=0; static string[] s; private void Form1_MouseClick(object sender, MouseEventArgs e) s = Directory.GetFiles("obr"); n = s.length; i++; if (i >= n) i = 0; this.backgroundimage = new Bitmap(s[i]); Abychom mohli použít metody třídy Directory, je třeba připojit jmenný prostor System.IO: using System.IO; Pro zobrazení obrzků je také možno použít ovldací prvek picturebox. Pro zobrazení obrzku v tomto prvku se postupuje podobně, jako při zobrazovní obrzků na pozadí formulře. Obrzek nastavujeme jako vlastnost BackgroundImage prvku picturebox1: picturebox1.backgroundimage = new Bitmap("jmeno.jpg"); Uvedené příkazy postupně zobrazí všechny obrzky ze složky obr, kter je v hierarchii složek o 2 úrovně výše, než spuštěný program. private void picturebox1_mouseclick(object sender, MouseEventArgs e) s = Directory.GetFiles(".\\obr"); n = s.length; i++; if (i >= n) i = 0; picturebox1.backgroundimage = new Bitmap(s[i]); Tvorba programů s GUI v C# 71/104

72 Pro prvek picturebox lze nastavit některé další vlastnosti. Při prohlížení obrzků lze využít levé i pravé tlačítko myši Parametr MouseEventArgs e obsahuje informaci o tom, kterým tlačítkem bylo kliknuto. Je možné to otestovat a podle situace index zobrazovaného obrzku zvýšit, nebo snížit. Je také třeba otestovat, zda index nepřeshl počet obrzků, nebo se nedostal do zporných hodnot a podle toho index obrzku patřičně upravit. if (e.button == MouseButtons.Left) i++; else i--; if (i >= n) i = 0; if (i < 0) i = n-1; Ukldní a zpracovní data a času.net Framework definuje v oboru nzvů System strukturu DateTime, kter se použív k ukldní a zpracovní dat a časů. Nový objekt typu DateTime lze získat jedním ze dvou způsobů: Tvorba programů s GUI v C# 72/104

73 Prostřednictvím statické vlastnosti Now, kter vytvří objekt typu DateTime s aktulním datem a časem. Využitím některého z mnoha konstruktorů, umožňujících zadat datum s časem, nebo bez něj. Vlastnosti a metody struktury DateTime Struktura DateTime poskytuje vlastnosti pouze pro čtení, nazvané: Year, Month, Day, Hour, Minute, Second, Millisecond, sloužící k získní informací o datu a času a nabízí několik metod formtovní data a času. Ovldací prvky kolekce prvků Windows Forms pro prci s datem a časem Kolekce prvků Windows Forms m pro prci s datem a časem ovldací prvky MonthCalendar a DateTimePicker. Získní aktulního data Aktulní datum získme jako vlastnost Today, nebo Now pro strukturu DateTime. Statick vlastnost Today vrací běžný datum a vlastnost Now vrací běžný datum a čas. Řešen úloha 29 Výpočet věku Nsledující úloha ukazuje použití Statick vlastnost Today struktury DateTime pro výpočet věku ze zadaného roku narození. Formulř obsahuje popisku s textem Zadej rok svého narození, dvě textov pole a jedno tlačítko, kterým se spouští výpočet. Do horního textového pole (textbox1) zadme rok narození a v dolním textovém poli (textbox2) se po kliknutí na tlačítko zobrazí věk Tvorba programů s GUI v C# 73/104

74 private void button1_click(object sender, EventArgs e) DateTime dt = new DateTime(); dt = DateTime.Today; textbox2.text = (dt.year - Convert.ToInt32(textBox1.Text)).ToString(); Ovldací prvek MonthCalendar MonthCalendar zobrazuje aktulní měsíc s aktulním datem modře podbarveným a zobrazeným ve spodní čsti. Pokud uživatel klikne na rok, zobrazí se vlevo šipky, kterými může pomocí myši nalistovat rok. Měsíce může nastavit pomocí šipek vlevo a vpravo. Řešen úloha 30 Přesný výpočet věku Nsledující aplikace umožňuje pomocí monthcalendar1 nastavit přesný datum narození osoby a v textových blocích textbox1, textbox2 a textbox3 se zobrazí roky, měsíce a dny jeho života Tvorba programů s GUI v C# 74/104

75 private void monthcalendar1_datechanged(object sender, DateRangeEventArgs e) DateTime dt = new DateTime(); dt = DateTime.Now; string s = e.start.date.year.tostring(); int rok = e.start.date.year; int mesic = e.start.date.month; int den = e.start.date.day; int dny = rok * mesic * 30 + den; int akt_rok = dt.year; int akt_mesic = dt.month; int akt_den = dt.day; int akt_dny = akt_rok * akt_mesic * 30 + akt_den; int vek_dny = akt_dny - dny; int vek_roky = vek_dny / 365; int vek_mesice = (vek_dny % 365) / 30; int vek_pocet_dnu = (vek_dny % 365) % 30; textbox3.text = vek_roky.tostring(); textbox2.text = vek_mesice.tostring(); textbox1.text = vek_pocet_dnu.tostring(); Zpracovní udlosti DateChanged (změna data) Výpočet se provdí tak, že oba datumy narození se převedou na dny (akt_dny, dny), určí se jejich rozdíl (vek_dny) a ten se přepočít na roky, měsíce a dny (vek_roky, vek_mesice, vek_pocet_dnu), které se zobrazí v textbox3, textbox2, textbox1. Ovldací prvek DateTimePicker Tvorba programů s GUI v C# 75/104

76 DateTimePicker překonv MonthCalendar v tom ohledu, že umožňuje uživateli volit datum i čas tak, že v okénku označí den, měsíc, nebo rok a zapíše tam příslušné číslo. Většinou se prvek DateTimePicker využív k zadvní času. Řešen úloha 31 Rozdíl datumů s využitím datetimepicker Nsledující aplikace zobrazuje rozdíl dvou datumů, zadaných pomocí dvou prvků DateTimePicker. Výpočet je stejný, jako u řešené úlohy Řešen úloha 30. Zadané datumy se převedou na dny (d1, d2), určí se jejich rozdíl (dny_rozdil) a ten se přepočít na roky, měsíce a dny (roky, mesice, dni), které se zobrazí v textbox3, textbox2, textbox1. private void datetimepicker1_valuechanged(object sender, EventArgs e) int d1 = datetimepicker1.value.year * datetimepicker1.value.month * 30 + datetimepicker1.value.day; int d2 = datetimepicker2.value.year * datetimepicker2.value.month * 30 + datetimepicker2.value.day; int dny_rozdil = d2 - d1; int roky = dny_rozdil / 365; int mesice = (dny_rozdil % 365) / 30; int dni = (dny_rozdil % 365) % 30; textbox3.text = roky.tostring(); textbox2.text = mesice.tostring(); textbox1.text = dni.tostring(); Tvorba programů s GUI v C# 76/104

77 private void datetimepicker2_valuechanged(object sender, EventArgs e) int d1 = datetimepicker1.value.year * datetimepicker1.value.month * 30 + datetimepicker1.value.day; int d2 = datetimepicker2.value.year * datetimepicker2.value.month * 30 + datetimepicker2.value.day; int dny_rozdil = d2 - d1; int roky = dny_rozdil / 365; int mesice = (dny_rozdil % 365) / 30; int dni = (dny_rozdil % 365) % 30; textbox3.text = roky.tostring(); textbox2.text = mesice.tostring(); textbox1.text = dni.tostring(); Ovldací prvek Timer Komponenta Timer spouští určitou udlost, když uplyne stanoven doba uvděn v milisekundch. Ovldací prvek StatusStrip Ovldací prvek StatusStrip zobrazuje stavový řdek podél dolní strany formulře. Stavový řdek může být jednoduchý s jediným textem, nebo složený ze série panelů, z nichž každý může obsahovat text, nebo jiný panel. Můžeme zajistit, aby na stavovém řdku běžel aktulní čas: Na formulř vložíme prvek StatusStrip a čas zobrazíme jako hodnotu toolstripstatuslabel1.text. Řešen úloha 32 Zobrazovní aktulního času ve třech prvcích textbox a ve stavovém řdku Zobrazovní aktulního času ve třech prvcích textbox a ve stavovém řdku Tvorba programů s GUI v C# 77/104

78 Čas je zobrazovn v intervalu 100 ms, jak je nastaveno ve vlastnostech časovače. Aby čas běžel, je třeba nastavit vlastnost Enabled na True. Příkazy, které mají proběhnout vždy po určitém intervalu je třeba uvést v obsluze udlosti timer1_tick. Do objektu dt uložíme aktulní čas, určíme hodiny, minuty a sekundy, které zobrazíme v textových polích a na stavovém řdku. private void timer1_tick(object sender, EventArgs e) DateTime dt = new DateTime(); dt = DateTime.Now; textbox1.text = dt.hour.tostring(); textbox2.text = dt.minute.tostring(); textbox3.text=dt.second.tostring(); toolstripstatuslabel1.text=dt.hour.tostring()+":"+dt.minute.tostring()+ ":"+dt.second.tostring(); Tvorba programů s GUI v C# 78/104

79 Řešen úloha 33 Realizace stopek V horním prvku numericupdown1 zadáme počet sekund. Po kliknutí na Start běží v dolním prvku textbox1 čas zobrazuje se po každém tiku, nastaveném časovým intervalem prvku timer1. Po uplynutí zadaného počtu sekund, zazní zvukový signál a časovač se zastaví. int dif,a=0;. private void timer1_tick(object sender, EventArgs e) dif--; a++; textbox1.text = a.tostring(); if (dif == 0) timer1.stop(); Console.Beep(500, 1000); private void button1_click(object sender, EventArgs e) a = 0; timer1.start(); private void numericupdown1_valuechanged(object sender, EventArgs e) dif = Convert.ToInt32(numericUpDown1.Value); Ovldací prvek TabControl Ovldací prvek TabControl (listovací rmeček) je hybrid kontejneru a ovldacího prvku. Zložky nahoře jsou tlačítka, jimiž se přepínají strnky Tvorba programů s GUI v C# 79/104

80 Každ strnka je separtní kontejner pro jiné ovldací prvky. Řešen úloha 34 Využití ovldacího prvku TabControl Pomocí ovldacího prvku TabControl lze vytvořit formulř, obsahující 2 zložky pro nastavení barvy pozadí a barvy textu. Postup tvorby aplikace: Na formulř umístíme prvek TabControl. Otevřeme TabPage Collection Editor a nastavíme text na zložkch Tvorba programů s GUI v C# 80/104

81 Na každou zložku umístíme 3 přepínače a nastavíme text na přepínačích podle nzvů barev Dvojklikem na každý přepínač se dostaneme do kódu metody CheckedChanged, obsluhující změnu zaškrtnutí přepínače a nastavíme pro formulř barvu pozadí, nebo písma: V jednotlivých metodch se opakují příkazy pro nastavení barvy pozadí formulře a písma. private void radiobutton6_checkedchanged(object sender, EventArgs e) this.forecolor = Color.Blue; private void radiobutton9_checkedchanged(object sender, EventArgs e) this.backcolor = Color.White; Zadní 14 Zobrazení hlavního města sttu Vytvořte aplikaci, kter umožní po výběru sttu z nabídky ovldacího prvku ComboBox vypíše jeho hlavní město viz. uvedený formulř a program: Tvorba programů s GUI v C# 81/104

82 Zadní 15 Výběr přísloví Vytvořte nabídku několik tém přísloví a po zvolení se přísloví vypíše do textového bloku viz. uvedený formulř a program: Tvorba programů s GUI v C# 82/104

83 Zadní 16 Zobrazovní obrzků Vytvořte aplikaci, kter bude na pozadí formulře po kliknutí zobrazovat obrzky. Nzev obrzku se zobrazí v titulkovém pruhu formulře. Zadní 17 Výběr obrzků z nabídky Vytvořte aplikaci, kter umožní z nabídky vybrat barvu pozadí formulře a obrzek, zobrazený v PictureBoxu Tvorba programů s GUI v C# 83/104

84 Zadní 18 Zobrazovní obrzků v ovldacím prvku picturebox Vytvořte aplikaci, kter bude po kliknutí zobrazovat obrzky v ovldacím prvku picturebox. Ke změně obrzku dojde po kliknutí na tlačítko. Nzev obrzku se zobrazí v titulkovém pruhu formulře. Ovldací prvek splitcontainer Ovldací prvek splitcontainer umožňuje dynamicky měnit velikost ovldacího prvku přichyceného k některé straně formulře Tvorba programů s GUI v C# 84/104

85 Řešen úloha 35 Použití splitcontaineru pro rozdělení prostoru formulře Nsledující aplikace obsahuje ovldací prvek splitcontainer, který obsahuje dva panely. V levém panelu je picturebox, v němž se zobrazí obrzek, vybraný pomocí OpenFileDialogu. V pravém panelu jsou tlačítka, kter umožňují zvolit, jakým způsobem se bude obrzek v pictureboxu zobrazovat: dlaždice, vycentrovaný, roztažený a zoom. Protože je picturebox přichycený k prvku splitcontainer, mění svoji velikost se změnou velikosti formulře. V pravé čsti splitcontaineru je zachovaný prostor pro tlačítka. Obrzek se načte do objektu bitmapa a zobrazuje se po kliknutí na příslušné tlačítko. Způsob zobrazení je nastavený jako hodnota výčtového typu ImageLayout. Bitmap bitmapa; public Form1() InitializeComponent(); private void picturebox1_paint(object sender, PaintEventArgs picturebox1.backgroundimage = bitmapa; private void Form1_Load(object sender, EventArgs e) Tvorba programů s GUI v C# 85/104

86 OpenFileDialog of = new OpenFileDialog(); of.showdialog(); bitmapa = new Bitmap(of.FileName); private void button1_click(object sender, EventArgs e) picturebox1.backgroundimagelayout =ImageLayout.Tile; private void button2_click(object sender, EventArgs e) picturebox1.backgroundimagelayout =ImageLayout.Center; private void button3_click(object sender, EventArgs e) picturebox1.backgroundimagelayout =ImageLayout.Stretch; private void button4_click(object sender, EventArgs e) picturebox1.backgroundimagelayout =ImageLayout.Zoom; Ovldací prvek ToolStrip Panel nstrojů se podob hlavní nabídce, ale panely nstrojů obvykle obsahují tlačítka, aby poskytly rychlý přístup k nějaké akci. Panel nstrojů tvoří kolekce tlačítek. Když se klikne na rozevírací tlačítko, rozbalí se nabídka ovldacích prvků, které můžeme na panel nstrojů vložit Tvorba programů s GUI v C# 86/104

87 Obrzek 34 Vložení ovldacích prvků na panel nstrojů ToolStrip Kliknutí na tlačítcích panelu nstrojů se obvykle zpracovvají v metodě ButtonClick samotného panelu nstrojů ToolStrip a testovním odesilatele (sender) se zjišťuje, na kterém tlačítku uživatel klikl. Řešen úloha 36 Prce s ovldacím prvkem ToolStrip Nsledující aplikace ilustruje prci s ovldacím prvkem ToolStrip. Na panelu nstrojů jsou umístěny ovldací prvky: popiska (label) s textem Vyber barvu rozevírací tlačítko (SplitButton), umožňující vybrat barvu pozadí a písma rozevírací seznam (ComboBox) pro výběr textu textové pole (TextBox) pro zobrazení vybraného textu ukazatel průběhu (ProgressBar) pro vyjdření přírůstku po kliknutí na této prvek Obslužné metody po kliknutí na některou volbu nabídky obsahují pouze jeden příkaz pro nastavení barvy pozadí formulře, nebo barvy písma. private void beigetoolstripmenuitem_click(object sender, EventArgs e) this.backcolor = Color.Beige; private void bluetoolstripmenuitem_click_click(object sender, EventArgs e) this.forecolor = Color.Blue; Tvorba programů s GUI v C# 87/104

88 Prce s ikonami Nakreslení ikony Microsoft Visual Studio umožňuje vytvořit vlastní ikonu v editoru ikon, který aktivujeme příkazy: Project Add new item Icon File Editor nm nabízí tvorbu malé ikony (16x16), nebo velké ikony (32x32), obě s barevnou hloubkou 4 bity. Pokud klikneme v editoru pravým tlačítkem myši, můžeme zvolit New Image Type: Zobrazí se dialogové okno: V němž můžeme zvolit i jiné rozměry ikony a barevnou hloubku. Editor poskytuje nstrojový panel a paletu barev Tvorba programů s GUI v C# 88/104

89 Pokud chceme odstranit předdefinovanou ikonu, použijeme nstroj guma. Panel obsahuje nsledující nstroje (zleva doprava): 1. Výběrový obdélník 2. Neobdélníkový výběr 3. Kaptko 4. Guma 5. Vybarvení oblasti 6. Lupa 7. Tužka 8. Štětec 9. Sprej 10. Kreslení rovných čar 11. Kreslení křivek 12. Psaní textu 13. Kreslení obrysu obdélníku 14. Kreslení obdélníku s obrysem i výplní 15. Kreslení obdélníku s výplní (bez obrysu) 16. Kreslení obrysu obdélníku se zaoblenými rohy 17. Kreslení obdélníku se zaoblenými rohy s obrysem i výplní 18. Kreslení obdélníku se zaoblenými rohy s výplní (bez obrysu) 19. Kreslení obrysu elipsy 20. Kreslení elipsy s obrysem i výplní 21. Kreslení elipsy s výplní (bez obrysu) 22. Výběr velikosti nstroje 23. Nastavení citlivého bodu Tvorba programů s GUI v C# 89/104

90 Obrzek 35 Ukzka tvorby ikony 32x32 v editoru ikon Vytvořenou ikonu uložíme příkazy: File - Save as. Uloží se s příponou ico. Použití ikony Malou ikonu můžeme zobrazit v levém horním rohu titulkového pruhu formulře nastavíme to v okně vlastnosti formulře: Ikona může být nakreslena na formulř metodou DrawIcon, kter umožňuje i zadat její umístění (souřadnice x,y) na formulři. Řešen úloha 37 Umístění ikony Nsledující aplikace po kliknutí na tlačítko button1 umístí ikonu na formulř i do titulkového pruhu Tvorba programů s GUI v C# 90/104

91 Soubor Games.ico musí být umístěný ve stejné složce jako spustitelný soubor (*.exe). private void button1_click(object sender, EventArgs e) Icon icon = new Icon("Games.ico",16,16); Graphics g = this.creategraphics(); // Zobrazení ikony ve formuláři g.drawicon(icon, this.width/2, this.height/2); // Zobrazení ikony v titulkovém pruhu this.icon = icon; Řešen úloha 38 Postupné zobrazovní všech ikon ve složce Ve složce, v níž mme zdrojové kódy programů si můžeme vytvořit novou složku ico a do ní zkopírovat několik souborů *.ico. Můžeme vytvořit aplikaci, kter po každém kliknutí na tlačítko zobrazí další ikonu z tohoto souboru. Aby bylo možné použít metodu GetFiles třídy Directory, kter načte všechny nzvy souborů do pole, je třeba připojit jmenný prostor příkazem: using System.IO; static int n, i = 0; static string[] s; public Form1() Tvorba programů s GUI v C# 91/104

92 InitializeComponent(); private void Form1_MouseClick(object sender, MouseEventArgs e) s = Directory.GetFiles("ico"); n = s.length; i++; if (i >= n) i = 0; Icon icon = new Icon(s[i], 16, 16); Graphics g = this.creategraphics(); g.clear(systemcolors.control); g.drawicon(icon, this.width / 2, this.height / 2); this.icon = icon; Řešen úloha 39 Vytapetovní formulře ikonou Pro větší efekt můžeme ikonou vytapetovat celou plochu formulře: private void Form1_MouseClick(object sender, MouseEventArgs e) Size si, sf; s = Directory.GetFiles("ico"); n = s.length; i++; if (i >= n) i = 0; Icon icon = new Icon(s[i], 16, 16); Graphics g = this.creategraphics(); g.clear(systemcolors.control); si = icon.size; sf = this.size; int x, y; for (y = 0; y < sf.height; y += si.height) for (x = 0; x < sf.width; x += si.width) Tvorba programů s GUI v C# 92/104

93 g.drawicon(icon, x, y); this.icon = icon; Řešen úloha 40 Umístění ikony po kliknutí na formulř Nsledující aplikace umístí ikonu na místo kliknutí ve formulři levým tlačítkem myši. Po kliknutí pravým tlačítkem myši se ikony na formulři smažou. private void Form1_MouseClick(object sender, MouseEventArgs e) Size si, sf; s = Directory.GetFiles("ico"); n = s.length; i++; if (i >= n) i = 0; Icon icon = new Icon(s[i], 16, 16); Graphics g = this.creategraphics(); si = icon.size; sf = this.size; if (e.button == MouseButtons.Left) g.drawicon(icon, e.x, e.y); else g.clear(systemcolors.control); this.icon = icon; Tvorba programů s GUI v C# 93/104

94 Řešen úloha 41 Výběr ikony ze seznamu Vytvořte formulřovou aplikaci, kter umísťovanou ikonu bude vybírat ze seznamu. Ikona se umístí na místo kliknutí levým tlačítkem myši. Po kliknutí pravým tlačítkem myši se ikony z formulře vymažou. private void Form1_MouseClick(object sender, MouseEventArgs e) string NameIc = ".\\ico\\" + combobox1.selecteditem.tostring(); Icon icon = new Icon(NameIc, 16, 16); this.icon = icon; Graphics g = this.creategraphics(); if (e.button == MouseButtons.Left) g.drawicon(icon, e.x, e.y); else g.clear(systemcolors.control); Tvorba programů s GUI v C# 94/104

95 Zadní 19 Zobrazení ikony a jejího nzvu Vytvořte aplikaci, kter kromě zobrazení ikony, zobrazí v textovém poli její nzev. Dle umožněte při zobrazovní ikon se vrtit zpět kliknutím pravým tlačítkem myši. Prce s kurzory Microsoft Visual Studio umožňuje vytvořit vlastní ikonu v editoru ikon, který aktivujeme příkazy: Project Add new item Cursor File Tvorba programů s GUI v C# 95/104

96 Použití kurzoru Cursor cur = new Cursor(".\\cur\\Cursor1.cur"); this.cursor = cur; Řešen úloha 42 Prochzení kurzorů ze složky cur Nsledující aplikace je podobn řešené úloze Řešen úloha 38, ale místo ikon jsou použity kurzory ze složky cur. Kurzor se změní po kliknutí na tlačítko Tvorba programů s GUI v C# 96/104

97 static int n, i = 0; static string[] s; public Form1() InitializeComponent(); private void button1_click(object sender, EventArgs e) s = Directory.GetFiles("cur"); n = s.length; i++; if (i >= n) i = 0; Cursor cur = new Cursor(s[i]); Graphics g = this.creategraphics(); Rectangle r = new Rectangle(); r.x = this.width / 2-cur.Size.Width/2; r.y = this.height / 2 - cur.size.height; g.clear(systemcolors.control); cur.draw(g, r); this.cursor = cur; Nejprve jsou do pole řetězců načteny nzvy souborů ve složce cur. Proto musí být připojen jmenný prostor System.IO. Inkrementuje se index v poli kurzorů, jeho velikost je kontrolovna, aby nepřeshl počet prvků v poli. Vytvoří se nový objekt typu Cursor pro odpovídající soubor. Aby bylo možné kurzor vykreslit na formulř, je vytvořen obdélník, který umožňuje nastavit souřadnice [X,Y+ bodu, od kterého se bude kurzor vykreslovat. Nakonec se smaže formulř a vykreslí na něj nový kurzor. Prostředky (zdroje) Pokud vaše aplikace potřebuje zobrazit konkrétní bitmapu, nebo text, může to načíst ze souboru, ale to není tím nejlepším řešením. Uživatel může soubor přemístit, nebo smazat a aplikace nefunguje. Proto je vhodné uložit některé soubory (bitmapy, ikony, kurzory,<) přímo v.exe souboru aplikace. Soubory tímto způsobem uložené ve spustitelných souborech se nazývají zdroje (resources). Prostředek je pojmenovan porce dat, kter se připojí k souboru v době, kdy se soubor vytvří. Prostředky jsou nesmírně užitečné, když potřebujete začlenit do svých aplikací a komponent všelijak data, které se budou používat při běhu pro nejrůznější účely, jako jsou třeba nastavení podkladového obrzku pro formulř nebo popisku tlačítka Tvorba programů s GUI v C# 97/104

98 Soubor přidte do projektu tak, že kliknete v průzkumníkovi řešení pravým tlačítkem na projektu, zvolíte Add Existing Item a zvolíte soubor, který chcete přidat. Pokud soubor ještě v projektu není, zkopíruje se do adresře vašeho projektu. Obrzek 36 Přidní souboru do projektu Chcete-li soubor vložit jako prostředek, klikněte pravým tlačítkem na souboru a zvolte Properties. Změňte Build Action z Content (výchozí) na Embedded Resource, jak to vidíte na obrzku. Když je soubor vyznačený jako vložený prostředek (Embedded Resource), vloží se do sady manifestních prostředků kompletu Tvorba programů s GUI v C# 98/104

99 Obrzek 37 Nastavení Build Action na Embedded Resource Platí, že čím víc toho dme do zdrojů, tím bude mít příslušný.exe soubor větší velikost. Řešen úloha 43 Prce s prostředky V této úloze je ukzna prce s různými prostředky: ikonami, bitmapami a kurzory. Prostředky jsou vloženy do spustitelného.exe souboru, který m proto větší velikost, ale už nepotřebuje ždné další soubory Tvorba programů s GUI v C# 99/104