Grafikus C# – Windows Forms tanfolyam › 1.6 lecke

Windows Forms · 1.6 lecke · önálló gyakorlás

ComboBox, TrackBar és DateTimePicker

Három gyakori beviteli elem: a legördülő lista, a csúszka és a dátumválasztó. Mindegyiknél megtanuljuk, melyik tulajdonságból olvasható ki a felhasználó választása, és melyik eseményre kell reagálni. A leckében készített ComboBox-tudás a MiniWord betűtípus-választójánál is jól jön.

  • kb. 70 perc
  • kezdő szint
  • választó vezérlők
Diák C# programozást gyakorol egy tanulósarokban

A lecke végére

  • feltöltesz egy ComboBox-ot, és beállítod a DropDownStyle tulajdonságot;
  • reagálsz a SelectedIndexChanged eseményre, és kiolvasod a választást (Text, SelectedItem, SelectedIndex);
  • a FindStringExact() és a FindString() metódussal keresel a listában;
  • a TrackBar Minimum, Maximum és Value tulajdonságát használod;
  • a DateTimePicker Value tulajdonságából dátumot olvasol ki és formázol;
  • két dátum között kiszámolod a napok számát.

Mielőtt elkezded

Ehhez a leckéhez kell az 1.5 lecke (listák, Items, SelectedIndex), az 1.3 lecke (szám és szöveg) és az if–else.

1.5 CheckedListBox és ListBox →

A ComboBox: legördülő lista

Tegyél az ablakra egy ComboBox-ot és egy feliratot:

cmbSzinekA legördülő lista. Az előtag cmb.
lblValasztottEgy Label, amely kiírja a választott színt.
  1. Jelöld ki a cmbSzinek elemet, és a Properties ablakban nyisd meg az Items tulajdonság szerkesztőjét ((Collection) gomb). Írd be soronként: Piros, Zöld, Kék, Sárga.
  2. Állítsd a DropDownStyle tulajdonságot DropDownList értékre: így a felhasználó csak a listából választhat, szabadon nem írhat be szöveget.
  3. Kattints duplán a ComboBoxra: létrejön a SelectedIndexChanged eseménykezelő, amely akkor fut le, amikor a felhasználó másik elemet választ.
Form1.csC#
private void cmbSzinek_SelectedIndexChanged(object sender, EventArgs e)
{
lblValasztott.Text = $"Választott szín: {cmbSzinek.Text}";
}

A választott elemet háromféleképpen érheted el:

TextA ComboBox szövege, vagyis a kiválasztott elem szövege. Közvetlenül string.
SelectedItemA kiválasztott elem object típusként. Szövegként a ToString() kell hozzá. Ha nincs kiválasztott elem, értéke null.
SelectedIndexA kiválasztott elem sorszáma 0-tól. Ha nincs kiválasztott elem, értéke -1.
DropDownStyleDropDown: a felhasználó szabadon is beírhat. DropDownList: csak a listából választhat. Választást kínáló listáknál a DropDownList a biztonságos.
📷 Képernyőkép helye

Mit tegyél ide: a futó program lenyitott ComboBoxszal (Piros, Zöld, Kék, Sárga) és alatta a „Választott szín: Kék” felirattal.Javasolt fájlnév: winforms-1-6-combobox.webp · Alt szöveg: A ComboBox lenyitott listája és a választott szín kiírva

Jósolj!

A lista elemei: Piros, Zöld, Kék, Sárga. A felhasználó a „Kék” elemet választja. Mi a SelectedIndex értéke?

Jóslat ellenőrzése

2, mert a számozás 0-tól indul: a Piros 0, a Zöld 1, a Kék 2.

Keresés a listában: FindStringExact

Ha egy elem nevét tudod, és meg szeretnéd keresni a listában, a FindStringExact() megmondja a sorszámát. Tegyél az ablakra egy txtKeresett beviteli mezőt és egy btnKeres gombot:

