Ovládací prvky C# WinForms aplikací a jejich události

Tento článek souvisí s dříve publikovaným článkem o použití prostředků v C# a jejich praktická aplikace ve Visual C# Express. Nyní se budeme věnovat ovládacím prvkům GUI v aplikacích WinForms a jejich událostem. Událost určuje interakci prvku na nějakou akci, nejčastěji na kliknutí. Ukážeme si základy událostí v jazyce C# a opět s praktickou implementací ve vývojovém prostředí MS Visual C# Express.

Při tvorbě WinForms aplikací, tedy aplikací s GUI ve Windows, se neobejdeme bez ovládacích prvků a jejich událostí. Ovládacími prvky rozumíme prvky GUI, tedy tlačítka, políčka, seznamy, nabídky, atd. Událost poté říká, co se stane, když například na prvek klikneme či třeba jen přejedeme kurzorem.

Ve Visual C# Express vytvořme nový projekt WinForms aplikace a IDE nabídne základní okno aplikace, form. Do tohoto okna můžeme snadno umisťovat metodou táhni a pusť (drag and drop) ovládací prvky. V nabídce je jich opravdu, které C#, resp. .NET nabízí. Ovládací prvky uvidíme ihned po vytvoření WinForms nové aplikace.

Dostupné ovládací prvky GUI pro WinForms aplikace v .NET

Mějme na paměti, že ovládací prvky neposkytuje jazyk C# jako takový, ale platforma .NET. V C# budeme řešit až události samotné. Nyní můžeme jednoduše přetáhnout z nabídky příslušný prvek do okna. Vytvořme si nejprve skupinové pole (GroupBox) a v něm budeme mít 2 tlačítka jako na obrázku níže.

Tvorba prvků GUI v okně programu

Zatím jsou prvky pojmenované výchozím způsobem, což nebude pro náš případ ideální. Naše 2 tlačítka způsobí události ukončení a restart aplikace, což provedme později. Pojmenujeme skupinové pole Akce s aplikací a tlačítka Konec a Restart. Navíc upravíme i název celé aplikace na Události a změníme barvu okna na modrou. K tomu všemu nebudeme potřebovat napsat jediný řádek kódu v C#, ten budeme potřebovat až pro události. Veškeré vlastnosti můžeme změnit v podokně Properties, které je vidět vpravo dole (výchozí rozvržení). Před změnou musíme však v okně kliknout na příslušný prvek, jehož vlastnosti chceme měnit. Začněme kliknutím na vytvořené pole a v seznamu vlastností najdeme položku Text a přepíšeme výchozí groupBox1 na Akce s aplikací. Potvrdíme stiskem klávesy Enter. Totéž s tlačítky, přepíšeme jejich názvy úplně stejně. Nakonec změníme stejně text v záhlaví aplikace. Poslední úpravou bude změna vlastnosti BackColor na SkyBlue, aby pozadí okna bylo světle modré. Pozor, musíme však kliknout do prázdného místa v okně, jinak bysme například změnili barvu pole! Podívejme se na změny vlastností:

Změny vlastností ovládacích prvků aplikací WinForms

Změňme ještě velikost okna našeho programu z výchozích 300 x 300 pixelů na 200 x 200. Bude to stačit. To zařídíme změnou vlastnosti Size, kde zadáváme šířku a výšku okna. Naše výsledné upravené okno vypadá následovně:

Upravené okno s popsanými prvky pomocí změn vlastností prvků

Mohli bychom si dále „hrát“ s vlastnostmi, například změna písma, barev tlačítek, atd. Ale přejděme k událostem. Když aplikací zkompilujeme a spustíme (z nabídky Debug – Start Debugging či rychleji stiskem F5), spustí se toto okno, tedy aplikace. Tlačítka však zatím jsou „mrtvá“, nedělají vůbec nic ani po kliku. Okno můžeme zavřít a pustíme se do událostí.

Až teprve nyní využijeme skutečně jazyk C# k programování jednoduchých událostí. Zařídíme nejprve to, aby po kliku na tlačítko Konec se aplikaci ukončila. K tomu slouží událost Application.Exit. Podobně jako pro změnu vlastností klikneme na tlačítko. V podokně Properties pomocí tlačítka „blesku“ přepneme z vlastností na události a vidíme, že primární nabízenou událostí je kliknutí, tedy Click. Tu zvolíme dvojklikem a ihned se zobrazí kód, kam do bloku můžeme vepsat akci události, v našem případě Application.Exit a takto to reálně vypadá v kódu:

Programování události Application.Exit po stisku tlačítka v C# kódu

při psaní nám technologie snippetů již předhazuje vhodné příkazy, to oceníme později při tvorbě událostí barev tlačítek. Kód říká, že jsme naprogramovali pro událost Click akci ukončení aplikace (resp. WinForms okna) pomocí Application.Exit. Naprosto stejně vytvoříme pro druhé tlačítko akci Application.Restart opět pro událost Click. Tlačítko má stále interní název button1, nikoli Konec, to je pouze text na tlačítku.

