Tvorba programů s GUI v C# Obsah Obsah ............................................................................................................................................. 1 Pojem grafické uživatelské rozhraní (GUI) ........................................................................... 2 Okna se zpr{vou .......................................................................................................................... 5 Vlastnosti formul{ře ................................................................................................................. 10 Ud{losti formul{ře .................................................................................................................... 16 Ovl{dací prvky........................................................................................................................... 19 Umisťov{ní ovl{dacích prvků na formul{ř .......................................................................... 19 Obsluha ud{lostí pr{ce s myší ................................................................................................ 21 Použití ovl{dacího prvku popisek (Label) ........................................................................... 24 Pr{ce s barvami v .NET............................................................................................................. 35 Vstup a výstup řetězců ............................................................................................................. 37 Ovl{dací prvek „Zaškrt{vací políčko“ ........................................................................... 52 Ovl{dací prvek „Přepínač“ ............................................................................................... 54 Ovl{dací prvek skupinový r{meček ...................................................................................... 55 Ovl{dací prvky posuvníky ...................................................................................................... 58 Ovl{dací prvky číselníky ......................................................................................................... 60 Ovl{dací prvek ProgressBar .................................................................................................... 61 Ovl{dací prvek Track Bar ........................................................................................................ 62 Ovl{dací prvek Link Label ...................................................................................................... 63 Ovl{dací prvky seznamy.......................................................................................................... 64 Význam nabídek ....................................................................................................................... 66 Ovl{dací prvek MenuStrip ...................................................................................................... 66 Standardní dialogy .................................................................................................................... 68 Zobrazov{ní obr{zků na pozadí formul{ře.......................................................................... 71 Ukl{d{ní a zpracov{ní data a času ......................................................................................... 72 Ovl{dací prvek MonthCalendar ............................................................................................. 74 Ovl{dací prvek DateTimePicker ............................................................................................ 75 Ovl{dací prvek Timer ............................................................................................................... 77 Ovl{dací prvek StatusStrip ..................................................................................................... 77 Ovl{dací prvek TabControl ..................................................................................................... 79 Ovl{dací prvek splitContainer ............................................................................................... 84
11.2.2012
Tvorba programů s GUI v C#
1/104
Ovl{dací prvek ToolStrip ........................................................................................................ 86 Pr{ce s ikonami .......................................................................................................................... 88 Pr{ce s kurzory ........................................................................................................................... 95 Prostředky (zdroje) .................................................................................................................... 97 Seznam obr{zků ...................................................................................................................... 101 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 zpr{vou, formul{ř, vlastnosti formul{ře, ud{losti formul{ře, ovl{dací prvky, vlastnosti ovl{dacích prvků, ud{losti ovl{dacích prvků, obsluha ud{lostí pr{ce s myší a s kl{vesnicí, použití jednotlivých ovl{dacích prvků, pr{ce s ikonami, kurzory a bitmapami, prostředky.
Pojem grafické uživatelské rozhraní (GUI) Podle wikipedie je grafické uživatelské rozhraní (anglicky Graphical User Interface, zn{mé pod zkratkou GUI) je uživatelské rozhraní, které umožňuje ovl{dat počítač pomocí interaktivních grafických ovl{dacích prvků. Na monitoru počítače jsou zobrazena okna, ve kterých programy zobrazují svůj výstup. Uživatel použív{ kl{vesnici, myš a grafické vstupní prvky jako jsou menu, ikony, tlačítka, posuvníky a další ovl{dací 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 Pozn{mkovém bloku je snadné otevřít soubor. Klepnutím na příkaz Otevřít v nabídce Soubor zobrazíte další vizu{lní komponentu dialog Otevřít, v němž jednoduše vyberete soubor, který chcete otevřít. Pěkn{ tv{ř GUI není zadarmo – je vykoupena programov{ním - na vytvoření okna je zapotřebí množství kódu, který není jednoduchý. Zde v{m Visual C# usnadňuje život – při založení nového projektu vytvoří okno za v{s a také napíše kód zajišťující jeho funkčnost.
11.2.2012
Tvorba programů s GUI v C#
2/104
Aplikace, ovl{dané GUI jsou řízené ud{lostmi Aplikace, ovl{dané 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 zpr{vy: "Zadejte vaše jméno:". Uživatel by pak napsal své jméno a stisknut kl{vesu 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 procedur{lním programov{ním, nerozhoduje o pořadí dění uživatel, ale aplikace. Aplikace, ovl{dané GUI fungují přesně obr{ceně; 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ší ovl{dací prvky. Pro pr{ci 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:
11.2.2012
Tvorba programů s GUI v C#
3/104
Obr{zek 1 Volba typu, n{zvu 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 n{zvem projektu a n{sledující podsložky a soubory zdrojových kódů:
11.2.2012
Tvorba programů s GUI v C#
4/104
Obr{zek 2 Vytvořené soubory a složky
Metoda Main je obsažen{ v souboru Program.cs Nový formul{ř je v Mainu vytvořený vol{ním metody: Application.Run(new Form1());
Okna se zpr{vou Do okna se zpr{vou lze vypsat informaci a vyhodnotit odpověď uživatele. Okna hl{šení (okna zpr{v, Message Boxes) jsou mal{ okna, kter{ n{s prov{zejí v aplikacích s GUI a informují n{s o chyb{ch, které nastaly, varují n{s 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 n{sledující uk{zce:
Obr{zek 3 Uk{zka okna se zpr{vou
Okno můžeme aktivovat kliknutím na tlačítko formul{ře, nebo přímo vol{ní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 n{sledující parametry: text v okně text v z{hlaví okna tlačítka (MessageBoxButtons.YesNo) ikona (MessageBoxIcon.Warning) předvolené tlačítko (MessageBoxDefaultButton.Button2)
11.2.2012
Tvorba programů s GUI v C#
5/104
Nastavení tlačítek v okně se zpr{vou 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); } Spuštění programu
Obr{zek 4 Volba hodnoty MessageBoxButtons
Nastavení ikony v okně se zpr{vou Dalším parametrem můžeme nastavit ikonu, kter{ se vykreslí v okně se zpr{vou. Použijeme k tomu výčtový typ MessageBoxIcon.
11.2.2012
Tvorba programů s GUI v C#
6/104
Obr{zek 5 Nastavení ikony v okně se zpr{vou
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); } Spuštění programu
Nastavení standardního tlačítka v okně se zpr{vou Standardní (default) tlačítko lze nastavit s využitím výčtového typu: MessageBoxDefaultButton.
Obr{zek 6 Nastavení standardního tlačítka
11.2.2012
Tvorba programů s GUI v C#
7/104
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 n{vratovou 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);
11.2.2012
Tvorba programů s GUI v C#
8/104
if (konec == DialogResult.Yes) MessageBox.Show("Tak končíme", "Kliknuto na Ano"); else MessageBox.Show("Stejně končíme", "Kliknuto na Ne"); } Spuštění programu
Zad{ní 1 Vyhodnocení reakce v okně se zpr{vou V d{le 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“.
Spuštění programu
Zad{ní 2 Vyhodnocení reakce Ano/Ne/Storno Napište program, který zobrazí n{sledující okno hl{šení:
Pokud uživatel klikne na Ano, zobrazte okno:
Pokud uživatel klikne na Ne, zobrazte okno:
11.2.2012
Tvorba programů s GUI v C#
9/104
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é zn{me 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 n{strojů, 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ě n{vrhu 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.
11.2.2012
Tvorba programů s GUI v C#
10/104
Obr{zek 7 Okno vlastností formul{ře
V levé č{sti okna jsou n{zvy vlastností, v levé č{sti můžeme nastavit hodnotu vlastnosti, v dolní č{sti se zobrazuje n{pověda k označené vlastnosti. Vlastnosti formul{ře můžeme nastavovat v okně Properties, nebo přímo v programu, jak ukazuje n{sledující příklad.
11.2.2012
Tvorba programů s GUI v C#
11/104
Program 4 Nastavení vlastností formuláře N{sledující program vytvoří formul{ř, nastaví mu titulek, šířku, výšku a styl r{mečku. D{le 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); } Spuštění programu
Vytvoření více oken (formul{řů) Program 5 Vytvoření tří formulářových oken
Obr{zek 8 Tři formul{řov{ okna public class Program { public static void Main()
11.2.2012
Tvorba programů s GUI v C#
12/104
{ // 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);}} Spuštění programu
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 manu{lně umístí po obrazovce v z{vislosti 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 r{mcové okno aplikace. Na běžící aplikaci také otestujte chov{ní aplikace při zavír{ní oken.
11.2.2012
Tvorba programů s GUI v C#
13/104
Obr{zek 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 = 50+160 * i; if (i > 4) forms[i].Left = 110 + 160 * (i - 5); // Zobrazíme formulář: forms[i].Show(); } // První formulář bude rámcový: Application.Run(forms[0]);} } Spuštění programu
Řešen{ úloha 2 Nastavení kurzoru nad formul{řem Vytvořte 28 oken, které se manu{lně umístí po obrazovce v z{vislosti na pořadí okna podle uvedeného obr{zku. 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.
11.2.2012
Tvorba programů s GUI v C#
14/104
Okno číslo 1 bude r{mcové okno aplikace. Na běžící aplikaci otestujte vzhled jednotlivých ukazatelů myši.
Obr{zek 10 28 oken s různými kurzory Program 7 Nastavení kurzoru nad formulářem
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;
11.2.2012
Tvorba programů s GUI v C#
15/104
case 14: top = 420; left = 14;break; case 21: top = 530;left = 21; break; } forms[i].Top = top ; forms[i].Left = 50+125 *(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]); } Spuštění programu
Pomocí vlastnosti Opacity můžete nastavit průhlednost formul{ře.
Ud{losti formul{ře Na tomto místě si uk{žeme, jak lze obsloužit ud{losti formul{ře. Zaměříme se na ud{lost, kter{ se spustí v případě, že je potřeba překreslit klientskou oblast okna. Aplikace typu Windows Forms je řízen{ ud{lostmi. Ovl{dací prvky vyvol{vají ud{losti (events) a na tyto ud{losti může reagovat klientský kód obsloužením dané ud{losti. Víme, že aplikace typu Windows Forms začín{ statickou metodou System.Windows.Forms.Application. Run, které je před{n r{mcový formul{ř aplikace. Uvnitř této metody se neust{le ček{ na ud{losti, 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 ud{lost, kter{ je vyvol{na, pokud je potřeba překreslit okno. Takov{ situace může nastat například v případě, kdy okno bylo skryto a n{sledně zobrazeno. Je potřeba dané okno překreslit, obzvl{ště klienstkou č{st okna, kter{ je z{visl{ 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 ud{lost Click, kter{ je typu EventHandler. Přepište odpovídající obslužnou metodu této ud{losti 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 n{sledovně:
11.2.2012
Tvorba programů s GUI v C#
16/104
A po kliknutí
Spuštění programu
Potřebujeme nastavit obsluhu ud{lostí při vytv{ření formul{ře (Load) a při kliknutí myší na formul{ř. Zobrazíme si podoknu Properties (View – Properties Window, nebo F4).
11.2.2012
Tvorba programů s GUI v C#
17/104
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.
Obr{zek 11 Okno Properties
Do těla uvedených metod napíšeme n{sledující kód: private void Form1_MouseClick(object sender, MouseEventArgs e) { this.BackColor = Color.Red; this.Text = "Bylo kliknuto na formulář";
11.2.2012
Tvorba programů s GUI v C#
18/104
} private void Form1_Load(object sender, EventArgs e) { this.Text = "Klikni myší na formulář pro změnu barvy"; this.Width = 400; }
Ovl{dací prvky Z{kladem uživatelského rozhraní ve WinForm jsou interaktivní grafické ovl{dací prvky. Pomocí ovl{dacích prvků uživatel komunikuje s programem. Ovl{dací prvek je objekt nějaké třídy, kter{ je odvozen{ ze z{kladní třídy System.Windows.Forms.Control. Ovl{dací 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í ovl{dací prvky jsou dostupné v toolboxu VS.NET. Ovl{dací prvky lze rozdělit do několika kategorií: Akční – kliknutí uživatele vyvol{ akci Hodnotové – zobrazují nějakou hodnotu (text, obr{zek), ale neumožňují ji měnit Ovl{dací prvky pro seznam – zobrazí seznam hodnot Kontejnerové ovl{dací prvky – umožňují seskupov{ní a uspoř{d{v{ní jiných ovl{dacích prvků
Akční ovl{dací prvky Tlačítko (Button) Panel n{strojů (ToolBar) Hlavní nabídka (MainMenu) Kontextov{ nabídka (ContextMenu) Hlavní ud{lostí akčních ovl{dacích prvků je ud{lost Click.
Umisťov{ní ovl{dacích prvků na formul{ř Chceme-li na formul{ř v režimu n{vrh (Design) umisťovat ovl{dací prvky, je vhodné si zobrazit panel n{strojů (Toolbox) příkazem: View – Toolbox, nebo Ctrl+Alt+X.
11.2.2012
Tvorba programů s GUI v C#
19/104
Obr{zek 12 Umisťov{ní ovl{dacích prvků na formul{ř
Vložení ovl{dacích prvků do formul{ře Zobrazíme si sadu n{strojů (View - Toolbox) Nakreslíme ovl{dací prvek Nastavíme vlastnosti ovl{dacího prvku Některým ovl{dacím prvkům (např. tlačítku) přiřadíme obsluhu ud{losti (kód) Vlastnosti ovl{dacích prvků nastavujeme v okně Properties (vlastnosti). Vlastnost Name ovl{dacích prvků Je jméno ovl{dacího prvku, pomocí kterého s prvkem pracujeme v programu. Vlastnost Text ovl{dacího prvku Je text, který se u ovl{dacího prvku zobrazuje. Z nabídky n{strojů 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 ud{lost, kterou chceme obsluhovat pro vybraný prvek na formul{ři. M{me-li vybrané tlačítko button1, můžeme získat n{sledující seznam ud{lostí:
11.2.2012
Tvorba programů s GUI v C#
20/104
Obr{zek 13 Ud{losti pro tlačítko
Obsluha ud{lostí pr{ce s myší Z{kladní ud{losti myši nast{vají v tomto pořadí: MouseEnter – kurzor vstoupil na ovl{dací prvek MouseMove – t{hnutí 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 ovl{dací prvek
Řešen{ úloha 4 Obsluha pr{ce s myší Vytvořte aplikaci, kter{ bude obsluhovat všechny uvedené ud{losti myši. N{zev aktu{lně provedené ud{losti se vždy vypíše do klientské oblasti okna.
11.2.2012
Tvorba programů s GUI v C#
21/104
Na formul{ř umístíme šest tlačítek a každému z nich nastavíme obsluhu určité ud{losti. 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. N{zev obslužné metody konkrétního tlačítka začín{ n{zvem tlačítka a za znakem podtržítko je uveden n{zev obsluhované ud{losti (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";
11.2.2012
Tvorba programů s GUI v C#
22/104
}
Po kliknutí lze zjistit, kterým tlačítkem bylo kliknuto tak, že otestujeme vlastnost Button parametru e metody pro obsluhu ud{losti 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"; } Spuštění programu
S využitím parametru e metody pro obsluhu klik{ní 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 r{mci rozsahu příslušného prvku. Spuštění programu
Hodnotové ovl{dací prvky Ve výše uvedeném příkladu jsme zobrazovali souřadnice místa kliknutí myší v titulkovém pruhu. Pro zobrazov{ní (a někdy i nastavov{ní) hodnot můžeme použít hodnotové ovl{dací prvky. Hodnotové ovl{dací prvky lze d{le rozčlenit podle datového typu hodnoty na:
11.2.2012
Tvorba programů s GUI v C#
23/104
Řetězcové Číselné Booleovské Datum a čas Grafické Řetězcové ovl{dací prvky zobrazují vlastnost Text. Sem patří Label, LinkLabel, StatusBar, TextBox. Číselné ovl{dací prvky zobrazují vlastnost Value, jejíž hodnota může být nastavena v určitém rozsahu. Dojde-li ke změně vlastnosti Value, vznikne ud{lost ValueChanged. Booleovské ovl{dací 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 ud{losti CheckedChanged a CheckStateChanged. Ovl{dací prvky pro datum a čas umožňují vybrat instanci typu DateTime. Patří sem MonthCalendat a DateTimePicker. Ovl{dací prvky pro grafické hodnoty umožňují zobrazení obr{zků ve vlastnosti Image. Patří sem PictureBox.
Použití ovl{dacího prvku popisek (Label) Tento ovl{dací 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 ovl{dacího prvku. Text se může zarovnat k libovolné straně, či rohu ovl{dací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é ovl{dací 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í ovl{dací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ě pojmenov{vají label a číslem, které odpovíd{ pořadí vytvoření prvku. N{zev popisku můžeme změnit.
11.2.2012
Tvorba programů s GUI v C#
24/104
V n{sledujícím programu jsou vytvořeny 3 popisky. Prvnímu jsou ponech{ny implicitní vlastnosti, u druhého je nastaven font, barva písma a pozadí a 3D r{meček a u třetího ještě navíc velikost popisku a tvar kurzoru na IBeam.
Obr{zek 14 Nastavení vlastností popisku
Obr{zek 15 Vzhled běžícího programu
11.2.2012
Tvorba programů s GUI v C#
25/104
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í. Spuštění programu
Ř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{ř:
Obr{zek 16 N{vrh aplikace pro zobrazení souřadnic myšího kurzoru
Postup tvorby aplikace: Ze sady n{strojů (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 n{vrhu, 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.
11.2.2012
Tvorba programů s GUI v C#
26/104
D{le v okně vlastností vymažte hodnoty vlastností Text popisků se sudými čísly tak, aby byly pr{zdné. Po spuštění programu se pak nebudou zobrazovat implicitní texty těchto popisků. Vytvořte z{klad procedury ud{losti pohybu myši MouseMove po formul{ři. V zobrazení n{vrh{ře Form1.cs[Design] vyvolejte okno vlastností formul{ře a potom klepněte na čtvrtou ikonu zleva s obr{zkem blesku. D{le rozbalte (klepnutím na znak plus) kategorii Mouse a poklepejte na položku MouseMove, čímž vytvoříte z{klad procedury ud{losti MouseMove. Do takto vzniklého z{kladu procedury ud{losti vepište n{sledují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 n{vrh{ři označený formul{ř, neboť tojsou metody formul{ře. Kompletní kód metod v souboru Form1.cs včetně hlaviček je v n{sledují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(); }
Obr{zek 17 Běžící aplikace, zobrazující souřadnice myšího kurzoru Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
27/104
Vstup hodnot z kl{vesnice Kromě vstupu z myši umějí formul{ře a ovl{dací prvky zachycovat i vstup z kl{vesnice. Kl{vesnici lze ch{pat dvěma způsoby: Jako kolekci kl{ves - můžeme určit, kter{ kl{vesa byla stisknuta. Jako kolekci znaků - můžeme určit, který znak byl zad{n. Kód znaku však nez{visí pouze na stisknuté kl{vese, ale také na stavu přepínacích kl{ves (Caps Lock, Num Lock, Scroll Lock, příp. Insert) a přeřaďovacích kl{ves (Shift, Control a Alt). Vstup z kl{vesnice můžeme zachytit prostřednictvím tří ud{lostí: KeyDown - při stisku kl{vesy. KeyUp - při uvolnění kl{vesy. KeyPress - při stisku. Tyto události nastávají v následujícím pořadí: KeyDown KeyPress KeyUp
KeyDown a KeyUp D{le se budeme zabývat ud{lostmi, které spouští obsluhu formul{ře při stisku (KeyDown) nebo uvolnění (KeyUp) kl{vesy. Pomocí obsluhy těchto ud{losti můžeme zjistit, kter{ kl{vesa byla stisknuta. Tuto informaci zjistíme pomocí argumentu obsluhy ud{losti, který je instancí třídy KeyEventArgs. Vlastnost KeyCode identifikuje stisknutou kl{vesu. 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; } }
11.2.2012
Tvorba programů s GUI v C#
28/104
Pomocí přepínače program testuje stisknutou kl{vesu 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.
Obr{zek 18 Změna barvy šipkami nahoru a dolů
Řešen{ úloha 7 Zpracov{ní stisknuté kl{vesy D{le vytvoříme aplikaci, ve které při stisku kl{vesy 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 kl{vesnice.
11.2.2012
Tvorba programů s GUI v C#
29/104
Obr{zek 19 Běh aplikace pro výpis znaku a kódu stisknuté kl{vesy
V textovém poli dole budeme zad{vat znaky a v bílém popisku vlevo se zobrazí znak a v bílém popisku vpravo se zobrazí jeho kód. Stisknutou kl{vesu zpracujeme n{sledují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(); } Spuštění programu
Vyzkoušejte všechny kl{vesy a pozorujte jejich kód. Vlastnost KeyCode třídy KeyeventArgs vrací hodnotu z výčtového typu Keys, který pbsahuje n{zvy jednotlivých kl{ves.
11.2.2012
Tvorba programů s GUI v C#
30/104
Metoda pro obsluhu ud{losti kliknutí na textBox1
Obr{zek 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í n{sledují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 kl{ves jsou uvedeny ve výčtovém typu Keys a získ{me je metodou Enum.GetNames(typeof(Keys)). Výčtový typ je seznam konstant s přednastavenými celočíselnými hodnotami. Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
31/104
Příkladem je výčtový typ Keys, nebo KnownColor:
Obr{zek 21 Výčtové typy Keys a KnownColor
Podobně můžeme v textovém poli vypsat tzv. zn{mé 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"; }
Obr{zek 22 Hodnoty výčtového typu KnownColor Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
32/104
Řešen{ úloha 8 Proch{zení zn{mých barev N{sledující aplikace n{m po kliknutí na formul{ř změní barvu pozadí formul{ře a v jednom textovém poli se vypíše n{zev barvy a druhém její číslo. D{le 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(); } } Spuštění programu
Řešen{ úloha 9 Ovl{d{ní pohybu formul{ře šipkami N{sledují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)
11.2.2012
Tvorba programů s GUI v C#
33/104
{ 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; } } Spuštění programu
Úlohy ke kapitole "KeyDown a KeyUp" Napište program, ve kterém uživatel může zvolit barvu pozadí formul{ře zad{ním kl{ves: R - barva bude červen{ G - barva bude zelen{ B - barva bude modr{ jin{ kl{vesa - barva bude čern{ Po zad{ní dojde k překreslení formul{ře zadanou barvou. Okno po stisknutí kl{vesy R bude vypadat obdobně jako na obr{zku:
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 kl{vesy: R - bude se nastavovat červen{ složka
11.2.2012
Tvorba programů s GUI v C#
34/104
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 zad{ní dojde k překreslení formul{ře zadanou barvou a také se zobrazí hodnoty složek aktu{lní hodnoty barvy.
Pr{ce 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 zn{mý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 zn{mou barvu na typ Color. Zn{mě barvy KnownColor lze inkrementovat a dekrementovat, jak je vidět z n{sledují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(); } } }
11.2.2012
Tvorba programů s GUI v C#
35/104
V textovém bloku textBox1 se zobrazuje n{zev 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 zn{mou 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ísk{ní n{zvů zn{mých barev N{sledující formul{ř v pravé č{sti obsahuje seznam všech zn{mých barev a vlevo dole se zobrazuje n{zev aktivní barvy, kterou je vybarveno pozadí formul{ře. Index aktivní barvy se zobrazí v textovém bloku nad jejím n{zvem.
Obr{zek 23 Uk{zka použití zn{mých barev
V n{vrh{ři jsou na formul{ř umístěny tři textové bloky a tři popisky.
11.2.2012
Tvorba programů s GUI v C#
36/104
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 d{le uveden{ třída Form1, kter{ umožňuje po kliknutí na formul{ř změnit jeho barvu na n{sledující ze seznamu zn{mý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ír{ní formul{ře, nastavení barvy a výpis jejího n{zvu a indexu v metodě Form1_MouseClick po každém kliknutí na formul{ř. Ze zn{mých barev je třeba vyloučit barvu s indexem 26 (Transparent), kterou nelze použít. Spuštění programu
Vstup a výstup řetězců Pro vstup a výstup řetězců použív{me prvek textové pole (TextBox). Objekty TextBox slouží k zobrazov{ní 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.
11.2.2012
Tvorba programů s GUI v C#
37/104
Ř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írov{ní textu a pr{ce 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ě zad{v{ní textu nejsou přístupn{ (Enabled=false). Pr{ce s textem je řešena obsluhou jsme ud{losti textBox1_KeyDown. Aktualizace informací o výběru je řešena rovněž pomocí obsluhy ud{losti textBox1_KeyDown po stisku kl{vesy Enter (e.KeyCode == Keys.Enter).
11.2.2012
Tvorba programů s GUI v C#
38/104
Úloha ilustruje některé možnosti pr{ce s textem. Kopírov{ní textu: textBox2.Text = textBox1.Text; Kopírov{ní 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 ud{losti 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; } } Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
39/104
Řešen{ úloha 13 Výběr zn{mé 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()); }
11.2.2012
Tvorba programů s GUI v C#
40/104
} Spuštění programu
Řešen{ úloha 14 Zad{v{ní hesla Jednou z vlastností textového pole je PasswodChar. Představuje znak, který se bude zobrazovat v textovém poli místo zad{vaných znaků. – tzv. maskovací znak. Maskovacím znakem je obvykle hvězdička. Zadané heslo se odešle stiskem kl{vesy Enter. Pokud odpovíd{ spr{vnému heslu, vypíše spr{vné heslo (Ahoj), jinak se zobrazí okno se zpr{vou s textem “Špatné heslo” a ikonou Error. Okna aplikace budou vypadat n{sledovně:
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); } } Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
41/104
Řešen{ úloha 15 Výpis obsahu souboru do textového pole Textový blok můžeme použít k vyps{ní obsahu souboru:
Výpis spojíme s nějakou ud{lostí (například kliknutí v textovém bloku). Ud{lost obsloužíme n{sledovně: 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í vertik{lního posuvníku. Spuštění programu
Ke spouštění metody, vykon{vající požadovanou činnost lze využít tlačítko a obsluhovat reakci na kliknutí na tlačítko.
Řešen{ úloha 16 Polohov{ní ovl{dacího prvku na formul{ři Chceme zajistit, aby ovl{dací prvek tlačítko byl st{le uprostřed formul{ře i při změně velikosti formul{ře.
11.2.2012
Tvorba programů s GUI v C#
42/104
Vytvoříme obsluhu ud{losti 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; } Spuštění programu
Řešen{ úloha 17 Využití tlačítka pro spuštění n{hodného generov{ní barvy pozadí formul{ře Vytvořme aplikaci, kter{ bude obsahovat jedno tlačítko. Při kliku na tlačítko se nastaví n{hodn{ 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)); } Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
43/104
N{hodně generovanou kombinaci RGB lze vypsat do textového pole.
Obr{zek 24 N{hodné generov{ní barev kombinací RGB Spuštění programu 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: Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
44/104
Zad{ní 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 n{zev stylu:
Obr{zek 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.
11.2.2012
Tvorba programů s GUI v C#
45/104
Obr{zek 26 Tlačítka pro pohyb formul{ře private void button1_Click(object { this.Top -= 10; } private void button2_Click(object { this.Top += 10; } private void button3_Click(object { this.Left += 10; } private void button4_Click(object { this.Left -= 10; } Spuštění programu
sender, EventArgs e)
sender, EventArgs e)
sender, EventArgs e)
sender, EventArgs e)
Vlastnost Anchor určuje ukotvení tlačítek:
Obr{zek 27 Nastavení vlastnosti Anchor
Jestliže nastavíme vlastnost Anchor na None bude tlačítko st{le 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.
11.2.2012
Tvorba programů s GUI v C#
46/104
Obr{zek 28 Dokov{ní tlačítek Spuštění programu
Modifikace: Doplnění tlačítek, které zajistí šikmý pohyb formul{ře.
Řešen{ úloha 19 Uk{zka použití číselníku Ovl{dací prvek číselník (numericUpDown) umožňuje nastavit číselnou hodnotu v zadaném rozsahu a se zadaným krokem. N{sledují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).
11.2.2012
Tvorba programů s GUI v C#
47/104
Rychlost je získ{na 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 { this.Top -= rychlost; } private void button2_Click(object { this.Top += rychlost; } private void button3_Click(object { this.Left += rychlost; } private void button4_Click(object { this.Left -= rychlost; } private void button5_Click(object { this.Left += rychlost; this.Top -= rychlost; }
11.2.2012
sender, EventArgs e)
sender, EventArgs e)
sender, EventArgs e)
sender, EventArgs e)
sender, EventArgs e)
Tvorba programů s GUI v C#
48/104
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; }} Spuštění programu
Převod řetězce na číslo Zadaný řetězce převedeme na číslo pomocí některé metody třídy Convert:
Obr{zek 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 zad{vat operandy, potom klikneme na tlačítko s oper{torem a na tlačítko vypocet. V dolním textovém pole se zobrazí počítaný výraz a výsledek.
11.2.2012
Tvorba programů s GUI v C#
49/104
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='*';
11.2.2012
Tvorba programů s GUI v C#
50/104
} private void button4_Click(object sender, EventArgs e) { c='/'; } } Spuštění programu
Obsluha tlačítek button1 až button4 spočív{ v uložení zvoleného oper{tora 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.
Zad{ní 4 Vylepšen{ kalkulačka Vytvořte kalkulačku, kter{ kromě z{kladních funkcí obsahuje další funkce podle obr{zku:
Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
51/104
Zad{ní 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.
Spuštění programu
Ovl{dací prvek „Zaškrt{vací políčko“ Zaškrt{vací políčko je instancí třídy System.Windows.Forms.CheckBox. Zaškrt{vací políčka se používají pro přepín{ní 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ísk{me pomocí vlastnosti Checked třídy CheckBox: Při změně stavu zaškrtnutí zaškrt{vacího políčka se spustí ud{lost CheckedChanged:
Řešen{ úloha 21 Zaškrt{vací políčko Vytvořte formul{ř, který bude obsahovat zaškrt{vací políčko a popisku (label). Je-li zaškrt{vací políčko zaškrtnuto, objeví se v popisce text: zaškrtnuto, jinak nezaškrtnuto.
11.2.2012
Tvorba programů s GUI v C#
52/104
private void checkBox1_CheckedChanged(object sender, EventArgs e) { if (checkBox1.Checked) label1.Text = "Zaškrtnuto"; else label1.Text = "Nezaškrtnuto"; } Spuštění programu
Zad{ní 6 Rozhodov{ní pomocí dvou zaškrt{vacích políček Vytvořte program, který vyhodnotí zaškrtnutí dvou zaškrt{vacích políček. Je-li zaškrtnuto pouze první, vypíše se „Dobře“, jinak se vypíše „Špatně“. Zaškrt{vací políčko m{ vlastnost CheckAlign, kter{ určuje pozici čtverečku:
Zarovnejte první zaškrt{vací políčko vpravo a na střed a druhé vlevo a na střed. Pro obě políčka nastavte vlastnost pozadí (BackColor).
Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
53/104
Ovl{dací 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 r{diov{ tlačítka, protože fungují podobným způsobem jako tlačítka na autor{diu můžete poslouchat pouze jednu stanici, volby se vz{jemně vylučují. Přepínače sdružíme do skupiny tím, že je umístíme do skupinového r{mu. Skupinový r{m je instancí třídy System.Windows.Forms.GroupBox. Přepínače mají mnoho společného se zaškrt{vací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škrt{vací políčka a kdy přepínače? Jedno zaškrt{vací 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škrt{vací políčka se používají, jestliže můžeme zvolit více možných variant.
11.2.2012
Tvorba programů s GUI v C#
54/104
Zad{ní 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ý.
Spuštění programu
Zad{ní 8 Řešení Zad{ní 6 pomocí přepínače Úlohu ze Zad{ní 6 řešte pomocí jednoho přepínače.
Ovl{dací prvek skupinový r{meček Přepínače mohou být umístěny uvnitř r{mečku skupiny. R{meček skupiny seskupuje přepínače nejen vizu{lně, ale také logicky.
Řešen{ úloha 22 Výpočet ceny zmrzlinového poh{ru Vytvořte formul{řovou aplikaci, kter{ umožní výpočet ceny zmrzlinového poh{ru. Velikost porce bude vybírané pomocí tří přepínačů, spojených do skupinového r{mečku. Ceny z{kladních porcí jsou 10 Kč, 20 Kč a 30 Kč. Do poh{ru by mohly být přid{ny přísady: ovoce, čokol{da, karamel. Každ{ přísada zvýší cenu o 10 Kč.
11.2.2012
Tvorba programů s GUI v C#
55/104
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č"; } Spuštění programu
Zad{ní 9 Nastavení barvy pomocí přepínačů Vytvořte formul{řovou aplikaci, kter{ bude obsahovat tři přepínače pro tři z{kladní barvy - červenou, zelenou a modrou. Tyto přepínače umístěte do skupinového r{mečku a přiřaďte jim stejnou obslužnou metodu ud{losti. Při zaškrtnutí určitého přepínače se nastaví pozadí textového pole vybranou barvou.
11.2.2012
Tvorba programů s GUI v C#
56/104
Zad{ní 10 Realitní kancel{ř – určení ceny domu Vytvořte aplikaci, kter{ v{m pro vybraně město, velikost domu a jeho vybavení vypočít{ jeho cenu.
Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
57/104
Zad{ní 11 Realitní kancel{ř - vyhled{ní bytů Vytvořte aplikaci, kter{ v{m 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.
Ovl{dací prvky posuvníky Posuvníky se používají pro nastavení celočíselných hodnot. M{me 2 posuvníky: horizont{lní (hScrollBar) a vertik{lní (vScrollBar). U posuvníků lze nastavit řadu vlastností - důležité jsou: Maximum maxim{lní nastaviteln{ hodnota Minimum maxim{lní nastaviteln{ hodnota SmallChange mal{ změna – při klik{ní na šipku LargeChange velk{ změna – při klik{ní před/za t{hlo posuvníku Value poč{teční hodnota
11.2.2012
Tvorba programů s GUI v C#
58/104
Řešen{ úloha 23 Mích{ní 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.
Obr{zek 30 Nastavov{ní vlastností posuvníku
11.2.2012
Tvorba programů s GUI v C#
59/104
public partial class Form1 : Form { int r = 0,g=0,b=0; public Form1() { InitializeComponent(); } private void hScrollBar1_Scroll(object { r = e.OldValue; this.BackColor = Color.FromArgb(r, } private void hScrollBar2_Scroll(object { g = e.OldValue; this.BackColor = Color.FromArgb(r, } private void hScrollBar3_Scroll(object { b = e.OldValue; this.BackColor = Color.FromArgb(r, } } Spuštění programu
sender, ScrollEventArgs e) g, b); sender, ScrollEventArgs e) g, b); sender, ScrollEventArgs e) g, b);
Ovl{dací 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) {
11.2.2012
Tvorba programů s GUI v C#
60/104
decimal i = numericUpDown1.Value; textBox1.Text = i.ToString();} Spuštění programu
Ovl{dací prvek ProgressBar Ukazatel průběhu (ProgressBar) slouží ke zn{zornění průběhu nějaké činnosti. Umožňuje specifikovat minim{lní a maxim{lní hodnotu, ovl{dací prvek ale zobrazuje bloky, jaké vidíte na obr{zku. Přibýv{ní bloků na ukazateli lze řídit inkrementační metodou.
Obr{zek 31 Ovl{dací 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 Ovl{dací prvek ProgressBar Použití prvku ProgressBar je uk{z{no na aplikaci, uvedené na obr{zku Obrázek 31. Aplikace je jednoduch{ – obsahuje pouze ovl{dací prvek ProgressBar a dvě tlačítk: jedno na přid{v{ní a druhé na ubír{ní 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); } Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
61/104
Ovl{dací prvek Track Bar „Reostat“, neboli TrackBar umožňuje uživatele specifikovat číselnou hodnotu z vymezeného rozsahu. Ovl{dací prvek zachytí kl{vesy s šipkami, PageUp a PageDown, jimiž se z kl{vesnice d{ řídi jezdec tohoto speci{lní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 kl{vesy se šipkami. D{le uveden{ aplikace použív{ 3 ovl{dací prvky TrackBar pro nastavení červené, zelené a modré složky barvy.
Řešen{ úloha 26 Řešení mích{ní barev pomocí ovl{dací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);
11.2.2012
Tvorba programů s GUI v C#
62/104
} private void trackBar3_Scroll(object sender, EventArgs e) { b = trackBar3.Value; this.BackColor = Color.FromArgb(r, g, b); }} Spuštění programu
Ovl{dací prvky TrackBar mohou být umístěny i svisle, jestliže jim nastavíme vertik{lní orientaci:
Obr{zek 32 Nastavení vertik{lní orientace ovl{dacích prvků TrackBar
Ovl{dací 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. Ovl{dací prvek obvykle slouží k tomu, aby se mohli uživatelé pohodlně dostat z aplikací formul{řů Windows na webové str{nky. Text se zad{v{ stejně jako u norm{lního popisku: linkLabel1.Text = (www.sspbrno.cz//~daniela.stopkova);
11.2.2012
Tvorba programů s GUI v C#
63/104
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) N{sledující úsek programu obsahuje tři odkazy: na internet na program na obr{zek. Odkaz je realizov{n jako obsluha ud{losti LinkClicked na příslušném ovl{dací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(@"www.sspbrno.cz/~daniela.stopkova"); } 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"); }
Ovl{dací prvky seznamy Seznamy umožňují uživateli vybrat ze seznamu určitou položku.
11.2.2012
Tvorba programů s GUI v C#
64/104
Zad{ní položek seznamu (Items)
Obr{zek 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;
11.2.2012
Tvorba programů s GUI v C#
65/104
} }
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; }
Zad{ní 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í program{torům uspoř{dat příkazy v logické hierarchii. Nabídky slouží pro snadné zad{v{ní příkazů.
Ovl{dací prvek MenuStrip Ovl{dací prvek MenuStrip slouží k vytv{ření hlavní nabídky.
Řešen{ úloha 28 Ovl{dací prvek MenuStrip Použití prvku MenuStrip si uk{žeme na n{vrhu nabídky pro výběr barvy pozadí a písma popisky.
11.2.2012
Tvorba programů s GUI v C#
66/104
N{vrh 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; }
11.2.2012
Tvorba programů s GUI v C#
67/104
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; } Spuštění programu
Standardní dialogy S WinForms se dod{vají n{sledují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
11.2.2012
Tvorba programů s GUI v C#
68/104
Aby bylo možné pracovat se soubory, je třeba použít jmenný prostor Systém.IO. Se standardními dialogy se pracuje n{sledovně: 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);
11.2.2012
Tvorba programů s GUI v C#
69/104
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; } Spuštění programu
Zad{ní 13 Jednoduch{ pr{ce 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.
11.2.2012
Tvorba programů s GUI v C#
70/104
Zobrazov{ní obr{zků na pozadí formul{ře Obr{zky lze po kliknutí na formul{ř zobrazit jako vlastnost this.BackgroundImage. N{zvy obr{zků, uložených v určité složce lze uložit do glob{lního pole stringů statickou metodou Directory.GetFiles("obr"). Tím je zajištěno, že po přid{ní dalších obr{zků 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í obr{zků je také možno použít ovl{dací prvek pictureBox. Pro zobrazení obr{zku v tomto prvku se postupuje podobně, jako při zobrazov{ní obr{zků na pozadí formul{ře. Obr{zek nastavujeme jako vlastnost BackgroundImage prvku pictureBox1: pictureBox1.BackgroundImage = new Bitmap("jmeno.jpg");
Uvedené příkazy postupně zobrazí všechny obr{zky 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]);
11.2.2012
Tvorba programů s GUI v C#
71/104
}
Pro prvek pictureBox lze nastavit některé další vlastnosti.
Při prohlížení obr{zků 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 obr{zku zvýšit, nebo snížit. Je také třeba otestovat, zda index nepřes{hl počet obr{zků, nebo se nedostal do z{porných hodnot a podle toho index obr{zku patřičně upravit. if (e.Button == MouseButtons.Left) i++; else i--; if (i >= n) i = 0; if (i < 0) i = n-1;
Ukl{d{ní a zpracov{ní data a času .NET Framework definuje v oboru n{zvů System strukturu DateTime, kter{ se použív{ k ukl{d{ní a zpracov{ní dat a časů. Nový objekt typu DateTime lze získat jedním ze dvou způsobů:
11.2.2012
Tvorba programů s GUI v C#
72/104
Prostřednictvím statické vlastnosti Now, kter{ vytv{ří objekt typu DateTime s aktu{lní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ísk{ní informací o datu a času a nabízí několik metod form{tov{ní data a času.
Ovl{dací prvky kolekce prvků Windows Forms pro pr{ci s datem a časem Kolekce prvků Windows Forms m{ pro pr{ci s datem a časem ovl{dací prvky MonthCalendar a DateTimePicker.
Získ{ní aktu{lního data Aktu{lní datum získ{me 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 N{sledují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) zad{me rok narození a v dolním textovém poli (textBox2) se po kliknutí na tlačítko zobrazí věk.
11.2.2012
Tvorba programů s GUI v C#
73/104
private void button1_Click(object sender, EventArgs e) { DateTime dt = new DateTime(); dt = DateTime.Today; textBox2.Text = (dt.Year - Convert.ToInt32(textBox1.Text)).ToString(); } Spuštění programu
Ovl{dací prvek MonthCalendar MonthCalendar zobrazuje aktu{lní měsíc s aktu{lní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 N{sledují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.
11.2.2012
Tvorba programů s GUI v C#
74/104
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 * 365 + mesic * 30 + den; int akt_rok = dt.Year; int akt_mesic = dt.Month; int akt_den = dt.Day; int akt_dny = akt_rok * 365 + 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(); } Spuštění programu
Zpracov{ní ud{losti DateChanged (změna data) Výpočet se prov{dí 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.
Ovl{dací prvek DateTimePicker 11.2.2012
Tvorba programů s GUI v C#
75/104
DateTimePicker překon{v{ 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 zad{v{ní času.
Řešen{ úloha 31 Rozdíl datumů s využitím dateTimePicker N{sledují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 * 365 + dateTimePicker1.Value.Month * 30 + dateTimePicker1.Value.Day; int d2 = dateTimePicker2.Value.Year * 365 + 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(); }
11.2.2012
Tvorba programů s GUI v C#
76/104
private void dateTimePicker2_ValueChanged(object sender, EventArgs e) { int d1 = dateTimePicker1.Value.Year * 365 + dateTimePicker1.Value.Month * 30 + dateTimePicker1.Value.Day; int d2 = dateTimePicker2.Value.Year * 365 + 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(); } Spuštění programu
Ovl{dací prvek Timer Komponenta Timer spouští určitou ud{lost, když uplyne stanoven{ doba uv{děn{ v milisekund{ch.
Ovl{dací prvek StatusStrip Ovl{dací 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 aktu{lní čas: Na formul{ř vložíme prvek StatusStrip a čas zobrazíme jako hodnotu toolStripStatusLabel1.Text.
Řešen{ úloha 32 Zobrazov{ní aktu{lního času ve třech prvcích textBox a ve stavovém ř{dku Zobrazov{ní aktu{lního času ve třech prvcích textBox a ve stavovém ř{dku
11.2.2012
Tvorba programů s GUI v C#
77/104
Čas je zobrazov{n 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 ud{losti timer1_Tick. Do objektu dt uložíme aktu{lní č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(); } Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
78/104
Ř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); } Spuštění programu
Ovl{dací prvek TabControl Ovl{dací prvek TabControl (listovací r{meček) je hybrid kontejneru a ovl{dacího prvku. Z{ložky nahoře jsou tlačítka, jimiž se přepínají str{nky.
11.2.2012
Tvorba programů s GUI v C#
79/104
Každ{ str{nka je separ{tní kontejner pro jiné ovl{dací prvky.
Řešen{ úloha 34 Využití ovl{dacího prvku TabControl Pomocí ovl{dacího prvku TabControl lze vytvořit formul{ř, obsahující 2 z{lož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 z{ložk{ch
11.2.2012
Tvorba programů s GUI v C#
80/104
Na každou z{ložku umístíme 3 přepínače a nastavíme text na přepínačích podle n{zvů 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 metod{ch 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; } Spuštění programu
Zad{ní 14 Zobrazení hlavního města st{tu Vytvořte aplikaci, kter{ umožní po výběru st{tu z nabídky ovl{dacího prvku ComboBox vypíše jeho hlavní město – viz. uvedený formul{ř a program:
11.2.2012
Tvorba programů s GUI v C#
81/104
Spuštění programu
Zad{ní 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:
Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
82/104
Zad{ní 16 Zobrazov{ní obr{zků Vytvořte aplikaci, kter{ bude na pozadí formul{ře po kliknutí zobrazovat obr{zky. N{zev obr{zku se zobrazí v titulkovém pruhu formul{ře.
Spuštění programu
Zad{ní 17 Výběr obr{zků z nabídky Vytvořte aplikaci, kter{ umožní z nabídky vybrat barvu pozadí formul{ře a obr{zek, zobrazený v PictureBoxu.
11.2.2012
Tvorba programů s GUI v C#
83/104
Zad{ní 18 Zobrazov{ní obr{zků v ovl{dacím prvku pictureBox Vytvořte aplikaci, kter{ bude po kliknutí zobrazovat obr{zky v ovl{dacím prvku pictureBox. Ke změně obr{zku dojde po kliknutí na tlačítko. N{zev obr{zku se zobrazí v titulkovém pruhu formul{ře.
Ovl{dací prvek splitContainer Ovl{dací prvek splitContainer umožňuje dynamicky měnit velikost ovl{dacího prvku přichyceného k některé straně formul{ře.
11.2.2012
Tvorba programů s GUI v C#
84/104
Řešen{ úloha 35 Použití splitContaineru pro rozdělení prostoru formul{ře N{sledující aplikace obsahuje ovl{dací prvek splitContainer, který obsahuje dva panely. V levém panelu je pictureBox, v němž se zobrazí obr{zek, vybraný pomocí OpenFileDialogu. V pravém panelu jsou tlačítka, kter{ umožňují zvolit, jakým způsobem se bude obr{zek 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.
Obr{zek 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) {
11.2.2012
Tvorba programů s GUI v C#
85/104
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; } Spuštění programu
Ovl{dací prvek ToolStrip Panel n{strojů se podob{ hlavní nabídce, ale panely n{strojů obvykle obsahují tlačítka, aby poskytly rychlý přístup k nějaké akci. Panel n{strojů tvoří kolekce tlačítek. Když se klikne na rozevírací tlačítko, rozbalí se nabídka ovl{dacích prvků, které můžeme na panel n{strojů vložit.
11.2.2012
Tvorba programů s GUI v C#
86/104
Obr{zek 34 Vložení ovl{dacích prvků na panel n{strojů ToolStrip
Kliknutí na tlačítcích panelu n{strojů se obvykle zpracov{vají v metodě ButtonClick samotného panelu n{strojů ToolStrip a testov{ním odesilatele (sender) se zjišťuje, na kterém tlačítku uživatel klikl.
Řešen{ úloha 36 Pr{ce s ovl{dacím prvkem ToolStrip N{sledující aplikace ilustruje pr{ci s ovl{dacím prvkem ToolStrip. Na panelu n{strojů jsou umístěny ovl{dací 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 vyj{dř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; } Spuštění programu
11.2.2012
Tvorba programů s GUI v C#
87/104
Pr{ce 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 n{m 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 n{strojový panel a paletu barev.
11.2.2012
Tvorba programů s GUI v C#
88/104
1
2 3 4 5
6
7 8 9 10 11
12 13 14 15 16 17 18 19 20 21 22
23
Pokud chceme odstranit předdefinovanou ikonu, použijeme n{stroj guma. Panel obsahuje n{sledující n{stroje (zleva doprava): 1. Výběrový obdélník 2. Neobdélníkový výběr 3. Kap{tko 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 n{stroje 23. Nastavení citlivého bodu
11.2.2012
Tvorba programů s GUI v C#
89/104
Obr{zek 35 Uk{zka 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 N{sledující aplikace po kliknutí na tlačítko button1 umístí ikonu na formul{ř i do titulkového pruhu.
11.2.2012
Tvorba programů s GUI v C#
90/104
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é zobrazov{ní všech ikon ve složce Ve složce, v níž m{me 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 n{zvy 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() {
11.2.2012
Tvorba programů s GUI v C#
91/104
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 Vytapetov{ní 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)
11.2.2012
Tvorba programů s GUI v C#
92/104
{ g.DrawIcon(icon, x, y); } this.Icon = icon; }
Řešen{ úloha 40 Umístění ikony po kliknutí na formul{ř N{sledují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; }
11.2.2012
Tvorba programů s GUI v C#
93/104
Ř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); } }
11.2.2012
Tvorba programů s GUI v C#
94/104
Zad{ní 19 Zobrazení ikony a jejího n{zvu Vytvořte aplikaci, kter{ kromě zobrazení ikony, zobrazí v textovém poli její n{zev. D{le umožněte při zobrazov{ní ikon se vr{tit zpět kliknutím pravým tlačítkem myši.
Pr{ce s kurzory Microsoft Visual Studio umožňuje vytvořit vlastní ikonu v editoru ikon, který aktivujeme příkazy: Project – Add new item – Cursor File
11.2.2012
Tvorba programů s GUI v C#
95/104
Použití kurzoru Cursor cur = new Cursor(".\\cur\\Cursor1.cur"); this.Cursor = cur;
Řešen{ úloha 42 Proch{zení kurzorů ze složky cur N{sledují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.
11.2.2012
Tvorba programů s GUI v C#
96/104
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 n{zvy souborů ve složce cur. Proto musí být připojen jmenný prostor System.IO. Inkrementuje se index v poli kurzorů, jeho velikost je kontrolov{na, aby nepřes{hl 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 obr{zku pro formul{ř nebo popisku tlačítka.
11.2.2012
Tvorba programů s GUI v C#
97/104
Soubor přid{te 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.
Obr{zek 36 Přid{ní 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 obr{zku. Když je soubor vyznačený jako vložený prostředek (Embedded Resource), vloží se do sady manifestních prostředků kompletu.
11.2.2012
Tvorba programů s GUI v C#
98/104
Obr{zek 37 Nastavení Build Action na Embedded Resource
Platí, že čím víc toho d{me do zdrojů, tím bude mít příslušný .exe soubor větší velikost.
Řešen{ úloha 43 Pr{ce s prostředky
V této úloze je uk{z{na pr{ce 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.
11.2.2012
Tvorba programů s GUI v C#
99/104
Po každém kliknutí na formul{ř dojde ke změně bitmapy, ikony i kurzoru nad formul{řem.
static int i = -1; public Form1() { InitializeComponent(); }
private void Form1_MouseClick(object sender, MouseEventArgs e) { string[] nazvy_i = { "FACE01.ICO", "FACE02.ICO", "FACE03.ICO", "FACE04.ICO","FACE05.ICO"}; string[] nazvy_c = { "3dgarro.cur", "3dgmove.cur", "3dgnesw.cur", "3dgno.cur","3dgns.cur"}; string[] nazvy_b = { "Petrov.jpg", "Spilberk.jpg", "StaraRadnice.jpg", "HradVeveri.jpg","TyrsuvSad.jpg"}; i++; if (i == 5) i = 0; this.Icon = new Icon(GetType(), nazvy_i[i]); this.Cursor = new Cursor(GetType(), nazvy_c[i]); this.BackgroundImage = new Bitmap(GetType(), nazvy_b[i]); }
V obslužné metodě Form1_MouseClick jsou definov{ny tři pole n{zvů pro ikony, kurzory a bitmapy. Po každém kliknutí se zvýší hodnota statické proměnné i, kter{ představuje index v uvedených polích. Musí se zajistit, aby index nepřetekl hodnotu 4, protože pole obsahují 5 prvků. Potom se vytvoří nov{ ikona, kurzor a bitmapa. Metody Icon, Cursor a Bitmap umí načíst obr{zky z prostředků. Prvním parametrem všech těchto metod je funkce GetType(), kter{ vrací typ běžné instance. Spuštění programu
Shrnutí: Uvedený materi{l na řadě řešených příkladů ukazuje využití ovl{dacích prvků při programov{ní aplikací pro Windows v jazyce C#. Studijní materi{l je doplněn řadou spustitelných souborů, uvedených ve složce exe, které realizují kód, uvedený v řešených úloh{ch. Kromě řešených úloh obsahuje materi{l i zad{ní pro samostatné řešení studentů. Většina z nich je doplněna spustitelným programem ve složce exe.
11.2.2012
Tvorba programů s GUI v C#
100/104
Seznam obr{zků Obrázek 1 Volba typu, názvu a umístění nového projektu ............................................................. 4 Obrázek 2 Vytvořené soubory a složky .......................................................................................... 5 Obrázek 3 Ukázka okna se zprávou ................................................................................................ 5 Obrázek 4 Volba hodnoty MessageBoxButtons ............................................................................. 6 Obrázek 5 Nastavení ikony v okně se zprávou ............................................................................... 7 Obrázek 6 Nastavení standardního tlačítka ..................................................................................... 7 Obrázek 7 Okno vlastností formuláře ........................................................................................... 11 Obrázek 8 Tři formulářová okna ................................................................................................... 12 Obrázek 9 Vytvoření pole formulářů ............................................................................................ 14 Obrázek 10 28 oken s různými kurzory ........................................................................................ 15 Obrázek 11 Okno Properties ......................................................................................................... 18 Obrázek 12 Umisťování ovládacích prvků na formulář ................................................................ 20 Obrázek 13 Události pro tlačítko .................................................................................................. 21 Obrázek 14 Nastavení vlastností popisku ..................................................................................... 25 Obrázek 15 Vzhled běžícího programu ......................................................................................... 25 Obrázek 16 Návrh aplikace pro zobrazení souřadnic myšího kurzoru ......................................... 26 Obrázek 17 Běžící aplikace, zobrazující souřadnice myšího kurzoru .......................................... 27 Obrázek 18 Změna barvy šipkami nahoru a dolů ......................................................................... 29 Obrázek 19 Běh aplikace pro výpis znaku a kódu stisknuté klávesy ............................................ 30 Obrázek 20 Výpis hodnot výčtového typu Keys ........................................................................... 31 Obrázek 21 Výčtové typy Keys a KnownColor ............................................................................ 32 Obrázek 22 Hodnoty výčtového typu KnownColor ...................................................................... 32 Obrázek 23 Ukázka použití známých barev .................................................................................. 36 Obrázek 24 Náhodné generování barev kombinací RGB ............................................................. 44 Obrázek 25 Styly tlačítek .............................................................................................................. 45 Obrázek 26 Tlačítka pro pohyb formuláře .................................................................................... 46 Obrázek 27 Nastavení vlastnosti Anchor ...................................................................................... 46 Obrázek 28 Dokování tlačítek ....................................................................................................... 47 Obrázek 29 Metody třídy Convert ................................................................................................ 49 Obrázek 30 Nastavování vlastností posuvníku ............................................................................. 59 Obrázek 31 Ovládací prvek ProgressBar ...................................................................................... 61 Obrázek 32 Nastavení vertikální orientace ovládacích prvků TrackBar ....................................... 63 Obrázek 33 Nastavení vlastností seznamu .................................................................................... 65 Obrázek 34 Vložení ovládacích prvků na panel nástrojů ToolStrip ............................................. 87 Obrázek 35 Ukázka tvorby ikony 32x32 v editoru ikon ............................................................... 90 Obrázek 36 Přidání souboru do projektu....................................................................................... 98 Obrázek 37 Nastavení Build Action na Embedded Resource ....................................................... 99
Uk{zkové programy
Program 1 Ukázka různých typů oken se zprávou ......................................................................... 6 Program 2 Ukázka různých ikon v okně se zprávou ...................................................................... 7 Program 3 Vyhodnocení reakce uživatele ...................................................................................... 8
11.2.2012
Tvorba programů s GUI v C#
101/104
Program Program Program Program Program Program Program Program Program Program
4 Nastavení vlastností formuláře ................................................................................... 12 5 Vytvoření tří formulářových oken .............................................................................. 12 6 Pole deseti formulářů .................................................................................................. 14 7 Nastavení kurzoru nad formulářem ............................................................................ 15 8 Obsluha události KeyDown - změna barev ................................................................ 28 9 Výpis názvů kláves ..................................................................................................... 31 10 Výpis názvů známých barev ..................................................................................... 32 11 Náhodné míchání barev ............................................................................................ 44 12 Standardní dialogy .................................................................................................... 69 13 Zobrazování obrázků na pozadí formuláře ............................................................... 71
Seznam řešených úloh Řešen{ úloha 1 Vlastnosti formul{ře ....................................................................................... 13 Řešen{ úloha 2 Nastavení kurzoru nad formul{řem ............................................................ 14 Řešen{ úloha 3 Kliknutí na formul{ř pro změnu barvy ....................................................... 16 Řešen{ úloha 4 Obsluha pr{ce s myší ..................................................................................... 21 Řešen{ úloha 5 Nastavení vlastností ovl{dacího prvku popisek (Label) .......................... 24 Řešen{ úloha 6 Zobrazení hodnot v popisku ......................................................................... 26 Řešen{ úloha 7 Zpracov{ní stisknuté kl{vesy ....................................................................... 29 Řešen{ úloha 8 Proch{zení zn{mých barev ........................................................................... 33 Řešen{ úloha 9 Ovl{d{ní pohybu formul{ře šipkami .......................................................... 33 Řešen{ úloha 10 Použití metody FromName pro získ{ní n{zvů zn{mých barev ............ 36 Řešen{ úloha 11 Přepis řetězce z jednoho textového pole do druhého ............................. 38 Řešen{ úloha 12 Kopírov{ní textu a pr{ce s výběrem textu ................................................ 38 Řešen{ úloha 13 Výběr zn{mé barvy a její použití ................................................................ 40 Řešen{ úloha 14 Zad{v{ní hesla .............................................................................................. 41 Řešen{ úloha 15 Výpis obsahu souboru do textového pole................................................. 42 Řešen{ úloha 16 Polohov{ní ovl{dacího prvku na formul{ři ............................................. 42 Řešen{ úloha 17 Využití tlačítka pro spuštění n{hodného generov{ní barvy pozadí formul{ře ..................................................................................................................................... 43 Řešen{ úloha 18 Ukotvení tlačítek ........................................................................................... 45 Řešen{ úloha 19 Uk{zka použití číselníku ............................................................................. 47 Řešen{ úloha 20 Realizace kalkulačky pomocí tlačítek textových polí .............................. 49 Řešen{ úloha 21 Zaškrt{vací políčko ...................................................................................... 52 Řešen{ úloha 22 Výpočet ceny zmrzlinového poh{ru .......................................................... 55 Řešen{ úloha 23 Mích{ní barev ze složek RGB s využitím posuvníků .............................. 59 Řešen{ úloha 24 Zobrazení hodnoty, nastavené číselníkem ................................................ 60 Řešen{ úloha 25 Ovl{dací prvek ProgressBar........................................................................ 61 Řešen{ úloha 26 Řešení mích{ní barev pomocí ovl{dacích prvků TrackBar .................... 62
11.2.2012
Tvorba programů s GUI v C#
102/104
Řešen{ úloha 27 Použití popisky jako odkazu (LinkLabel) ................................................. 64 Řešen{ úloha 28 Ovl{dací prvek MenuStrip .......................................................................... 66 Řešen{ úloha 29 Výpočet věku ................................................................................................. 73 Řešen{ úloha 30 Přesný výpočet věku .................................................................................... 74 Řešen{ úloha 31 Rozdíl datumů s využitím dateTimePicker .............................................. 76 Řešen{ úloha 32 Zobrazov{ní aktu{lního času ve třech prvcích textBox a ve stavovém ř{dku ............................................................................................................................................ 77 Řešen{ úloha 33 Realizace stopek ............................................................................................ 79 Řešen{ úloha 34 Využití ovl{dacího prvku TabControl ...................................................... 80 Řešen{ úloha 35 Použití splitContaineru pro rozdělení prostoru formul{ře .................... 85 Řešen{ úloha 36 Pr{ce s ovl{dacím prvkem ToolStrip ......................................................... 87 Řešen{ úloha 37 Umístění ikony .............................................................................................. 90 Řešen{ úloha 38 Postupné zobrazov{ní všech ikon ve složce ............................................. 91 Řešen{ úloha 39 Vytapetov{ní formul{ře ikonou ................................................................. 92 Řešen{ úloha 40 Umístění ikony po kliknutí na formul{ř ................................................... 93 Řešen{ úloha 41 Výběr ikony ze seznamu.............................................................................. 94 Řešen{ úloha 42 Proch{zení kurzorů ze složky cur............................................................. 96 Řešen{ úloha 43 Pr{ce s prostředky ........................................................................................ 99
Seznam zad{ní Zad{ní 1 Vyhodnocení reakce v okně se zpr{vou ................................................................... 9 Zad{ní 2 Vyhodnocení reakce Ano/Ne/Storno ........................................................................ 9 Zad{ní 3 Nastavení stylu tlačítka............................................................................................. 45 Zad{ní 4 Vylepšen{ kalkulačka................................................................................................ 51 Zad{ní 5 Výpočet průměru ....................................................................................................... 52 Zad{ní 6 Rozhodov{ní pomocí dvou zaškrt{vacích políček ............................................... 53 Zad{ní 7 Dva přepínače ............................................................................................................ 55 Zad{ní 8 Řešení Zad{ní 6 pomocí přepínače ......................................................................... 55 Zad{ní 9 Nastavení barvy pomocí přepínačů ....................................................................... 56 Zad{ní 10 Realitní kancel{ř – určení ceny domu................................................................... 57 Zad{ní 11 Realitní kancel{ř - vyhled{ní bytů ........................................................................ 58 Zad{ní 12 Rozevírací seznam pro výběr barvy ..................................................................... 66 Zad{ní 13 Jednoduch{ pr{ce se soubory ................................................................................ 70 Zad{ní 14 Zobrazení hlavního města st{tu ............................................................................ 81 Zad{ní 15 Výběr přísloví ........................................................................................................... 82 Zad{ní 16 Zobrazov{ní obr{zků .............................................................................................. 83 Zad{ní 17 Výběr obr{zků z nabídky ....................................................................................... 83
11.2.2012
Tvorba programů s GUI v C#
103/104
Zad{ní 18 Zobrazov{ní obr{zků v ovl{dacím prvku pictureBox ....................................... 84 Zad{ní 19 Zobrazení ikony a jejího n{zvu .............................................................................. 95
Literatura *1+ Charles Petzold: Programov{ní Microsoft Windows Forms v jazyce C#, Computer Press, 2006 [2] Chris Sells: C# a WinForms, Zoner Press, 2005 [3] Jeff Kent: Visual C# 2005 bez předchozích znalostí, Computer Press, 2007 [4] Amadeo Mareš: C# 2010 Sbírka nejužitečnějších řešení program{torských úloh, Computer Press, 2011 [5] wikipedie
11.2.2012
Tvorba programů s GUI v C#
104/104