Form1.csC#
private void btnKeres_Click(object sender, EventArgs e)
{
int index = cmbSzinek.FindStringExact(txtKeresett.Text);

if (index >= 0)
{
cmbSzinek.SelectedIndex = index;
}
else
{
MessageBox.Show("Nincs találat.");
}
}
FindStringExact(szöveg)Megkeresi a pontosan egyező elemet (a kis- és nagybetű különbségét nem figyeli). Visszaadja a sorszámát, vagy -1-et, ha nincs ilyen.
FindString(szöveg)Olyan elemet keres, amely a megadott szöveggel kezdődik. A „Ké” szövegre a „Kék” találat, a „Ki” szövegre viszont nem, mert egyetlen elem sem kezdődik így. A „K” az első K betűs elemet adja.
SelectedIndex = indexKiválasztja a megtalált elemet, ezzel a SelectedIndexChanged esemény is lefut.
index >= 0Akkor igaz, ha van találat (a -1 jelenti, hogy nincs).

Jósolj!

A keresőmezőbe azt írod, hogy zöld (kisbetűvel). Megtalálja a „Zöld” elemet? Mi történik, ha azt írod, hogy Zö?

Jóslat ellenőrzése

A zöld szóra találat lesz, mert a FindStringExact nem tesz különbséget kis- és nagybetű között. A Zö szóra viszont nincs találat, mert az nem pontos egyezés. Ilyenkor a FindString() megtalálná, mert a „Zö” a „Zöld” eleje.

A TrackBar: csúszka

A TrackBar egy csúszka, amellyel egész számot választhatsz egy tartományból. Tegyél az ablakra egy trbErtek csúszkát és egy lblErtek feliratot:

Minimum és MaximumA csúszka legkisebb és legnagyobb értéke (alapból 0 és 10). Állítsd például 0 és 100 közé.
ValueA csúszka aktuális értéke, egész szám (int). Szövegként a ToString() alakítja át.
TickFrequencyA skálán látható osztások távolsága.
ScrollAz esemény, amely a csúszka húzásakor fut le.
Form1.csC#
private void trbErtek_Scroll(object sender, EventArgs e)
{
lblErtek.Text = $"Érték: {trbErtek.Value}";
}

A Value nem lépheti át a határokat

Ha kódból olyan értéket állítasz be, amely kisebb a Minimum vagy nagyobb a Maximum értéknél, a program futás közben hibával áll meg. Például trbErtek.Value = 150; 0–100 között.

📷 Képernyőkép helye

Mit tegyél ide: a futó program a csúszkával (például 65-nél) és az „Érték: 65” felirattal. A Properties ablakban látszik a Minimum 0 és a Maximum 100.Javasolt fájlnév: winforms-1-6-trackbar.webp · Alt szöveg: A csúszka 65 értékkel és a kiírt szám

A DateTimePicker: dátumválasztó

A DateTimePicker naptárból választható dátumot kínál. A választott érték a Value tulajdonságban van, típusa DateTime (dátum és idő). Tegyél az ablakra egy dtDatum dátumválasztót és egy lblDatum feliratot:

Form1.csC#
private void dtDatum_ValueChanged(object sender, EventArgs e)
{
lblDatum.Text = $"Választott nap: {dtDatum.Value.ToShortDateString()}";
}
ValueA választott dátum és idő (DateTime).
ValueChangedAz esemény, amely a dátum megváltozásakor fut le.
ToShortDateString()Rövid dátumszöveget készít, a gép nyelvi beállítása szerint (például 2026. 10. 24.).
FormatA megjelenítési forma: Long (hosszú), Short (rövid), Time (idő).

Két dátum különbségéből a napok számát a .Days adja meg. Így számolhatod ki, hány nap van hátra a választott dátumig:

Form1.csC#
int napok = (dtDatum.Value.Date - DateTime.Today).Days;
lblDatum.Text = $"Hátralévő napok: {napok}";
DateTime.TodayA mai nap (idő nélkül).
.Value.DateA választott nap idő nélkül, hogy a két dátum azonos formában legyen.
(... - ...).DaysKét dátum különbsége, napokban. Múltbeli dátumnál negatív szám jön ki.