Po vytvoření této druhé tlačítko můžeme opět aplikaci spustit (F5) a vyzkoušet si chování tlačítek. Aplikace už je „živá“, něco umí. Aplikaci ukončeme a pojďme programovat dále. Jak by bylo pěkně, kdyby tlačítko Konec zčervenalo a mělo žluté písmo při najetí kurzorem, jako upozornění. K tomu budeme potřebovat dvě jiné události a sice MouseHover a MouseLeave, tedy přejetí myší nad prvek a když kurzor opustí prvek. Budeme také potřebovat jmenný prostor System.Drawing pro změnu barev, který je již deklarován direktivou using System.Drawing na začátku kódu programu.

Klikneme tedy opět na tlačítko Konec v návrhu okna. Opět se přepneme „bleskem“ na události a tentokrát vybereme událost MouseHover. Po dvojkliku opět ihned uvidíme kód, příslušný blok pro zapsání akce. Psaní velmi urychluje napovídání pomocí snippetů, takže jen „enterujeme“. Tento blok kódu obsahuje:

private void button1_MouseHover(object sender, EventArgs e)

{

this.button1.BackColor = Color.Red;

this.button1.ForeColor = Color.Yellow;

}

Pokud bychom nedeklarovali jmenný prostor System.Drawing direktivou using, pak bychom museli napsat System.Drawing.Color.Red. Tento kód říká: při přejetí kurzorem nad prvek bude barva tlačítka button1 červená a popisek bude žlutý. Pokud si program hned spustíme a vyzkoušíme, uvidíme, že se tlačítko zbarví jak jsme chtěli, ale při opuštění tlačítka kurzorem zůstane červená barva se žlutým textem. A my chceme, aby tato barva byla jen při přejetí, jakmile kurzor opustí tlačítko, bude opět šedé. K tomu potřebujeme druhou událost MouseLeave. Stejným způsobem zapíšeme změnu takto:

private void button1_MouseLeave(object sender, EventArgs e)

{

this.button1.BackColor = SystemColors.ButtonFace;

this.button1.ForeColor = Color.Black;

}

Jediný rozdíl je ten, že pro barvu tlačítka použijeme SystemColors pro systémové barvy místo Color. Zkusme naši aplikaci ještě vylepšit, že se zároveň při najetí kurzoru na tlačítko vypíše dole v okně text Stisk tlačítka ukončí aplikaci a pro tlačítko Restart se vypíše Stisk tlačítka restartuje aplikaci. K tomu použijeme již ukázané události MouseHover, reps. pouze připíšeme další kód. Ale potřebujeme vytvořit prostor pro text. Vrátíme se na začátek tvorby programu, kdy jsme přetahovali prvky do okna. Nyní si přetáhneme do okna prvek Label a položku Text v Properties nechme prázdnou. Nyní již nemusíme definovat událost, MouseHover pro tlačítko už máme, pro druhé ji musíme deklarovat. Nyní stačí do události MouseHover pro button1 dopsat tento řádek:

this.label1.Text = „Stisk tlačítka ukončí aplikaci.“;

a pro událost MouseLeave zadáme prázdný text aby nebylo nic vidět:

this.label1.Text = „“;

Tak stejně pro tlačítko Restart doplníme popisky. Celý kód naší vytvořené aplikace:

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Drawing;

using System.Text;

using System.Windows.Forms;

namespace

WindowsFormsApplication1

{

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

}

private void button2_Click(object sender, EventArgs e)

{

Application.Restart();

}

private void button1_Click(object sender, EventArgs e)

{

Application.Exit();

}

private void button1_MouseHover(object sender, EventArgs e)

{

this.button1.BackColor = Color.Red;

this.button1.ForeColor = Color.Yellow;

this.label1.Text = „Stisk tlačítka ukončí aplikaci.“;

}

private void button1_MouseLeave(object sender, EventArgs e)

{

this.button1.BackColor = SystemColors.ButtonFace;

this.button1.ForeColor = Color.Black;

this.label1.Text = „“;

}

private void button2_MouseHover(object sender, EventArgs e)

{

this.label1.Text = „Stisk tlačítka restartuje aplikaci.“;

}

private void button2_MouseLeave(object sender, EventArgs e)

{

this.label1.Text = „“;

}

}

}

Cílem tohoto článku bylo ukázat základy tvorby GUI s událostmi v prostředí WinForms aplikací, jež jsou standardními .NET aplikacemi pod Windows pomocí MS Visual C# Express. Prostředí MS Visual C# Express je ideální pro začínající programátory WinForms aplikací. Ukázali jsme si praktickou tvorbu ovládacích prvků okenních aplikací, jejich vlastnosti a především programování událostí. Možností v programování WinForms aplikací s GUI je samozřejmě daleko více, než jsme krátce představili.