Jósolj!

Ma október 24. van, és a választott dátum október 31. Mit mutat a „Hátralévő napok”? Mi történik, ha október 20-át választod?

Jóslat ellenőrzése

Október 31-re 7-et mutat. Október 20-ra -4-et, mert az már a múltban van. Ezt érdemes külön kezelni, például egy üzenettel, hogy a dátum már elmúlt.

📷 Képernyőkép helye

Mit tegyél ide: a DateTimePicker lenyitott naptára a választott nappal, alatta a „Hátralévő napok: 7” felirat.Javasolt fájlnév: winforms-1-6-datetimepicker.webp · Alt szöveg: A DateTimePicker naptára és a hátralévő napok száma

Hibakeresés: te vagy a hibadetektív

Mi a baj, és hogyan javítod?

Gondold végig az okot, és csak utána nyisd le a megoldást.

1. Szöveg az index helyén

cmbSzinek.SelectedIndex = txtKeresett.Text;
// CS0029: Cannot implicitly convert type 'string' to 'int'
Hiba és javítás

Fordítási hiba (CS0029): a SelectedIndex egész szám, a Text szöveg. Előbb keresd meg a szöveg sorszámát a FindStringExact() metódussal, ellenőrizd, hogy nem -1, és csak utána állítsd be.

2. NullReferenceException

string szin = cmbSzinek.SelectedItem.ToString();
Hiba és javítás

Futás közbeni hiba, ha nincs kiválasztott elem, mert a SelectedItem ilyenkor null. Ellenőrizd előbb: if (cmbSzinek.SelectedItem != null). Vagy használd a cmbSzinek.Text tulajdonságot, amely üres szöveget ad.

3. A csúszka túllépi a határt

trbErtek.Value = 150;
// a Maximum értéke 100
Hiba és javítás

Futás közbeni hiba (ArgumentOutOfRangeException): a Value nem lehet nagyobb a Maximum értéknél. Állíts be megfelelő határt, vagy kisebb értéket.

4. A csúszka nem frissíti a feliratot

A csúszkát mozgatod, de a felirat nem változik.

Ok és javítás

A Scroll eseménykezelő nincs összekötve a csúszkával (például kézzel gépelted be). Hozd létre dupla kattintással a TrackBaron, vagy az Events nézetben (villám) válaszd ki a Scroll sornál.

5. Nem a várt dátumforma

A dátum a feliraton másképp jelenik meg, mint a barátodnál.

Ok és javítás

A ToShortDateString() a számítógép nyelvi és régiós beállításait követi. Ha mindenhol ugyanazt a formát szeretnéd, add meg a formát: dtDatum.Value.ToString("yyyy. MM. dd.").

Mini projekt: beállítópanel

Állíts össze egy kis beállító ablakot, amely a három vezérlőt együtt használja:

  1. A ComboBoxból (Piros, Zöld, Kék) választott szín legyen az ablak háttérszíne.
  2. A csúszka (10–40) állítsa egy lblMinta felirat betűméretét.
  3. A dátumválasztóval megadott napig számoljon vissza egy felirat: Hátralévő napok: ...
Form1.csC#
private void cmbSzinek_SelectedIndexChanged(object sender, EventArgs e)
{
if (cmbSzinek.Text == "Piros")
{
this.BackColor = Color.LightCoral;
}
else if (cmbSzinek.Text == "Zöld")
{
this.BackColor = Color.LightGreen;
}
else if (cmbSzinek.Text == "Kék")
{
this.BackColor = Color.LightSkyBlue;
}
}

private void trbErtek_Scroll(object sender, EventArgs e)
{
lblMinta.Font = new Font(lblMinta.Font.FontFamily, trbErtek.Value);
lblErtek.Text = $"Betűméret: {trbErtek.Value}";
}

private void dtDatum_ValueChanged(object sender, EventArgs e)
{
int napok = (dtDatum.Value.Date - DateTime.Today).Days;
lblDatum.Text = $"Hátralévő napok: {napok}";
}

A trbErtek Minimum értéke legyen 10, a Maximum értéke 40, A this az ablakot jelenti, a this.BackColor tehát az ablak háttérszíne.

📷 Képernyőkép helye

Mit tegyél ide: a kész beállítópanel zöld háttérrel, nagyobb betűméretű mintafelirattal és a hátralévő napok számával.Javasolt fájlnév: winforms-1-6-beallitopanel.webp · Alt szöveg: A kész beállítópanel ComboBoxszal, csúszkával és dátumválasztóval

Három önálló gyakorlófeladat

Egyszerre csak egyet csinálj: tervezd meg, írd meg, futtasd, ellenőrizd, és csak utána nyisd ki a megoldást.

1. Keresés a név elejére

A FindStringExact helyett próbáld ki a FindString metódust. Mi történik, ha csak a név elejét írod be?

Egy lehetséges megoldás
int i = cmbSzinek.FindString(txtKeresett.Text);

if (i >= 0)
{
cmbSzinek.SelectedIndex = i;
}

A „Z” vagy a „Zö” is megtalálja a „Zöld” elemet, mert az a szöveggel kezdődik.

2. Hangerő-csúszka

A csúszka legyen 0 és 100 között, és tíz egységenként legyenek osztások. A felirat mutassa az értéket.

Egy lehetséges megoldás
trbErtek.Minimum = 0;
trbErtek.Maximum = 100;
trbErtek.TickFrequency = 10;
lblErtek.Text = trbErtek.Value.ToString();

Ezeket a Properties ablakban is beállíthatod. A kódban a Form1_Load eseménybe tedd.

3. Hosszú dátum

A dátumválasztó változásakor a feliraton a dátum hosszú formában jelenjen meg, például: 2026. október 24., szombat.

Egy lehetséges megoldás
lblDatum.Text = dtDatum.Value.ToLongDateString();

Gyakorlótár: 6 további feladat

Három szinten gyakorolhatsz: alap, közepes és kihívás. Építsd meg a felületet, próbáld ki, és csak utána nyisd le a megoldást.

Alap szint

1. Kiválasztott város

Egy cmbVaros legördülő listában (DropDownList) legyen négy város. A kiválasztás után a lblEredmeny felirat írja ki: Kiválasztott város: Pécs.

Megoldás megnyitása

A városokat a Items tulajdonságban gépeled be (soronként egyet). A SelectedIndexChanged esemény a választás megváltozásakor fut le. A SelectedItem lehet null, ha nincs kiválasztott elem, ezért ellenőrizzük.

Form1.csC#
private void cmbVaros_SelectedIndexChanged(object sender, EventArgs e)
{
if (cmbVaros.SelectedItem != null)
{
lblEredmeny.Text = "Kiválasztott város: " + cmbVaros.SelectedItem;
}
}

2. Csúszka kijelzése

Egy trbErtek csúszka (0–100) értékét a lblEredmeny mutassa százalékként: 35 %.

Megoldás megnyitása

A TrackBar Minimum és Maximum tulajdonságát a Properties ablakban állítod. A Scroll esemény a csúszka mozgatásakor fut le, a Value az aktuális érték.

Form1.csC#
private void trbErtek_Scroll(object sender, EventArgs e)
{
lblEredmeny.Text = trbErtek.Value + " %";
}

Közepes szint

3. Színkeverő

Három csúszkával (trbPiros, trbZold, trbKek, mindegyik 0–255) keverd a pnlSzin panel háttérszínét. Egyetlen eseménykezelőt használj.

Megoldás megnyitása

A Color.FromArgb(piros, zöld, kék) három számból színt készít. A tervezőben mindhárom csúszka Scroll eseményénél ugyanazt a metódust válaszd.

Form1.csC#
private void SzinValtozott(object sender, EventArgs e)
{
pnlSzin.BackColor = Color.FromArgb(trbPiros.Value, trbZold.Value, trbKek.Value);
}

4. Hány napja élsz?

Egy dtpSzuletes DateTimePicker és egy gomb alapján írd ki, hány napja élsz. Jövőbeli dátumnál jelezz hibát.

Megoldás megnyitása

Két dátum különbsége TimeSpan (időtartam), amelynek Days tulajdonsága a napok száma. A .Date az időpontot levágja, csak a dátumot hagyja.

Form1.csC#
private void btnNapok_Click(object sender, EventArgs e)
{
DateTime szuletes = dtpSzuletes.Value.Date;

if (szuletes > DateTime.Today)
{
lblEredmeny.Text = "A születési dátum nem lehet a jövőben!";
return;
}

TimeSpan eltelt = DateTime.Today - szuletes;
lblEredmeny.Text = $"{eltelt.Days} napja élsz.";
}

Kihívás szint

5. Két dátum között

Két DateTimePicker (dtpKezdet, dtpVeg) közötti napok számát írd ki. Ha a vég a kezdet előtt van, jelezz hibát.

Megoldás megnyitása

Az összehasonlítás és a kivonás ugyanúgy működik, mint az előző feladatban. A negatív eredményt előre ellenőrizzük.

Form1.csC#
private void btnKulonbseg_Click(object sender, EventArgs e)
{
DateTime kezdet = dtpKezdet.Value.Date;
DateTime veg = dtpVeg.Value.Date;

if (veg < kezdet)
{
lblEredmeny.Text = "A végdátum nem lehet a kezdet előtt!";
return;
}

lblEredmeny.Text = $"A két dátum között {(veg - kezdet).Days} nap van.";
}

6. Keresés a listában

Egy txtKeres mezőbe írt várost keresd meg a cmbVaros listában, és ha megvan, jelöld ki. Ha nincs, írd ki, hogy nincs a listában.

Megoldás megnyitása

A FindStringExact a pontos egyezés indexét adja vissza (kis- és nagybetűtől függetlenül), vagy -1-et, ha nincs találat.

Form1.csC#
private void btnKeres_Click(object sender, EventArgs e)
{
int index = cmbVaros.FindStringExact(txtKeres.Text.Trim());

if (index >= 0)
{
cmbVaros.SelectedIndex = index;
}
else
{
lblEredmeny.Text = "Ez a város nincs a listában.";
}
}

Gyors önellenőrzés

Válaszolj fejben, és csak utána nyisd le a választ.

1. Mit jelent a -1 a FindStringExact eredményében?

Azt, hogy nincs találat a listában.

2. Milyen típusú a TrackBar Value tulajdonsága?

Egész szám (int). Szövegként a ToString() alakítja át.

3. Mikor fut le a SelectedIndexChanged?

Amikor másik elemet választanak a listában, akár a felhasználó, akár a kód (a SelectedIndex beállításával).

4. Mi a különbség a DropDown és a DropDownList között?

A DropDown engedi szabadon beírni a szöveget, a DropDownList csak a listából való választást.

5. Hogyan számolod ki két dátum között a napok számát?

A két dátum különbségének .Days tulajdonságával, például (masikDatum - DateTime.Today).Days.

6. Mi történik, ha a csúszka Value értékét a Maximum fölé állítod?

Futás közbeni hiba (ArgumentOutOfRangeException).

Mit tudsz már?

  • Feltöltesz és kezelsz egy ComboBoxot a DropDownList stílussal.
  • Kiolvasod a választást a Text, a SelectedItem és a SelectedIndex segítségével.
  • Keresel a listában a FindStringExact és a FindString metódussal.
  • Használod a TrackBar Minimum, Maximum és Value tulajdonságát.
  • Dátumot olvasol ki és formázol, és napokat számolsz.

Következő lecke: MenuStrip – File, About, Exit

A felület egyre összetettebb. A következő leckében menüsort építünk, amely a legtöbb ablakos program része.